feat: add dialogue

css/game.css

@@ -51,14 +51,28 @@
     left: 1050px;
     display: none;
   }
-  #dialogueBox img{
+  #dialogueBox {
     position: absolute;
     width: 512px;
     height: 512px;
     top: 50px;
     left: 600px;
+  }
+  #dialogueBox img{
+    position: absolute;
+    
+    width: 512px;
+    height: 670px;
     display: none;
   }
+  #dialogueText {
+    position: absolute;
+    top: 200px;
+    left: 100px;
+    width: 340px;
+    height: 128px;
+    font-size: 40px;
+  }
   #customer1 img{ /* 中年男 */
     display: none;
   }

game.html

@@ -31,7 +31,11 @@
       <!-- customers elements -->
       <div id="dialogueBox" class="dialogueBox">
         <img src="asset/pic/qinshihuang/DialogueBox.png" alt="对话框">
+        <div id="dialogueText" class="dialogueText">
+
         </div>
+      </div>
+
       <div id="customer1" class="customer">
         <img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
       </div>
@@ -78,7 +82,7 @@
       </div>
     </div>
 
-<script src="js/game.js"></script>
+    <script src="js/game.js"></script>
 
   </body>
 </html>

js/game.js

@@ -1,19 +1,32 @@
 // Function to show an element
-    function showElement(selector) {
+function showElement(selector) {
     const element = document.querySelector(selector);
     if (element) {
         element.style.display = 'block';
     }
-    }
-document.addEventListener("DOMContentLoaded", function() {
+}
 
-
-    // Function to randomly select a customer
-    function showRandomCustomer() {
+// Function to randomly select a customer
+function showRandomCustomer() {
     const customers = ['#customer1 img', '#customer2 img', '#customer3 img'];
     const randomIndex = Math.floor(Math.random() * customers.length);
     showElement(customers[randomIndex]);
-    }
+}
+
+var questions = [
+        "如何建立统一的度量衡体系以加强中央集权？",
+        "如何制定合理的税收政策来增强国库？",
+        "如何组织和动员资源建造长城以防御外敌？",
+        "如何执行禁止私人持有武器的政策？",
+        "如何推广统一的书写系统来加强文化统一？",
+        "如何合理征召士兵并保持军队的高效运作？",
+        "如何处理与儒家思想相关的政治异见？",
+        "如何加强皇帝的集权制度？",
+        "如何建立和维护一个有效的道路交通网络？",
+        "如何处理与周边国家的外交关系？"
+    ];
+document.addEventListener("DOMContentLoaded", function() {
+    
 
     // Show dialogue box
     showElement("#dialogueBox img");
@@ -30,4 +43,8 @@ document.addEventListener("DOMContentLoaded", function() {
 
     // Show normal Qin Shi Huang
     showElement('#qinshihuang img');
+
+    // Show random question
+    var randomQuestion = questions[Math.floor(Math.random() * questions.length)];
+    document.getElementById("dialogueText").innerHTML = randomQuestion;
 });