hhl_project/js/nixongame.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 nixones = [
    '#nixon img',
    '#nixon1 img',
    '#nixon2 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 = 'nixonwin.html';
                }, 2000);
            
        }else{
            // customer calm down
            hideElement(customers[RandomCustomerIndex][failedTimes]);
            showElement(customers[RandomCustomerIndex][0]);

            // nixon safe
            hideElement(nixones[failedTimes])
            showElement(nixones)

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

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

var failedTimes = 0

// Questions list
var questions = [
        "How can we ensure transparency and integrity in government?",
        "How can we end the Vietnam War and ensure that needless diplomatic conflicts and wars are avoided in the future?",
        "how can we improve relations with China and foster better diplomatic and trade cooperation based on respect for differences?",
        "how should we manage tensions with the Soviet Union?",
        "what should we do in the face of ongoing conflict and oil crises in the Middle East?",
        "how will we respond to growing environmental problems?",
        "In the face of recession and inflation, how will our economic policies be adjusted to restore and maintain economic stability?",
        "how will the government respond to citizens' concerns about war and equal rights?",
        "how can we promote nuclear weapons control and reduce nuclear threats globally?",
        "how will government ensure the proper use of power, abide by the Constitution, and protect the freedoms and rights of its citizens?"
    ];

// Answers list
var answers = [
    'ham',
    'hotdog',
    'applepie',
    'frychicken',
    'jiangbing',
    'ham',
    'hotdog',
    'applepie',
    'frychicken',
    'jianbing'
]

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