feat: finish game

css/game.css

@@ -78,7 +78,27 @@
     text-align: center; /* 水平居中 */
     
   }
-  #
+  #hint {
+    position: absolute;
+    
+    width: 50px;
+    height: 50px;
+    top: 350px;
+    left: 1100px;
+    
+  }
+#hint img{
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    z-index: 5;
+    display: none;
+  }
+  #hintpage img{
+    position: absolute;
+    z-index: 5;
+    display: none;
+  }
   #customer1 img{ /* 中年男 */
     display: none;
   }

game.html

@@ -34,13 +34,14 @@
         <div id="dialogueText" class="dialogueText">
 
         </div>
+
+      </div>
       <div id="hint" class="hint">
-<img src="asset/pic/qinshihuang/hint_buttom.png" alt="提示">
-<div id="hintpage" class="hintpage"></div>
+        <img src="asset/pic/qinshihuang/hint_bottom.png" alt="提示按钮" onclick="handleHint('bottom');">
       </div>
-        
+      <div id="hintpage" class="hintpage">
+          <img src="asset/pic/qinshihuang/hint_page.png" alt="提示" onclick="handleHint('page');">
         </div>
-
       <div id="customer1" class="customer">
         <img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
       </div>
@@ -71,19 +72,24 @@
 
       <!-- foods elements -->
       <div id="mapo-tofu" class="dish">
-        <img src="asset/pic/qinshihuang/MapoTofu_FinishedDish.png" alt="麻婆豆腐" onclick="handleClick('mapo');">
+        <img src="asset/pic/qinshihuang/MapoTofu_FinishedDish.png" alt="麻婆豆腐"
+          onclick="handleClick('mapo');">
       </div>
       <div id="roast-duck" class="dish">
-        <img src="asset/pic/qinshihuang/roast_duck.png" alt="烤鸭" onclick="handleClick('roast_duck');">
+        <img src="asset/pic/qinshihuang/roast_duck.png" alt="烤鸭"
+          onclick="handleClick('roast_duck');">
       </div>
       <div id="yangzhou-fried-rice" class="dish">
-        <img src="asset/pic/qinshihuang/YangzhouFriedRice.png" alt="扬州炒饭" onclick="handleClick('Yangzhou');">
+        <img src="asset/pic/qinshihuang/YangzhouFriedRice.png" alt="扬州炒饭"
+          onclick="handleClick('Yangzhou');">
       </div>
       <div id="braised-prawns" class="dish">
-        <img src="asset/pic/qinshihuang/BraisedPrawns.png" alt="油焖大虾" onclick="handleClick('Prawns');">
+        <img src="asset/pic/qinshihuang/BraisedPrawns.png" alt="油焖大虾"
+          onclick="handleClick('Prawns');">
       </div>
       <div id="kung-pao-chicken" class="dish">
-        <img src="asset/pic/qinshihuang/KungPaoChicken.png" alt="宫保鸡丁" onclick="handleClick('Chicken');">
+        <img src="asset/pic/qinshihuang/KungPaoChicken.png" alt="宫保鸡丁"
+          onclick="handleClick('Chicken');">
       </div>
     </div>
 

js/game.js

@@ -35,6 +35,19 @@ function checkAnswer(dishName){
     return answer == dishName
 }
 
+function handleHint(hint) {
+    console.log(hint + " 被点击了!");
+    if (hint == "bottom") {
+        hideElement("#hint img")
+        showElement("#hintpage img")
+    }
+    if (hint == "page") {
+        hideElement("#hintpage img")
+        showElement("#hint img")
+    }
+    
+}
+
 function handleClick(dishName) {
     console.log(dishName + " 被点击了!");
     if (checkAnswer(dishName)){
@@ -150,6 +163,9 @@ document.addEventListener("DOMContentLoaded", function() {
     // Show normal Qin Shi Huang
     showElement('#qinshihuang img');
 
+    // Show hint bottom
+    showElement('#hint img')
+
     // Show first question
     var randomQuestion = questions[QAlist[currentIndex]];
     document.getElementById("dialogueText").innerHTML = randomQuestion;

lose.html

@@ -8,7 +8,7 @@
         body {
             text-align: center;
             padding-top: 50px;
-            background-image: url("asset/pic/lose.jpg");
+            background-image: url("asset/pic/lose.png");
             background-repeat: no-repeat;
         }
         .btn {
@@ -19,6 +19,8 @@
             color: white;
             text-decoration: none;
             border-radius: 5px;
+            top: 350px;
+            left: 825px;
         }
         h1 {
             position: absolute;

win.html

@@ -19,6 +19,8 @@
             color: white;
             text-decoration: none;
             border-radius: 5px;
+            top: 350px;
+            left: 825px;
         }
         h1 {
             position: absolute;