hhl_project/js/alexgame.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 alexes = [
    '#alex img',
    '#alex1 img',
    '#alex2 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 = 'alexwin.html';
                }, 2000);
            
        }else{
            // customer calm down
            hideElement(customers[RandomCustomerIndex][failedTimes]);
            showElement(customers[RandomCustomerIndex][0]);

            // alex safe
            hideElement(alexes[failedTimes])
            showElement(alexes)

            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(alexes[0])
                showElement(alexes[1])
                break;
            case 2:
                hideElement(customers[RandomCustomerIndex][1])
                showElement(customers[RandomCustomerIndex][2])

                break;
            case 3:
                hideElement(alexes[1])
                showElement(alexes[2])
                // Delay for 2 seconds before redirecting
                setTimeout(function() {
                    window.location.href = 'alexlose.html';
                }, 2000);
                // 这里可以添加结束游戏或其他逻辑
                break;
            default:
                console.log("失败次数：" + failedTimes);
        }
    }
}

var failedTimes = 0

// Questions list
var questions = [
        "How was Macedonian dominance in Greece consolidated?",
        "How was the long-standing hostility with the Persian Empire managed?",
        "how to administer and integrate a vast territory?",
        "how to balance the different peoples and cultures in the army?",
        "how to deal with uprisings and rebellions in conquered areas?",
        "How to promote Greek culture and influence?",
        "How to establish an effective administrative system in the newly conquered territories?",
        "How to handle diplomatic relations with other Mediterranean powers?",
        "How to maintain the economic stability and prosperity of the vast empire?",
        "How to ensure royal succession and stability of power?"
    ];

// Answers list
var answers = [
    'lamb',
    'yoghurt',
    'moussaka',
    'salad',
    'lamb',
    'salad',
    'moussaka',
    'cheese',
    'cheese',
    'yoghurt'
]

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 alex
    showElement('#alex 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);
});