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

原创 asd2340138 随笔 JS 731阅读 2018-04-02 15:23:57 举报

前言

植物大战僵尸这款经典游戏相信大家都玩过,最近我用原生JS+ES6语法,并通过canvas绘制的方式实现了这个游戏的一些基本功能,在这里我会介绍一下实现这个游戏的心路历程。
可能又人会问,实现这样的一个小游戏难吗?其实单看每一个实现的游戏模块来说,这个游戏的实现难度并不大,难点主要在于将所有游戏中的模块如何合理的融合在一起,在实现这个小游戏的过程中,我也踩过不少坑,也重写过一部分游戏逻辑。写这篇文章的目的也是为了记录和总结自己最近在开发中遇到的一些问题和解决问题的思路。

PS:这篇文章之前也在其他平台上发过,但源码是最近才开源。

游戏截图:

在线试玩http://yangyunhe.gitee.io/my_blog/game/h5-game-plantsVSzombies/index.html
github地址https://github.com/yangyunhe369/h5-game-plantsVSzombies

PS:github 地址有代码演示,以及源码可供参考,线上演示地址可供预览体验,关于源码有任何疑问可通过 github 的联系方式联系本人

代码详解

在开发这个游戏的时候,我选择基于ES6的class的方式抽象了游戏相关函数,讲游戏逻辑代码拆分成游戏引擎游戏场景游戏主函数三大部分。

游戏引擎篇

关于这个小游戏的核心引擎,主要的相关属性如下:

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

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

游戏场景篇

在这里我将游戏中所有可控制的元素都归于游戏场景中,并且将这些元素都抽象为类,方便管理,这里包括:植物类僵尸类阳光计分板类植物卡片类动画类,子弹类
游戏场景中最核心的两个类为植物类僵尸类,不过在这两个核心类中都会用到动画类,这里我先介绍一下。

动画类(Animation)

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

这里用到的images,就是通过new Image()的方式生成并添加到images中组成的动画序列,下面是所用到的图片资源:

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

角色类(Role)

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

植物类(Plant)

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

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

攻击形态的切换,这里就涉及需要循环当前植物对象与所有的僵尸对象所组成的数组,判断是否有僵尸处于当前植物对象的射程内(即处于同一行草坪,且进行屏幕显示范围)。
这里主要介绍了植物类的相关属性,其方法包括初始化植物对象植物绘制植物射击更新植物状态检测植物是否可攻击僵尸...

僵尸类(Zombie)

这里可以看到僵尸类的很多属性与植物类类似,就不过多叙述了,由于目前只开发了一种僵尸,所以section属性是固定值。
关于僵尸的动画对象可能会比植物复杂一点,包含idlerunattackdyingdie五种形态的动画序列,其中dyingdie对应僵尸较低血量(濒死状态)和血量为0(死亡状态)时所播放的动画。

在僵尸的控制属性上,与植物同理,这里僵尸的五种动画对象也对应五种状态值,并随状态值的切换而切换。
这里主要介绍了僵尸类的相关属性,其方法包括初始化僵尸对象僵尸绘制僵尸攻击更新僵尸状态检测僵尸是否可攻击植物...

游戏主函数篇

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

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

后记

较以往的经验来看,关于游戏中相关的方法逻辑作者就不详细介绍了,这个分享主要是为了提供给对小游戏感兴趣,但是却不知如何下手的小伙伴一个思路和经验。

如果有小伙伴对游戏相关代码有任何疑问,或想了解相关小游戏的实现逻辑,需要游戏相关素材,都可以通过以下方式联系作者。

博客:www.yangyunhe.me
github地址:https://github.com/yangyunhe369
QQ:314786482
邮箱:yangyunhe369@qq.com

评论 ( 3 )
最新评论
yinglsc 2018-05-11 16:38:35 3F

为何你如此优秀

jieshuai 2018-05-11 11:37:58 2F

大神.收徒弟吗

728045048 2018-04-25 16:35:51 1F

空岛资源网,你懂得!链接标题