代码地址如下：
http://www.demodashi.com/demo/12755.html

项目介绍

本项目是利用原生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 => ?????// 播放植物普通形态动画 idlestate === 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小游戏-植物大战僵尸

代码地址如下：
http://www.demodashi.com/demo/12755.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权

原生JS实现的h5小游戏-植物大战僵尸

原文地址：https://www.cnblogs.com/demodashi/p/9436600.html