人脸匹配游戏点击last child触发modal及添加重启按钮实现咨询

核心修改点 #

1. 实现无按钮触发modal #

原代码中modal仅绑定了外置Restart按钮的点击触发，我们直接在gameOver函数执行时主动显示modal，无需额外点击按钮。如果需要点击last child（左侧额外人脸）时弹出modal，可直接在nextLevel函数中添加modal显示代码即可。

2. modal内添加重置按钮实现无需刷新重启游戏 #

• 在modal的内容区域新增重启按钮
• 新增restartGame函数重置游戏所有状态
• 修复原代码中close元素获取错误、动态得分拼接错误、样式属性写错等已知bug

完整修改后代码 #

<!DOCTYPE html>
<html>
<head>
<title>Matching Game</title>
    <style>
        img{
            position: absolute;
        }
        div {
            position: absolute;
            width: 500px;
            height: 500px;
        }
        #rightSide {
            left: 500px;
            border-left: 1px solid;
        }
        alert{
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-weight: bold;
            color: darkred;
            background-size:400px;
        }
        h1{
            font-family: Verdana;
        }
        title{
            margin:auto;
            padding:auto;
            border:rgb(11, 158, 11) solid 3px;
            background-position:center;
        }
        html{
            border-radius: 10px;
            border-style:stripes;
        }
        .modal{
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(112, 9, 9);
            background-color:rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #0a76f1;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid rgb(182, 22, 161);
            width: 80%;
        }
        .close {
            color: rgb(73, 73, 35);
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: burlywood;
            text-decoration: none;
            cursor: pointer;
        }
        #restartBtn {
            padding: 8px 16px;
            background: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body onload='generateFaces()'>
  <h1>Matching Game</h1>
  <p>Click on the extra face on the left.<p>
  <div id='leftSide'></div>
  <div id='rightSide'></div>
  <div id='myModal' class='modal'>
  <div class='modal-content'>
    <span class='close'>&times;</span>
    <p id="modalText"></p>
    <button id="restartBtn">重新开始游戏</button>
  </div>
  </div>
  <script>
      let numberOfFaces = 5;
      const theLeftSide= document.getElementById('leftSide');
      const theRightSide= document.getElementById('rightSide');
      const modal = document.getElementById('myModal');
      const closeBtn = document.getElementsByClassName('close')[0];
      const restartBtn = document.getElementById('restartBtn');
      const modalText = document.getElementById('modalText');
      let num = 0;

      // 绑定modal通用交互事件
      closeBtn.onclick = function() {
          modal.style.display = 'none';
      }
      window.onclick = function(event) {
          if (event.target == modal) {
              modal.style.display = 'none';
          }
      }
      restartBtn.onclick = restartGame;

      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);
      }

      function nextLevel(event) {
          event.stopPropagation();
          num = num + 1;
          numberOfFaces += 5;
          while (theLeftSide.lastChild) {
              theLeftSide.removeChild(theLeftSide.lastChild);
          }
          while (theRightSide.lastChild){
              theRightSide.removeChild(theRightSide.lastChild);
          }
          generateFaces();
      }

      function gameOver() {
          // 游戏结束直接弹出modal，无需点击外置按钮
          modalText.innerText = `GaMe OvEr! 你的得分：${num}！\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.`
          modal.style.display = 'block';
          document.body.removeEventListener('click', gameOver);
          theLeftSide.lastChild.removeEventListener('click', nextLevel);
      }

      // 游戏重置函数
      function restartGame() {
          num = 0;
          numberOfFaces = 5;
          while (theLeftSide.lastChild) {
              theLeftSide.removeChild(theLeftSide.lastChild);
          }
          while (theRightSide.lastChild){
              theRightSide.removeChild(theRightSide.lastChild);
          }
          modal.style.display = 'none';
          generateFaces();
      }
  </script>
</body>
</html>

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