如何实现H5小游戏—植物大战僵尸-CSDN博客

前言

植物大战僵尸这款经典游戏相信大家都玩过，最近我用原生JS+ES6语法，并通过canvas绘制的方式实现了这个游戏的一些基本功能，在这里我会介绍一下实现这个游戏的心路历程。

可能又人会问，实现这样的一个小游戏难吗？其实单看每一个实现的游戏模块来说，这个游戏的实现难度并不大，难点主要在于将所有游戏中的模块如何合理的融合在一起，在实现这个小游戏的过程中，我也踩过不少坑，也重写过一部分游戏逻辑。写这篇文章的目的也是为了记录和总结自己最近在开发中遇到的一些问题和解决问题的思路。

很多程序猿可能会说，学习编程不过是为了赚钱而已，也有人是为了提高自身的技术？这个有道理的，为什么么要提高自身的技术呢，其实，最终目的是为了解决问题，解决用户的问题。

既然我们是使用编程解决问题的人，那么，学习它的目的就是为了解决问题，也就是说只要能达到解决问题的深度就可以了。当然问题的大小不同，对语言掌握的程度就有不同的要求。因此，在学习编程的过程中切不可脱离了实际，单纯的为了学习编程语言而学习。

当然，这里可能扯的有点远了，但是主要想说明一下自己写这个小游戏的初衷，也是为了提醒自己，在这个浮躁的时代，不忘初心，方得始终。

先上张截图：

试玩链接：植物大战僵尸

游戏引擎篇

在开发这个游戏的时候，我选择基于ES6的class的方式抽象了游戏相关函数，关于这个小游戏的核心引擎，主要的相关属性如下：

class Game {
  constructor () {
      ...
      state: 0,                                                     // 游戏状态值，初始默认为 0
      state_LOADING: 0,                                             // 准备阶段
      state_START: 1,                                               // 游戏开始
      state_RUNNING: 2,                                             // 游戏运行
      state_STOP: 3,                                                // 游戏暂停
      state_PLANTWON: 4,                                            // 游戏结束，玩家胜利
      state_ZOMBIEWON: 5,                                           // 游戏结束，僵尸胜利
      canvas: document.getElementById("canvas"),                    // canvas元素
      context: document.getElementById("canvas").getContext("2d"),  // canvas画布
      timer: null,                                                  // 轮询定时器
      fps: window._main.fps,                                        // 动画帧数
  }
  init () { // 初始化函数
    let g = this
    ...
    // 设置轮询定时器
    g.timer = setInterval(function () {
      // 根据游戏状态，在canvas中绘制不同游戏场景
    }, 1000/g.fps)
    ...
  }
}
复制代码

其实核心逻辑很简单，就是定义一个游戏引擎主函数，生成一个定时器以每秒60帧的频率不停在canvas画布上绘制游戏场景相关元素，然后在定时器函数中根据当前游戏状态（游戏准备、游戏开始、游戏运行、游戏暂停、游戏结束）来绘制对应游戏场景。

loading游戏状态：游戏引擎绘制了页面载入图片，并添加了一个开始游戏按钮 start 游戏状态：游戏开始读条倒计时，提醒用户游戏即将开始 running游戏状态：绘制游戏运行时所需所有游戏场景素材 stop游戏状态：游戏进入暂停阶段，游戏中如生成阳关、僵尸的定时器都将清除，角色动画处于静止状态 gameover游戏状态：分为玩家获得胜利以及僵尸获得胜利两种情况，并分别绘制不同游戏结算画面

游戏场景篇

在这里我将游戏中所有可控制的元素都归于游戏场景中，并且将这些元素都抽象为类，方便管理，这里包括：植物类、僵尸类、阳光计分板类、植物卡片类、动画类,子弹类。

游戏场景中最核心的两个类为植物类、僵尸类，不过在这两个核心类中都会用到动画类，这里我先介绍一下。

动画类（Animation）

动画类的作用是将每一个角色的不同动画序列保存起来，每隔一定时间切换当前显示的图片对象，达到播放动画的效果。

class Animation{
  constructor (role, action, fps) {
    let a = {
      type: role.type,                                   // 动画类型（植物、僵尸等等）
      section: role.section,                             // 植物或者僵尸类别
      action: action,                                    // 根据传入动作生成不同动画对象数组
      images: [],                                        // 当前引入动画图片对象数组
      img: null,                                         // 当前显示动画图片
      imgIdx: 0,                                         // 当前角色图片序列号
      count: 0,                                          // 计数器，控制动画运行
      fps: fps,                                          // 角色动画运行速度系数，值越小，速度越快
    }
    Object.assign(this, a)
  }
}
复制代码

这里用到的images，就是通过new Image()的方式生成并添加到images中组成的动画序列：

其中type和section用于判断当前需要加载植物或僵尸、哪一个动作所对应动画序列，count和fps用于控制当前动画的播放速度，而img用于表示当前所展示的图片对象，即images[imgIdx]，其关系类似于以下代码：

// 在全局定时器中每1/60秒计算一次
// 获取动画序列长度
let animateLen = images.length
// 计数器自增
count++
// 设置当前显示动画序列号
imgIdx = Math.floor(count / fps)
// 当一整套动画完成后重置动画计数器
imgIdx === animateLen - 1 ? count = 0 : count = count
// 设置当前显示动画图片
img = images[imgIdx]
复制代码

======================== 2017.12.4更新start ============================

角色类（Role）

class Role{
  constructor (obj) {
    let r = {
      id: Math.random().toFixed(6) * Math.pow(10, 6),      // 随机生成 id 值，用于设置当前角色 ID，区分不同角色
      type: obj.type,                                      // 角色类型（植物或僵尸）
      section: obj.section,                                // 角色类别（豌豆射手、双发射手...）
      x: obj.x,                                            // x轴坐标
      y: obj.y,                                            // y轴坐标
      w: 0,                                                // 角色图片宽度
      h: 0,                                                // 角色图片高度
      row: obj.row,                                        // 角色初始化行坐标
      col: obj.col,                                        // 角色初始化列坐标
      isAnimeLenMax: false,                                // 是否处于动画最后一帧，用于判断动画是否执行完一轮
      isDel: false,                                        // 判断是否死亡并移除当前角色
      isHurt: false,                                       // 判断是否受伤
    }
    Object.assign(this, r)
  }
}
复制代码

这里的角色类主要用于抽象植物类和僵尸类的公共属性，基本属性包括type、section、x、y、w、h、row、col，其中row和col属性用于控制角色在草坪上绘制的横纵坐标（即x轴和y轴方向位于第几个方格），section属性用于区分当前角色到底是哪一种，如豌豆射手、双发射手、加特林射手、普通僵尸。

植物类（Plant）

class Plant{
  constructor (obj) {
    let p = {
      life: 3,                                             // 角色血量
      idle: null,                                          // 站立动画对象
      attack: null,                                        // 攻击动画对象
      bullets: [],                                         // 子弹对象数组
      state: 1,                                            // 保存当前状态值，默认为1      
      state_IDLE: 1,                                       // 站立不动状态
      state_ATTACK: 2,                                     // 攻击状态
    }
    Object.assign(this, p)
  }
  // 绘制方法
  draw(cxt) {
      // 根据当前植物的状态，分别绘制正常状态动画，以及受伤时的半透明状态动画
      let self = this
      cxt.drawImage(self[stateName].img, self.x, self.y)
  }
  // 更新当前植物状态
  update() {
      // 通过动画计数器计算出当前植物显示动画序列的图片
  }
  // 判断当前植物是否可进入攻击状态
  canAttack() {
      // 通过轮询僵尸对象数组，判断处于当前植物同行的僵尸，且进入草坪内时，即开始攻击僵尸
      // 目前仅有三种射手类植物可使用子弹攻击，樱桃炸弹属于范围伤害类植物（判断范围为其周围八个格子内）
      // 攻击成功时，减少对应僵尸血量，并在僵尸血量到达特殊值时，切换其动画（如濒死状态，死亡状态），在血量为 0 时，从僵尸对象数组中移除当前僵尸
  }
  // 射击方法
  shoot() {
      // 当前植物攻击时， bullets 数组添加子弹对象
      let self = this
      self.bullets[self.bullets.length] = Bullet.new(self)
  }
}
复制代码

植物类的私有属性包括idel、attack、bullets、state，其中idel和attack为动画对象，相信看过上面关于动画类介绍的小伙伴应该能理解其作用，bullets即用于保存当前植物的所有子弹对象（同动画类，子弹类也有属性、方法的配置，这里就不详细叙述了）。

关于植物的状态控制属性，如isHurt属性会在植物受伤时，切换为true，并由此给动画添加一个透明度，模拟受伤效果；isDel属性会在植物血量降为0时，将植物从植物对象数组中移除，即不再绘制当前植物；state属性用于植物在两种形态中进行切换，即普通形态、攻击形态，当前状态值为哪种形态，即播放对应形态动画，对应关系如下：

 state === state_IDLE => // 播放植物普通形态动画 idle
 state === state_ATTACK => // 播放植物攻击形态动画 attack
复制代码

攻击形态的切换，这里就涉及需要循环当前植物对象与所有的僵尸对象所组成的数组，判断是否有僵尸处于当前植物对象的射程内（即处于同一行草坪，且进行屏幕显示范围）。

这里主要介绍了植物类的相关属性，其方法包括初始化植物对象、植物绘制、植物射击、更新植物状态、检测植物是否可攻击僵尸...

僵尸类（Zombie）

// 僵尸类
class Zombie{
  constructor (obj) {
    let z = {
      life: 10,                                            // 角色血量
      idle: null,                                          // 站立动画对象
      run: null,                                           // 奔跑动画对象
      attack: null,                                        // 攻击动画对象
      dying: null,                                         // 濒临死亡动画对象
      die: null,                                           // 死亡动画对象
      state: 1,                                            // 保存当前状态值，默认为1
      state_IDLE: 1,                                       // 站立不动状态
      state_RUN: 2,                                        // 奔跑状态
      state_ATTACK: 3,                                     // 攻击状态
      state_DYING: 4,                                      // 濒临死亡状态
      state_DIE: 5,                                        // 死亡状态
      canMove: true,                                       // 判断当前角色是否可移动
      attackPlantID: 0,                                    // 当前攻击植物对象 ID
      speed: 3,                                            // 移动速度
    }
    Object.assign(this, z)
  }
  // 绘制方法
  draw() {
      // 根据当前僵尸的状态，分别绘制正常状态动画，以及受伤时的半透明状态动画
      let self = this
      cxt.drawImage(self[stateName].img, self.x, self.y)
  }
  // 更新当前僵尸状态
  update() {
      // 动画计数器计算出当前植物显示动画序列的图片
  }
  // 判断当前僵尸是否可进入攻击状态
  canAttack() {
      // 通过轮询植物对象数组，判断处于当前僵尸同行的植物，且进入其攻击范围内时，即开始攻击植物
      // 攻击成功时，当前僵尸 canMove 属性将为 false ，记录其 attackPlantID ，即所攻击植物 id 值，并减少对应植物血量；
      // 在植物血量为 0 时，切换其动画（进入死亡状态），并从植物对象数组中移除该植物，同时
      // 将所有攻击该植物的僵尸的状态切换为移动状态， canMove 属性值改为 true
  }
}
复制代码

这里可以看到僵尸类的很多属性与植物类类似，就不过多叙述了，由于目前只开发了一种僵尸，所以section属性是固定值。

关于僵尸的动画对象可能会比植物复杂一点，包含idle、run、attack、dying、die五种形态的动画序列，其中dying和die对应僵尸较低血量和血量为0时所播放的动画。

在僵尸的控制属性上，与植物同理，这里僵尸的五种动画对象也对应五种状态值，并随状态值的切换而切换。

这里主要介绍了僵尸类的相关属性，其方法包括初始化僵尸对象、僵尸绘制、僵尸攻击、更新僵尸状态、检测僵尸是否可攻击植物...

======================== 2017.12.4更新end ============================

游戏主函数篇

在游戏主函数中，将会把之前所有用到的游戏相关类，进行实例化，并保存在Main类中，在这里调用start游戏启动函数，将会开启游戏引擎，开始绘制游戏场景，所以游戏启动函数会在页面加载完成后立即调用。

class Main {
  constructor () {
    let m = {
      allSunVal: 200,                           // 阳光总数量
      loading: null,                            // loading 动画对象
      sunnum: null,                             // 阳光实例对象
      cards: [],                                // 实例化植物卡片对象数组
      cards_info: {                             // 初始化参数
        x: 0,
        y: 0,
        position: [
          {name: 'peashooter', row: 1, sun_val: 100},
          {name: 'repeater', row: 2, sun_val: 150},
          {name: 'gatlingpea', row: 3, sun_val: 200},
        ]
      },
      plants: [],                               // 实例化植物对象数组
      zombies: [],                              // 实例化僵尸对象数组
      plants_info: {                            // 初始化参数
        type: 'plant',                          // 角色类型
        x: 250,                                 // 初始 x 轴坐标，递增量 80
        y: 92,                                  // 初始 y 轴坐标，递增量 100
        len: 0,
        position: []                            // section：植物类别，row：横行坐标（最小值为 5），col：竖列坐标（最大值为 9）
      },
      zombies_info: {                           // 初始化参数
        type: 'zombie',                         // 角色类型
        x: 250,                                 // x轴坐标
        y: 15,                                  // y轴坐标
        position: []                            // section：僵尸类别，row：横行坐标（最小值为 9），col：竖列坐标（最大值为 13）
      },
      zombies_idx: 0,                            // 随机生成僵尸 idx
      zombies_row: 0,                            // 随机生成僵尸的行坐标
      zombies_iMax: 30,                          // 随机生成僵尸数量上限
      sunTimer: null,                            // 全局定时器，用于控制全局定时生成阳光
      zombieTimer: null,                         // 全局定时器，用于控制全局定时生成僵尸
      game: null,                                // 游戏引擎对象
      fps: 60,                                   // 动画帧数
    }
    Object.assign(this, m)
  }
  // 游戏启动函数
  start() {
     // 实例化游戏场景篇中的所有类
  }
}
window._main = new Main()
window._main.start()
复制代码