微信小游戏 demo 飞机大战代码分析（一）(main.js)

本博客将使用逐行代码分析的方式讲解该demo，本文适用于对其他高级语言熟悉，对js还未深入了解的同学，博主会尽可能将所有遇到的不明白的部分标注清楚，若有不正确或不清楚的地方，欢迎在评论中指正

本文的代码均由微信小游戏自动生成的demo飞机大战中获取

文件目录

game.js

首先让我们来看一下作为入口的game.js，可以看到在这里只进行了main类的初始化，因此下一步我们应该查看一下main类中的函数

代码

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() {    // 维护当前requestAnimationFrame的id    this.aniId    = 0    //重新生成新的界面    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()    this.bindLoop     = this.loop.bind(this)    this.hasEventBind = false    // 清除上一局的动画    window.cancelAnimationFrame(this.aniId);    this.aniId = window.requestAnimationFrame(      this.bindLoop,      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)    // 游戏结束停止帧循环    if ( databus.gameOver ) {      this.gameinfo.renderGameOver(ctx, databus.score)      if ( !this.hasEventBind ) {        this.hasEventBind = true        this.touchHandler = this.touchEventHandler.bind(this)        canvas.addEventListener('touchstart', this.touchHandler)      }    }  }  // 游戏逻辑更新主函数  update() {    if ( databus.gameOver )      return;    this.bg.update()    databus.bullets           .concat(databus.enemys)           .forEach((item) => {              item.update()            })    this.enemyGenerate()    this.collisionDetection()    if ( databus.frame % 20 === 0 ) {      this.player.shoot()      this.music.playShoot()    }  }  // 实现游戏帧循环  loop() {    databus.frame++    this.update()    this.render()    this.aniId = window.requestAnimationFrame(      this.bindLoop,      canvas    )  }}

一点基础知识

帧：游戏中的帧和动画中的帧，视频中的帧概念类似，即游戏过程中物体和动画效果变化的一个周期。

精灵：是游戏中的一个基本概念，指的是在游戏中的一个基本物体或动画或贴图，如NPC或者敌人，在本例中有子弹，敌机和玩家

回调函数：在特定事件发生后，由事件方进行调用的函数

画布：顾名思义就是使用了画东西的地方，其实就是用于渲染相关内容的位置

main.js

main 即为游戏的主函数，我们来逐个分析一下其内容

export default 为 ES6，即js的一个版本中的语言，在js中，任何类或对象使用export既可以在其他文件中通过import进行调用使用，使用 import {类或对象名} from 文件路径，但若使用export default则可以省略 { }，但一份文件中仅仅可以存在一个export default

初始化生成对象

在main函数前其调用生成了一个2d画布，名称为ctx

生成了一个数据总线对象databus，数据总线的内容将在下次博客中解释

main 类

contructor()

contructor 用于创建main 对象，其中调用了restart函数，因此我们跳转到restart函数中进行查看

restart()

该函数用于重新生成一个界面

首先重置数据总线对象的内容

监听触碰事件

初始化背景对象，玩家对象，游戏信息对象和音乐对象

this.bg       = new BackGround(ctx)this.player   = new Player(ctx)this.gameinfo = new GameInfo()this.music    = new Music()

绑定事件循环，初始化状态，并开始运行

this.bindLoop     = this.loop.bind(this)    this.hasEventBind = false    // 清除上一局的动画    window.cancelAnimationFrame(this.aniId);    this.aniId = window.requestAnimationFrame(      this.bindLoop,      canvas    )

js语法中，可以将某个对象的方法单独拿出来作为一个方法使用，但是在使用过程中，避免不了出现未知该函数所指向的对象的情况
- 例如在该代码中，若写作this.bindLoop = this.loop 那么该函数所属的类就丢失了，那么该函数一些执行也就无法进行
- 为了避免这样的情况，js使用bind函数，将所需的类绑定到该函数上，这样就有效地解决了这个问题

window.requestAnimationFrame()
- 该函数使用了两个参数，第一个是回调函数，第二个是画布
- 画布的功能即用来工作的区域
- 而回调函数的作用是在浏览器在该帧渲染完毕之后，调用的函数，根据博主的资料查询，回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。
- 在该例子中，restart中的该函数仅仅是使用初始化的main对象更新loop函数，并将其作为刷新内容
- 但由于main对象中的逻辑会产生变更，因此在之后的loop函数也对其进行了请求，并绑定了参数。使用新缠身过的main对象和新产生的canvas在浏览器中进行渲染