Canvas 射击小游戏详解系列(一)

前面根据腾讯的一个项目，自己做了一个Canvas设计小游戏，这个小游戏为玩家操作小飞机射击怪兽。小飞机可以左右移动，然后可以射出子弹。怪兽有若干个，从屏幕上方左右移动，当移动到侧边界会下移一行。如果怪兽存活并移动到与飞机一行，则游戏失败，如果飞机能在此之前射击到所有怪兽，则游戏通关。游戏总共设计6关，每一关难度不一样。

整个项目最初只有一个html文件，一个配置文件及一个app入口文件，入口文件的框架已经建好，主要的功能逻辑代码及对象文件都是自己设计实现的。整个项目的关键点是JavaScript中的面向对象设计跟Canvas。页面的渲染都是通过Canvas进行渲染，然后把整个游戏设计成一个对象，里面的角色及零件也都是设计成一个个的对象。下面就给整个项目做一个详细的分析。

项目整体分析

虽然项目的框架并不是自己设计的，但是毕竟整个设计还是非常好的，值得我们去分析，所以我就先把整个游戏的框架跟自己的设计做一下分析。

游戏页面分为四个部分，根据游戏的状态进行切换展示：游戏首页，游戏成功页面，游戏失败页面及游戏通关页面，通过状态start, failed, success及all-success来控制。

data-status="start"] .game-intro {
  display: block;
  padding-top: 180px;
  background: url(./img/bg.png) no-repeat 430px 180px;
  background-size: 200px;
}

[data-status="failed"] .game-failed, 
[data-status="success"] .game-success,
[data-status="all-success"] .game-all-success {
  display: block;
  padding-top: 180px;
  background: url(./img/bg-end.png) no-repeat 380px 190px;
  background-size: 250px;
}

由此，整个游戏就设计成一个名为GAME的对象进行管理。当页面渲染完之后，GAME对象就会进行初始化，设定最初的状态为start，即展示游戏首页，并初始化四个部分的按钮，设置监听事件。

这就是项目原有的框架部分。后面为我根据框架跟游戏设计实现的部分。

不同的按钮会根据游戏状态设置不同的触发内容，不过因为游戏最初，游戏失败后及游戏通关后重玩的触发内容都是从一个新的游戏开始玩起，所以内容都是初始化游戏数据dataInit()及开始游戏play()，只有游戏通关后继续不需要初始化游戏数据即可进入游戏。

初始化游戏数据dataInit()主要是实现一些游戏的配置数据，比如游戏关卡数，游戏分数及怪兽和飞机的配置数据等。

开始游戏play()操作比较多，所以把步骤都拆分成独立的函数方法：setState()用于设置游戏状态，dataReset()用于重置游戏关卡数据，包括难度，位置及键盘监听，createObject()用于创建初始化画布上的对象，比如小飞机，怪兽等，最后的animate()则设置动画效果，涉及渲染画布上所有对象每一帧的变化及位移，并判断游戏的状态。

play: function () {
    this.setStatus('playing');
    // 重置每一关数据
    this.dataReset();
    // 创建画布上飞机，怪兽军团及分数的初始化对象
    this.createObject();
    // 开始动画
    this.animate();
  }

这里就大致的说明了一下这个小游戏项目框架的设计。下一篇会分析项目中对象的设计。