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

@@ -19,19 +19,23 @@
         <img src="asset/pic/qinshihuang/QinShiHuang.png" alt="秦始皇">
       </div>
       <div id="qinshihuang1" class="empire">
-        <img src="asset/pic/qinshihuang/QinShiHuang_LeadPoisoning.png" alt="死法1"> 
+        <img src="asset/pic/qinshihuang/QinShiHuang_LeadPoisoning.png" alt="死法1">
       </div>
       <div id="qinshihuang2" class="empire">
-        <img src="asset/pic/qinshihuang/QinShiHuang_Meningitis.png" alt="死法2"> 
+        <img src="asset/pic/qinshihuang/QinShiHuang_Meningitis.png" alt="死法2">
       </div>
       <div id="qinshihuang3" class="empire">
-        <img src="asset/pic/qinshihuang/QinShiHuang_Murder.png" alt="死法3"> 
+        <img src="asset/pic/qinshihuang/QinShiHuang_Murder.png" alt="死法3">
       </div>
 
       <!-- 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,20 +1,33 @@
 // Function to show an element
-    function showElement(selector) {
+function showElement(selector) {
-        const element = document.querySelector(selector);
+    const element = document.querySelector(selector);
-        if (element) {
+    if (element) {
-            element.style.display = 'block';
+        element.style.display = 'block';
-        }
     }
+}
+
+// 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() {
     
 
-    // 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]);
-    }
-
     // 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;
 });