jquery中秋版打地鼠月饼！

新活动又来了呀，存货空空的我不禁望兜兴叹，看来只能是水一水游戏复刻系列来维持下生活了。。以下是正文部分

游戏逻辑

打地鼠还是很简单的，随机出现地鼠或炸弹，点地鼠加分，点炸弹减分，有时间限制。那其实我们就是初始化一个地面。加固定数量的点位，然后循环调用随机在某些点位生成地鼠或炸弹即可，循环间隔3s，来让人有时间反应过来打地鼠。倒计时结束游戏结束，或者是血扣光了游戏结束。

规则

初始化血条是5滴，点五仁月饼加分，点豆沙月饼减血， 倒计时为1分钟。

具体实现

• 实现网格和点位

• 给点位添加坐标值，方便我们根据坐标值设置背景图（地鼠or炸弹） 之前写过一个连连看初始化的代码，因为逻辑一致，所以直接搬过来，处理下绑定的值和生成逻辑即可

let level = 1
let arr = []
function initDiShu() {
  $('#box').empty()
  arr = []
  for (let i = 0; i < 100*level; i++) {
    let x = i
    arr.push({ x })
  }
  arr.map(v => {
    let div = $('<div>')
      div.addClass('item')
      div.css('width', Math.sqrt((800*800)/(100*level)) + 'px')
      div.css('height', Math.sqrt((800*800)/(100*level)) + 'px')
      div.attr('x', v.x)
    $('#box').append(div)
  })

}
initDiShu()

• 声明 血条变量，倒计时变量，分数变量

let hp = 5
let timer = null
let t = 60
let score = 0

• 写一个轮询的方法，更新地鼠or炸弹的坐标,在轮询里判断倒计时的结束。

timer = setInterval(function () {
    if (t<= 0) {
      clearInterval(timer)
    }
    $('#box div').removeClass('wuren')
    $('#box div').removeClass('dousha')
    t -= 3
    let map = {}
    for (let i =0;i<3;i++) {
      let x = Math.floor(Math.random()*100)
      while (map[x]) {
        x = Math.floor(Math.random()*100)
      }
      map[x] = true
    }
    for (let i in map) {
      $(($('#box div').get(i))).addClass(Math.random()>0.5?'wuren':'dousha')
    }
  }, 3000)

}

• 通过事件代理的方式，给点位添加事件，点击后判断是地鼠还是炸弹，地鼠加分，炸弹减命,在点击事件里判断血条清空的结束

 $('#box div').click(function () {
    if($(this).hasClass('wuren')) {
      $(this).removeClass('wuren')
      score++
    }
    if($(this).hasClass('dousha')) {
      $(this).removeClass('dousha')
      hp--
      if (hp <= 0) {
        clearInterval(timer)
      }
    }
  })