feat: add dialogue box

css/game.css

@@ -51,6 +51,14 @@
     left: 1050px;
     display: none;
   }
+  #dialogueBox img{
+    position: absolute;
+    width: 512px;
+    height: 512px;
+    top: 50px;
+    left: 600px;
+    display: none;
+  }
   #customer1 img{ /* 中年男 */
     display: none;
   }

game.html

@@ -29,6 +29,9 @@
       </div>
 
       <!-- customers elements -->
+      <div id="dialogueBox" class="dialogueBox">
+        <img src="asset/pic/qinshihuang/DialogueBox.png" alt="对话框">
+      </div>
       <div id="customer1" class="customer">
         <img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
       </div>

js/game.js

@@ -1,11 +1,12 @@
-document.addEventListener("DOMContentLoaded", function() {
-    // Function to show an element
+// Function to show an element
     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() {
@@ -14,6 +15,9 @@ document.addEventListener("DOMContentLoaded", function() {
         showElement(customers[randomIndex]);
     }
 
+    // Show dialogue box
+    showElement("#dialogueBox img");
+
     // Show all dishes
     showElement('#mapo-tofu img');
     showElement('#roast-duck img');