简简单单实现一个嘎子偷月饼小游戏

基于Jquery实现一个嘎子偷月饼小游戏，玩家需要躲避牧羊犬的巡视并在规定时间内尽可能多的打中飞起的鸟月饼。 ps:盗窃违法，请勿在现实中模仿，如有模仿，概不负责

游戏实现逻辑

游戏场景是第一人称主视角，我们需要依次实现以下内容：

• 随机方向起飞的月饼
• 定时出现的牧羊犬
• 注册点击事件判断点击坐标是否与月饼发生碰撞

下面我们就依次来实现以上的逻辑

show you the code

• 初始化场景

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhk.best-wallpaper.net%2Fwallpaper%2F2560x1600%2F1707%2FTrees-chamomile-grass-mountains-vector-picture_2560x1600.jpg&refer=http%3A%2F%2Fhk.best-wallpaper.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665190388&t=c0677769c6f8409f2689fb89e10d6c15');
    background-size: cover;
    background-position: bottom center;
    position: relative;
  }

• 初始化变量 包括了全局倒计时定时器，得分，狗的显隐，初始化倒计时等

let flag = false
    let timer = null
    let time = 60
    let countDown = null
    let score = 0

• 生成一只定时巡视的哈士奇，其中，显示时间3s，隐藏时间10s

function dogShow () {
      if (timer) clearTimeout(timer)
      timer = null
      $('.dog').fadeToggle()
      if (flag) {
        timer = setTimeout(dogShow, 3000)
      } else {
        timer = setTimeout(dogShow, 10000)
      }
      flag = !flag
    }

• 生成随机出现的月饼，并更新位置

这里判断了初始化时，left是否大于整个屏幕的一半，大于朝右飞，小于朝左飞。并判断了移除的条件

function initBing () {
      let m = setTimeout(function () {
        clearTimeout(m)
        let div = $('<div>')
        div.addClass('bing')
        $('body').append(div)
        let bLeft = Math.ceil(Math.random()*$('body').width()-40)
        div.css('left', bLeft+ 'px')
        let t = setInterval(function () {
          let bottom = Number(div.css('bottom').split('px')[0]) + Math.ceil(Math.random()*3)
          let left = 0
          if (bLeft > $('body').width() /2) {
            left =  Number(div.css('left').split('px')[0]) + Math.ceil(Math.random()*3)
          } else {
            left =  Number(div.css('left').split('px')[0]) - Math.ceil(Math.random()*3)
          }
          let top = div.css('top').split('px')[0]
          if(top <= 0 || left <=0 || left >= $('body').width()) {
            clearInterval(t)
            t = null
           div.remove()
           initBing()
           return false
          }
          bottom = bottom+'px'
          div.css('bottom',bottom)
          left = left+'px'
          div.css('left',left)
        }, 10)
      }, Math.ceil(Math.random()*5)*500)
    }

• 封装开始游戏的函数，开始倒计时

function start () {
  timer = setTimeout(dogShow, 3000)
  countDown = setInterval(function () {
    if (time <=0) {
      clearInterval(countDown)
      if (timer) clearTimeout(timer)
      time = 0
      timer = null
    }
    time--
    $('.count-down').html(`倒计时:${time}, 得分：${score}`)
  }, 1000)
  initBing()
  initBing()
  initBing()
}

• 核心来了，怎么判断鼠标是否命中月饼呢？

点击事件的事件对象e有一个属性叫做tartget，标识了当前是由谁触发了事件，所以，我们只需要判断tartget是我们的月饼即可， 这里通过flag判断了是否是狗狗巡视期间点中的，如果是，直接结束游戏即可

$('body').click(function (e) {
  if ($(e.target).hasClass('bing')) {
    if (!flag) {
      score++
      $(e.target).remove()
       initBing()
    } else {
      clearInterval(countDown)
      if (timer) clearTimeout(timer)
      time = 0
      timer = null
      $('.count-down').html('你被发现了！')
      $('.count-down').addClass('error')
    }
  }
})

欢迎试玩儿~