人脸匹配游戏last child节点点击计数实现及代码放置位置咨询

1. 左侧额外人脸点击计数器实现 #

你只需要新增1个全局计数变量即可完成统计：

• 全局作用域声明计数变量correctClicks，初始值设为0
• 因为左侧区域的lastChild就是每轮需要点击的额外人脸，它的点击事件已经绑定到nextLevel回调，只有正确点击才会触发该函数，所以直接在nextLevel函数中做correctClicks的累加即可，不需要额外绑定事件。

2. 计数逻辑放置位置说明 #

不需要单独封装新函数：

• 计数累加逻辑直接放在nextLevel内即可，该函数本身就是正确点击的专属回调，不会被其他操作触发，逻辑更内聚，维护成本更低
• 计数展示逻辑放在gameOver函数内，直接在alert弹窗中拼接correctClicks变量的值即可

可直接运行的修改后完整代码 #

<body onload='generateFaces()'>
  <h1>匹配游戏</h1>
  <p>点击左侧多出的那张脸</p>
  <div id='leftSide'></div>
  <div id='rightSide'></div>
  <script>
      let numberOfFaces = 5;
      // 新增正确点击计数变量
      let correctClicks = 0;
      const theLeftSide= document.getElementById('leftSide');
      const theRightSide= document.getElementById('rightSide');
  

      function generateFaces(){
          for (let i=0; i < numberOfFaces; i++) {
            const face= document.createElement('img');
            face.src= 'image/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);
          }

          const leftSideImages = theLeftSide.cloneNode(true);
          leftSideImages.removeChild(leftSideImages.lastChild);
          theRightSide.appendChild(leftSideImages);
          theLeftSide.lastChild.addEventListener('click', nextLevel);
          document.body.addEventListener('click', gameOver);
      }

      // 补充event参数避免部分浏览器兼容性问题
      function nextLevel(event) {
          event.stopPropagation();
          // 正确点击，计数+1
          correctClicks++;
          numberOfFaces += 5;
          while (theLeftSide.lastChild) {
              theLeftSide.removeChild(theLeftSide.lastChild);
          }
          while (theRightSide.lastChild){
              theRightSide.removeChild(theRightSide.lastChild);
          }
          generateFaces();
      }

      function gameOver() {
          // 弹窗展示正确点击次数
          alert(`游戏结束！\n你一共正确点击了${correctClicks}次\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum.`);
          document.body.removeEventListener('click', gameOver);
          theLeftSide.lastChild.removeEventListener('click', nextLevel);
      }
  </script>
</body>

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