微信小游戏初体验

import Player     from './player/index'import Enemy      from './npc/enemy'import BackGround from './runtime/background'import GameInfo   from './runtime/gameinfo'import Music      from './runtime/music'import DataBus    from './databus'let ctx   = canvas.getContext('2d')let databus = new DataBus()/**
 * 游戏主函数
 */export default class Main {  constructor() {    this.restart()
  }

  restart() {
    databus.reset()

    canvas.removeEventListener(      'touchstart',      this.touchHandler
    )    this.bg       = new BackGround(ctx)    this.player   = new Player(ctx)    this.gameinfo = new GameInfo()    this.music    = new Music()    window.requestAnimationFrame(      this.loop.bind(this),
      canvas
    )
  }  /**
   * 随着帧数变化的敌机生成逻辑
   * 帧数取模定义成生成的频率
   */
  enemyGenerate() {    if ( databus.frame % 30 === 0 ) {      let enemy = databus.pool.getItemByClass('enemy', Enemy)
      enemy.init(6)
      databus.enemys.push(enemy)
    }
  }  // 全局碰撞检测
  collisionDetection() {    let that = this

    databus.bullets.forEach((bullet) => {      for ( let i = 0, il = databus.enemys.length; i < il;i++ ) {        let enemy = databus.enemys[i]        if ( !enemy.isPlaying && enemy.isCollideWith(bullet) ) {
          enemy.playAnimation()
          that.music.playExplosion()

          bullet.visible = false
          databus.score  += 1

          break
        }
      }
    })    for ( let i = 0, il = databus.enemys.length; i < il;i++ ) {      let enemy = databus.enemys[i]      if ( this.player.isCollideWith(enemy) ) {
        databus.gameOver = true

        break
      }
    }
  }  //游戏结束后的触摸事件处理逻辑
  touchEventHandler(e) {
    e.preventDefault()    let x = e.touches[0].clientX    let y = e.touches[0].clientY    let area = this.gameinfo.btnArea    if (   x >= area.startX
        && x <= area.endX
        && y >= area.startY
        && y <= area.endY  )      this.restart()
    }    /**
     * canvas重绘函数
     * 每一帧重新绘制所有的需要展示的元素
     */
    render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)    this.bg.render(ctx)

    databus.bullets
           .concat(databus.enemys)
           .forEach((item) => {
              item.drawToCanvas(ctx)
            })    this.player.drawToCanvas(ctx)

    databus.animations.forEach((ani) => {      if ( ani.isPlaying ) {
        ani.aniRender(ctx)
      }
    })    this.gameinfo.renderGameScore(ctx, databus.score)
  }  // 游戏逻辑更新主函数
  update() {    this.bg.update()

    databus.bullets
           .concat(databus.enemys)
           .forEach((item) => {
              item.update()
            })    this.enemyGenerate()    this.collisionDetection()
  }  // 实现游戏帧循环
  loop() {
    databus.frame++    this.update()    this.render()    if ( databus.frame % 20 === 0 ) {      this.player.shoot()      this.music.playShoot()
    }    // 游戏结束停止帧循环
    if ( databus.gameOver ) {      this.gameinfo.renderGameOver(ctx, databus.score)      this.touchHandler = this.touchEventHandler.bind(this)
      canvas.addEventListener('touchstart', this.touchHandler)      return
    }    window.requestAnimationFrame(      this.loop.bind(this),
      canvas
    )
  }
}

import Pool from './base/pool'let instance/**
 * 全局状态管理器
 */export default class DataBus {  constructor() {    if ( instance )      return instance

    instance = this

    this.pool = new Pool()    this.reset()
  }

  reset() {    this.frame      = 0
    this.score      = 0
    this.bullets    = []    this.enemys     = []    this.animations = []    this.gameOver   = false
  }  /**
   * 回收敌人，进入对象池
   * 此后不进入帧循环
   */
  removeEnemey(enemy) {    let temp = this.enemys.shift()

    temp.visible = false

    this.pool.recover('enemy', enemy)
  }  /**
   * 回收子弹，进入对象池
   * 此后不进入帧循环
   */
  removeBullets(bullet) {    let temp = this.bullets.shift()

    temp.visible = false

    this.pool.recover('bullet', bullet)
  }
}

/**
 * 游戏基础的精灵类
 */export default class Sprite {  constructor(imgSrc = '', width=  0, height = 0, x = 0, y = 0) {    this.img     = new Image()    this.img.src = imgSrc    this.width  = width    this.height = height    this.x = x    this.y = y    this.visible = true
  }  /**
   * 将精灵图绘制在canvas上
   */
  drawToCanvas(ctx) {    if ( !this.visible )      return

    ctx.drawImage(      this.img,      this.x,      this.y,      this.width,      this.height
    )
  }  /**
   * 简单的碰撞检测定义：
   * 另一个精灵的中心点处于本精灵所在的矩形内即可
   * @param{Sprite} sp: Sptite的实例
   */
  isCollideWith(sp) {    let spX = sp.x + sp.width / 2
    let spY = sp.y + sp.height / 2

    if ( !this.visible || !sp.visible )      return false

    return !!(   spX >= this.x
              && spX <= this.x + this.width
              && spY >= this.y
              && spY <= this.y + this.height  )
  }
}

let instanceexport default class Music {  constructor() {    if ( instance )      return instance

    instance = this

    // this.bgmAudio = new Audio()
    this.bgmAudio      = wx.createInnerAudioContext()    this.bgmAudio.loop = true
    this.bgmAudio.src  = 'audio/bgm.mp3'

    // this.shootAudio     = new Audio()
    this.bgmAudio      = wx.createInnerAudioContext()    this.shootAudio.src = 'audio/bullet.mp3'

    // this.boomAudio     = new Audio()
    this.bgmAudio      = wx.createInnerAudioContext()    this.boomAudio.src = 'audio/boom.mp3'

    this.playBgm()
  }

  playBgm() {    this.bgmAudio.play()
  }

  playShoot() {    // this.shootAudio.currentTime = 0
    this.boomAudio.seek(0)    this.shootAudio.play()
  }

  playExplosion() {    // this.boomAudio.currentTime = 0
    this.boomAudio.seek(0)    this.boomAudio.play()
  }
}

export default class DataBus {    constructor() {    if ( instance )      return instance

    instance = this

    this.pool = new Pool()    this.canvas = wx.createCanvas()    this.reset()
  }
 }

// player/index.jsinitEvent() {
wx.onTouchStart(((e) => {  let x = e.touches[0].clientX  let y = e.touches[0].clientY  //
  if (this.checkIsFingerOnAir(x, y)) {    this.touched = true

    this.setAirPosAcrossFingerPosZ(x, y)
  }

}).bind(this))
wx.onTouchMove(((e) => {  let x = e.touches[0].clientX  let y = e.touches[0].clientY  if (this.touched)    this.setAirPosAcrossFingerPosZ(x, y)

}).bind(this))

wx.onTouchEnd(((e) => {  this.touched = false}).bind(this))
}