feat: update louis

js/louisgame.js

@@ -0,0 +1,195 @@
+// Function to show an element
+function showElement(selector) {
+    const element = document.querySelector(selector);
+    if (element) {
+        element.style.display = 'block';
+    }
+}
+
+// Function to hide an element
+function hideElement(selector){
+    const element = document.querySelector(selector);
+    if (element) {
+        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 louises = [
+    '#louis img',
+    '#louis1 img',
+    '#louis2 img'
+]
+
+function checkAnswer(dishName){
+    var answer = answers[QAlist[currentIndex]]
+    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)){
+        // 正确答案的处理逻辑
+        console.log("恭喜，你选对了！");
+        if (currentIndex == 9){
+            setTimeout(function() {
+                    window.location.href = 'louiswin.html';
+                }, 2000);
+            
+        }else{
+            // customer calm down
+            hideElement(customers[RandomCustomerIndex][failedTimes]);
+            showElement(customers[RandomCustomerIndex][0]);
+
+            // louis safe
+            hideElement(louises[failedTimes])
+            showElement(louises)
+
+            failedTimes = 0;
+
+            // display next question
+            currentIndex = currentIndex + 1
+            var nextQuestion = questions[QAlist[currentIndex]];
+            document.getElementById("dialogueText").innerHTML = nextQuestion;
+            console.log(answers[QAlist[currentIndex]]);
+        }
+        
+    } else {
+        // 错误答案的处理逻辑
+        console.log("不幸，这不是正确答案。");
+        addShakeEffect()
+        failedTimes = failedTimes + 1;
+        switch (failedTimes) {
+            case 1:
+                hideElement(customers[RandomCustomerIndex][0])
+                showElement(customers[RandomCustomerIndex][1])
+
+                hideElement(louises[0])
+                showElement(louises[1])
+                break;
+            case 2:
+                hideElement(customers[RandomCustomerIndex][1])
+                showElement(customers[RandomCustomerIndex][2])
+
+                break;
+            case 3:
+                hideElement(louises[1])
+                showElement(louises[2])
+                // Delay for 2 seconds before redirecting
+                setTimeout(function() {
+                    window.location.href = 'louislose.html';
+                }, 2000);
+                // 这里可以添加结束游戏或其他逻辑
+                break;
+            default:
+                console.log("失败次数：" + failedTimes);
+        }
+    }
+}
+
+var failedTimes = 0
+
+// Questions list
+var questions = [
+        "How to establish a unified system of metrics to strengthen centralised power?",
+        "How to formulate a reasonable tax policy to strengthen the national treasury?",
+        "How to organise and mobilise resources for the construction of the Great Wall to defend against foreign enemies?",
+        "How to enforce the policy of prohibiting private ownership of weapons?",
+        "How to promote a uniform writing system to strengthen cultural unity?",
+        "How to recruit soldiers wisely and keep the army running efficiently?",
+        "How to deal with political dissent arising from different ideas?",
+        "How to strengthen the centralised power system of the emperor?",
+        "How to establish and maintain an effective road transport network?",
+        "How to handle diplomatic relations with neighbouring countries?"
+    ];
+
+// 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");
+
+    // Show all dishes
+    showElement('#champagne img');
+    showElement('#cheese img');
+    showElement('#crepe img');
+    showElement('#foie-gras img');
+    showElement('#onion-soup img');
+
+    // Show a random customer
+    showElement(customers[RandomCustomerIndex][0]);
+
+    // Show normal louis
+    showElement('#louis img');
+
+    // Show hint bottom
+    showElement('#hint img')
+
+    // Show first question
+    var randomQuestion = questions[QAlist[currentIndex]];
+    document.getElementById("dialogueText").innerHTML = randomQuestion;
+    console.log(answers[QAlist[currentIndex]]);
+});
+
+// 为所有元素添加抖动效果
+function addShakeEffect() {
+    const allElements = document.querySelectorAll('body *'); // 选择页面上的所有元素
+    allElements.forEach(el => {
+        el.classList.add('shake-animation');
+    });
+    // 设置定时器以在动画完成后移除抖动效果
+    setTimeout(() => {
+        allElements.forEach(el => {
+            el.classList.remove('shake-animation');
+        });
+    }, 800); // 与 CSS 动画时间相同
+}