图片点击逻辑异常：匹配游戏错误点击未触发Game Over

我开发了一款匹配游戏，规则是点击左侧区域里右侧没有的那张图片就能进入下一关。但现在的问题是：点击左侧任意图片都会直接进入下一关，只有点击空白区域才会触发Game Over提示，点错图片时完全没反应，求解决办法。

现有代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Matching Game</title>
    <style>
      img {
        position: absolute;
     }  
     div {
       position: absolute;
       width: 500px;
       height: 500px;
     }
     #rightSide {
       left: 500px;
       border-left: 1px solid;
     }
   </style>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>

<div id="leftSide"></div>
<div id="rightSide"></div>

<script >
    let numberOfFaces = 5;
    const theLeftSide = document.querySelector("#leftSide");
    const theRightSide = document.querySelector("#rightSide");

    function generateFaces() {
        for (let i = 0; i < numberOfFaces; i++) {
            let face = document.createElement("img");
            face.src = 'images/smile.png';

            const randomTop = Math.floor(Math.random() * 400) + 1;
            const randomLeft = Math.floor(Math.random() * 400) + 1;

            face.style.top = randomTop + 'px';
            face.style.left = randomLeft + 'px';

            theLeftSide.appendChild(face);

            theLeftSide.lastChild.addEventListener('click', nextLevel);
            document.body.addEventListener('click', gameOver);
        }   

        const leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages); 
        
    function nextLevel(event) {
        event.stopPropagation();
        numberOfFaces += 5;

        while (theLeftSide.firstChild) {
            theLeftSide.removeChild(theLeftSide.firstChild);
        }

        while (theRightSide.firstChild) {
            theRightSide.removeChild(theRightSide.firstChild);
        }
        
        generateFaces();
    }

    function gameOver() {
        alert('Game Over!');
        document.body.removeEventListener('click', gameOver);
        theLeftSide.lastChild.removeEventListener('click', nextLevel);
    }
    
    } 
</script>
</body>
</html>

问题分析与修复方案 #

核心问题

1. 所有左侧图片都绑定了通关事件：循环里给每一张新增的图片都绑定了nextLevel，导致点任何图都能进下一关，完全没区分出那额外的一张。
2. 重复绑定body点击事件：每次循环都给document.body加一次gameOver监听，会导致多次触发，逻辑混乱。
3. 错误点击图片未触发Game Over：只有空白区域的点击会冒泡到body触发gameOver，但点错的图片没有绑定gameOver事件，也没让事件冒泡。

修复步骤

1. 区分绑定事件：只给左侧最后一张（右侧没有的那张）图片绑定nextLevel，其他图片绑定gameOver。
2. 移走body事件绑定：把document.body.addEventListener('click', gameOver)移到循环外面，避免重复绑定。
3. 调整事件移除逻辑：避免DOM元素被删除后引发的报错。

修改后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Matching Game</title>
    <style>
      img {
        position: absolute;
     }  
     div {
       position: absolute;
       width: 500px;
       height: 500px;
     }
     #rightSide {
       left: 500px;
       border-left: 1px solid;
     }
   </style>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>

<div id="leftSide"></div>
<div id="rightSide"></div>

<script >
    let numberOfFaces = 5;
    const theLeftSide = document.querySelector("#leftSide");
    const theRightSide = document.querySelector("#rightSide");

    function generateFaces() {
        // 仅绑定一次body的gameOver事件
        document.body.addEventListener('click', gameOver);
        
        for (let i = 0; i < numberOfFaces; i++) {
            let face = document.createElement("img");
            face.src = 'images/smile.png';

            const randomTop = Math.floor(Math.random() * 400) + 1;
            const randomLeft = Math.floor(Math.random() * 400) + 1;

            face.style.top = randomTop + 'px';
            face.style.left = randomLeft + 'px';

            theLeftSide.appendChild(face);

            // 最后一张图绑定通关事件，其余绑定失败事件
            if (i === numberOfFaces - 1) {
                face.addEventListener('click', nextLevel);
            } else {
                face.addEventListener('click', gameOver);
            }
        }   

        const leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages); 
        
    function nextLevel(event) {
        event.stopPropagation();
        // 移除当前body的gameOver监听，避免下一轮重复绑定
        document.body.removeEventListener('click', gameOver);
        
        numberOfFaces += 5;

        while (theLeftSide.firstChild) {
            theLeftSide.removeChild(theLeftSide.firstChild);
        }

        while (theRightSide.firstChild) {
            theRightSide.removeChild(theRightSide.firstChild);
        }
        
        generateFaces();
    }

    function gameOver(event) {
        alert('Game Over!');
        // 移除所有相关监听
        document.body.removeEventListener('click', gameOver);
        // 清空左右区域，避免后续操作报错
        while (theLeftSide.firstChild) {
            theLeftSide.removeChild(theLeftSide.firstChild);
        }
        while (theRightSide.firstChild) {
            theRightSide.removeChild(theRightSide.firstChild);
        }
    }
    
    } 
</script>
</body>
</html>

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