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

时间:2023-12-15 09:06:32

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

项目介绍

本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结合面向对象的编程思想进行开发,在实现时使用了部分es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下。

如有需要,可根据自己的需求修改源码样式、源码配置属性代码,实现个性化定制。

以下为文件目录结构示意图,核心代码在js文件夹下的四个common.jsmain.jsgame.jsscene.jsjs文件中

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

源码https://github.com/yangyunhe369/h5-game-plantsVSzombies

演示截图

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

demohttps://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中组成的动画序列:

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

其中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)
}
}

这里的角色类主要用于抽象植物类和僵尸类的公共属性,基本属性包括typesectionxywhrowcol,其中rowcol属性用于控制角色在草坪上绘制的横纵坐标(即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)
}
}

植物类的私有属性包括idelattackbulletsstate,其中idelattack为动画对象,相信看过上面关于动画类介绍的小伙伴应该能理解其作用,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属性是固定值。

关于僵尸的动画对象可能会比植物复杂一点,包含idlerunattackdyingdie五种形态的动画序列,其中dyingdie对应僵尸较低血量(濒死状态)和血量为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()

这里就简单介绍下plantszombies对象数组;当游戏运行时,所有种植的植物以及生成的僵尸都会配合其相关初始化参数plants_infozombies_info进行实例化再分别保存在plantszombies对象数组中。

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

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

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