接呀接呀接月饼小游戏

在正文的第一句加入“我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”

游戏玩法

通过左右箭头控制我们的凤凰移动，接天上随机掉落的月饼，不设置退出机制，理论上可以无限续杯去玩

游戏核心逻辑

• 通过监听document.body的keydown事件，通过动态变化left值实现左右移动
• 随机生成月饼的left值，并且通过interval来动态更新top值，实现下落
• 判断left值大于body 的高度则消失，并自动创建新的月饼
• 判断如果top值在某个区间以下，判断与凤凰的碰撞关系，发生碰撞，移除月饼加分

实现

• 老惯例，背景图是一张中秋主题的图片，这一次我们直接加在body上

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('https://v.livekong.com/2b02862099d549399d2108f193b96282/snapshots/5615374464f746c9aae00adf9212050d-00005.jpg?x-oss-process=imagequality,q_15resize,m_fill,w_285,h_180');
    background-size: cover;
    position: relative;
  }

• 生成我们的凤凰 这里叫car完全是个人爱好

<div id="car"></div>
#car{
    width: 128px;
    height: 128px;
    background-image: url('https://p3.itc.cn/q_70/images03/20220604/f79970b30f0a412694dfa775e15f0030.gif');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 40px;
    left: 0;
    border-radius: 20px;
    transform: rotateZ(180deg);
  }

• 实现监听按键，让凤凰左右移动

let timer = null
$(document).on('keydown', function (e) {
  if (timer) {
    clearInterval(timer)
  }
  if(e.key === 'ArrowRight') {
    timer = setInterval(function () {
      let left = Number($('#car').css('left').split('px')[0])
      left+=5
      if(left > $('body').width() - 128) {
        left = $('#box').height() - 128
        clearInterval(timer)
      }
      left = left+'px'
      $('#car').css('left',left)
    }, 10)
  } else if (e.key === 'ArrowLeft') {
    timer = setInterval(function () {
      let left = Number($('#car').css('left').split('px')[0])
      left-=5
      if(left <=0) {
        left = 0
        clearInterval(timer)
      }
      left = left+'px'
      $('#car').css('left',left)

    }, 10)
  }
})

• 动态生成月饼， 并随机赋予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 top = Number(div.css('top').split('px')[0]) + 3
          let bottom = div.css('bottom').split('px')[0]
          let left = $('#car').css('left').split('px')[0]
          // 判断是否发生碰撞，发生碰撞则加分
          if (bottom < 130 && bLeft>left && bLeft < left+128) {
            score++
            $('.score').html(score)
            clearInterval(t)
            t = null
            div.remove()
            initBing()
            return false
          }
          // 判断是否到达底部，到达底部移除dom
          if(top > $('body').height()-60) {
            clearInterval(t)
            t = null
           div.remove()
           initBing()
           return false
          }
          top = top+'px'
          div.css('top',top)
        }, 10)
      }, Math.ceil(Math.random()*5)*500)
    }
    function start () {
      initBing()
      initBing()
      initBing()
    }
    start()

以上是通过m所声明的定时器来实现随机延迟，延迟时间理论最大值为5*300 = 1500 毫秒，最小值为0毫秒

试玩地址：