卡牌游戏点击次数限制问题：点击X次后游戏无法终止

核心问题分析 #

1. 未正确切换游戏结束状态：在clickCounter的case 2分支里，你只是写了isGameOver;，这只是读取变量值，并没有将其设为true，导致游戏结束状态从未生效。
2. 函数调用拼写错误：第二张卡牌的点击事件里调用的是cardCounter()，但你的计数函数实际是clickCounter()，这会导致第二张卡牌的点击不会正确累加计数。
3. 事件绑定逻辑缺陷：cardSelection里的if(!isGameOver)只在初始化时执行一次，所有卡牌的点击事件会被提前绑定完成。后续即使isGameOver变为true，已经绑定的事件依然会响应点击。

修复后的代码 #

let isGameOver = false;
let counter = 0;
// 假设scoreCount和scoreDisplay是已定义的变量
let scoreCount = 0;
const scoreDisplay = document.querySelector('#scoreDisplay');

const clickCounter = function () {
    switch (counter) {
        case 0:
        case 1:
            counter += 1;
            break;
        case 2:
            isGameOver = true; // 正确设置游戏结束状态
            // 游戏结束时禁用所有卡牌的点击
            document.querySelectorAll('[id^="card"]').forEach(card => {
                card.style.pointerEvents = 'none';
            });
            break;  
    }
    console.log(`counter equals: ${counter}`);
}

const cardSelection = function () {             
    randomNumber(); // 假设这是已实现的随机数生成函数

    // CARD ONE
    document.querySelector('#cardOne').addEventListener('click', function (e) {
        // 点击前先判断游戏是否已结束
        if (isGameOver) return;
        
        cardOneFront();
        clickCounter();
        if (randomNums[0]) {
            scoreDisplay.innerText = `SCORE: ${scoreCount += randomNums[0]}`;
            console.log(`score just added: ${randomNums[0]}`);
        }
        this.style.pointerEvents = 'none';
    });

    // CARD TWO
    document.querySelector('#cardTwo').addEventListener('click', function () {
        // 点击前先判断游戏是否已结束
        if (isGameOver) return;
        
        cardTwoFront();
        clickCounter(); // 修正拼写错误
        if (randomNums[1]) {
            scoreDisplay.innerText = `SCORE: ${scoreCount += randomNums[1]}`;
            console.log(`score just added: ${randomNums[1]}`);  
        }
        this.style.pointerEvents = 'none';
    });
}

cardSelection();

额外优化建议 #

• 给所有卡牌统一添加一个类名（比如game-card），这样在游戏结束时可以通过document.querySelectorAll('.game-card')快速选中所有卡牌，避免逐个处理ID。
• 将最大点击次数设为一个变量（比如const MAX_CLICKS = 2），后续修改次数时只需调整这个变量，不用修改switch分支。

内容的提问来源于stack exchange，提问作者Rai Taylor