feat: finish qinshihuang game

game.html

@@ -66,19 +66,19 @@
 
       <!-- foods elements -->
       <div id="mapo-tofu" class="dish">
-        <img src="asset/pic/qinshihuang/MapoTofu_FinishedDish.png" alt="麻婆豆腐">
+        <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="烤鸭">
+        <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="扬州炒饭">
+        <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="油焖大虾">
+        <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="宫保鸡丁">
+        <img src="asset/pic/qinshihuang/KungPaoChicken.png" alt="宫保鸡丁" onclick="handleClick('Chicken');">
       </div>
     </div>
 

js/game.js

@@ -6,13 +6,83 @@ function showElement(selector) {
     }
 }
 
-// Function to randomly select a customer
+// Function to hide an element
-function showRandomCustomer() {
+function hideElement(selector){
-    const customers = ['#customer1 img', '#customer2 img', '#customer3 img'];
+    const element = document.querySelector(selector);
-    const randomIndex = Math.floor(Math.random() * customers.length);
+    if (element) {
-    showElement(customers[randomIndex]);
+        element.style.display = 'none';
+    }
 }
 
+const customers = [
+    ["#customer1 img", "#customer1-2 img", "#customer1-3 img"],
+    ["#customer2 img", "#customer2-2 img", "#customer2-3 img"],
+    ["#customer3 img", "#customer3-2 img", "#customer3-3 img"],
+]
+
+const RandomCustomerIndex = Math.floor(Math.random() * customers.length);
+
+const qinshihuangs = [
+    '#qinshihuang1 img',
+    '#qinshihuang2 img',
+    '#qinshihuang3 img'
+]
+
+const RandomQinShiHuangIndex = Math.floor(Math.random() * qinshihuangs.length);
+
+function checkAnswer(dishName){
+    var answer = answers[QAlist[currentIndex]]
+    return answer == dishName
+}
+
+function handleClick(dishName) {
+    console.log(dishName + " 被点击了!");
+    if (checkAnswer(dishName)){
+        // 正确答案的处理逻辑
+        console.log("恭喜，你选对了！");
+        if (currentIndex == 9){
+            setTimeout(function() {
+                    window.location.href = 'gameover.html';
+                }, 2000);
+            
+        }else{
+            currentIndex = currentIndex + 1
+            var nextQuestion = questions[QAlist[currentIndex]];
+            document.getElementById("dialogueText").innerHTML = nextQuestion;
+            console.log(answers[QAlist[currentIndex]]);
+        }
+        
+    } else {
+        // 错误答案的处理逻辑
+        console.log("不幸，这不是正确答案。");
+        failedTimes = failedTimes + 1
+        switch (failedTimes) {
+            case 1:
+                hideElement(customers[RandomCustomerIndex][0])
+                showElement(customers[RandomCustomerIndex][1])
+                break;
+            case 2:
+                hideElement(customers[RandomCustomerIndex][1])
+                showElement(customers[RandomCustomerIndex][2])
+                break;
+            case 3:
+                hideElement('#qinshihuang img')
+                showElement(qinshihuangs[RandomQinShiHuangIndex])
+                // Delay for 2 seconds before redirecting
+                setTimeout(function() {
+                    window.location.href = 'gameover.html';
+                }, 2000);
+                // 这里可以添加结束游戏或其他逻辑
+                break;
+            default:
+                console.log("失败次数：" + failedTimes);
+    }
+}
+}
+
+var failedTimes = 0
+
+// Questions list
 var questions = [
         "如何建立统一的度量衡体系以加强中央集权？",
         "如何制定合理的税收政策来增强国库？",
@@ -25,9 +95,39 @@ var questions = [
         "如何建立和维护一个有效的道路交通网络？",
         "如何处理与周边国家的外交关系？"
     ];
-document.addEventListener("DOMContentLoaded", function() {
-    
 
+// Answers list
+var answers = [
+    'roast_duck',
+    'mapo',
+    'Yangzhou',
+    'Chicken',
+    'roast_duck',
+    'Yangzhou',
+    'mapo',
+    'mapo',
+    'Prawns',
+    'Yangzhou'
+]
+
+var QAlist = Array.from(Array(questions.length).keys());
+
+// Fisher-Yates 洗牌算法
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]]; // 交换元素
+    }
+}
+
+// 打乱问题数组
+shuffleArray(QAlist);
+
+// 当前问题索引
+var currentIndex = 0;
+
+// Execute on all DOM loaded
+document.addEventListener("DOMContentLoaded", function() {
     // Show dialogue box
     showElement("#dialogueBox img");
 
@@ -39,12 +139,13 @@ document.addEventListener("DOMContentLoaded", function() {
     showElement('#kung-pao-chicken img');
 
     // Show a random customer
-    showRandomCustomer();
+    showElement(customers[RandomCustomerIndex][0]);
 
     // Show normal Qin Shi Huang
     showElement('#qinshihuang img');
 
-    // Show random question
+    // Show first question
-    var randomQuestion = questions[Math.floor(Math.random() * questions.length)];
+    var randomQuestion = questions[QAlist[currentIndex]];
     document.getElementById("dialogueText").innerHTML = randomQuestion;
+    console.log(answers[QAlist[currentIndex]]);
 });