原生JS实现的h5小游戏-植物大战僵尸
项目介绍
本项目是利用原生js实现的h5小游戏-植物大战僵尸，主要结合了一下自己对于h5小游戏的理解，结合面向对象的编程思想进行开发，在实现时使用了部分es6语法，对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下。
如有需要，可根据自己的需求修改源码样式、源码配置属性代码，实现个性化定制。
以下为文件目录结构示意图，核心代码在js文件夹下的四个common.js、main.js、game.js、scene.jsjs文件中
源码：https://github.com/yangyunhe369/h5-game-plantsVSzombies
演示截图
demo：https://yangyunhe369.github.io/jQuery-Yys-Slider
实现功能
- 绘制游戏场景：背景、阳光计分板、植物卡片（用于放置植物）、植物（6种）、僵尸（1种）
- 植物和僵尸的攻击判定、死亡判定
- 角色动画由一帧一帧图片不停切换绘制实现，可绘制流畅动画效果
- 角色动画根据角色状态自动切换，植物动画包括（普通形态、攻击形态），僵尸动画包括（普通形态、移动形态、攻击形态、濒死形态、死亡形态）
- 阳光自动生成、植物放置需消耗阳光，僵尸随机生成
- 游戏包含僵尸、植物独立胜利条件判定
- 游戏状态：Loading、游戏运行、游戏暂停、游戏结束（玩家胜利）、游戏结束（僵尸胜利）
目录结构
.
├─ index.html // 首页html
│
├─ css // css样式资源文件
├─ images // 图片资源文件
└─ js
├─ common.js // 公共方法
├─ scene.js // 游戏场景相关类
├─ game.js // 游戏主要运行逻辑
└─ main.js // 游戏运行主函数
核心代码
游戏引擎
游戏核心代码是基于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]
角色类（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（死亡状态）时所播放的动画。
在僵尸的控制属性上，与植物同理，这里僵尸的五种动画对象也对应五种状态值，并随状态值的切换而切换。
这里主要介绍了僵尸类的相关属性，其方法包括初始化实例化僵尸对象、绘制僵尸、僵尸攻击、更新僵尸状态、检测僵尸是否可攻击植物...
游戏主函数
在游戏主函数中，将会把之前所有用到的游戏相关类，进行实例化，并保存在Main类中，在这里调用start游戏启动函数，将会开启游戏引擎，开始绘制游戏场景，所以游戏启动函数会在页面加载完成后立即调用。
class Main {
constructor () {
let m = {
allSunVal: 200, // 阳光总数量
loading: null, // loading 动画对象
sunnum: null, // 阳光实例对象
cars: [], // 实例化除草车对象数组
cars_info: { // 初始化参数
x: 170, // x 轴坐标
y: 102, // y 轴坐标
position: [
{row: 1},
{row: 2},
{row: 3},
{row: 4},
{row: 5},
],
},
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: 50, // 随机生成僵尸数量上限
sunTimer: null, // 全局定时器，用于控制全局定时生成阳光
sunTimer_difference: 20, // 定时生成阳光时间差值（单位：秒）
zombieTimer: null, // 全局定时器，用于控制全局定时生成僵尸
zombieTimer_difference: 12, // 定时生成僵尸时间差值（单位：秒）
game: null, // 游戏引擎对象
fps: 60,
}
Object.assign(this, m)
}
// 此处省略部分函数介绍
...
// 游戏启动函数
start() {
// 实例化游戏场景篇中的所有类
}
}
window._main = new Main()
window._main.start()
这里就简单介绍下plants、zombies对象数组；当游戏运行时，所有种植的植物以及生成的僵尸都会配合其相关初始化参数plants_info、zombies_info进行实例化再分别保存在plants、zombies对象数组中。
原生JS实现的h5小游戏-植物大战僵尸
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
