打地鼠游戏--- highlight: a11y-dark --- ```js 1. 获取相关元素 1.1 开始按钮 1

1. 获取相关元素
1.1 开始按钮
1.2 分数框
1.3 所有的地鼠洞
2. 给开始按钮定义函数startGame
2.1 隐藏开始按钮
2.2 清除分数为0: 允许多次玩
2.3 开启定时器: 间隔时间自定义
2.3.1 获取随机整数: 0-地鼠洞长度之间
2.3.2 给随机数对应的地鼠洞添加up类(显示地鼠)
2.3.3 给当前地鼠洞增加一个延时器: 到时自动清除up类(隐藏地鼠)
3. 给所有的地鼠(mole)增加点击事件
3.1 获取所有的地鼠
3.2 给所有的地鼠绑定点击事件
3.3 干掉地鼠对应的洞的类up
3.4 增加分数的数量
3.5 清理地鼠所在洞本身的延时器


<body>

  <h1>Whack-a-mole! <span class="score">0</span></h1>
  <p><button>Start</button></p>

  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>

  <h2 class="game-status"></h2>

  <script>
    //入口函数
    window.addEventListener('load', function () {

      //获取元素
      let Start = document.querySelector('button')  //开始按钮
      let moles = document.querySelectorAll('.mole')  //地鼠
      let score = document.querySelector('.score')  //单击地鼠的数量（成绩）

      //给开始按钮绑定事件
      Start.addEventListener('click', function () {
        //细节：单击开始按钮后让按钮隐藏
        Start.style.display = 'none'

        //声明一个单击地鼠的数量
        let total = 0

        let tid  //延时器的全局作用域

        let flag = true //节流  单击地鼠到底要不要响应处理（防止连续点击），true表示应该处理

        let timeId = setInterval(function () { //定时器每隔一秒出现一只地鼠
          flag = true  //由于下面点完一次便不再响应，所以第二只地鼠出现的时候要重复赋值true，让其重新响应
          //1.声明一个随机数,让地鼠随机出现，修改moles元素的top样式为0%
          let num = parseInt(Math.random() * moles.length)
          moles[num].style.top = '0%'

          //2.创建一个延时器，在指定时间内，如果用户没有单击地鼠，则地鼠自动消失
          tid = setTimeout(function () {
            moles[num].style.top = '70%'
          }, 1000)

        }, 1000)

        //地鼠的单击事件  不能放到定时器里面，不然会出现点一下加好多分的情况
        moles.forEach(function (v, i) { //遍历
          v.addEventListener('click', function () {
            if (flag == true) {
              flag = false  //点完一次后让其变为false不再响应点击按钮 只有效点击了一次
              total++  //点一下加一个 分数+1
              score.innerHTML = total

              //让当前被点击的地鼠消失
              v.style.top = '70%'
              //单击之后让延时器清除
              clearTimeout(tid)
            }

          })
        })

        //添加一个延时器，设置游戏总时长
        setTimeout(function () {
          clearInterval(timeId)  //11秒之后移除定时器
          Start.style.display = 'block'
        }, 11000)
      })

    })

  </script>
</body>