hhl_project/js/qinshihuanggame.js

// 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 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 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 = 'qinshihuangwin.html';
                }, 2000);
            
        }else{
            // customer calm down
            hideElement(customers[RandomCustomerIndex][failedTimes]);
            failedTimes = 0;
            showElement(customers[RandomCustomerIndex][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])
                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 = 'qinshihuanglose.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('#mapo-tofu img');
    showElement('#roast-duck img');
    showElement('#yangzhou-fried-rice img');
    showElement('#braised-prawns img');
    showElement('#kung-pao-chicken img');

    // Show a random customer
    showElement(customers[RandomCustomerIndex][0]);

    // 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;
    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 动画时间相同
}

// 点击页面播放bgm
document.addEventListener('click', function play() {
    document.getElementById('bgm').play();
    document.removeEventListener('click', play);
});