原生js+es6实现的h5小游戏-英雄VS怪兽

原创 asd2340138 随笔 JS 1801阅读 2017-11-06 10:39:00 举报

前言

最近又做了一个小游戏,由于上次做的小游戏(打砖块),分享时主要是贴的代码和注释,可能在阅读上不太容易理解;那么这次就主要和大家聊一聊开发时的心路历程,分享一下解决小游戏流程开发的一些思路。有兴趣的小伙伴也可以联系我,互相探讨一下。

这次分享的小游戏是一个RPG风格的角色对战游戏,可以通过按键分别控制两个角色移动和攻击。在游戏中,角色站立移动攻击受伤死亡分别对应一套动画去渲染,同时还有攻击范围判定攻击掉血机制以及死亡判定等。在实现游戏各种功能的思路上,我主要是将每个需要实现功能拆分开,独立实现,再组合起来,接下来会详细介绍每个功能实现的思路。

传送门h5小游戏-打砖块

线上演示地址http://yangyunhe.oschina.io/my_blog/code_page/h5-game-heroVSmonster/index.html

github地址https://github.com/yangyunhe369/h5-game-heroVSmonster

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

游戏实现截图

原生js+es6实现的h5小游戏-英雄VS怪兽

游戏各个模块功能实现逻辑

角色动画类

javascript 代码

原生js+es6实现的h5小游戏-英雄VS怪兽
这是实现动画的图片素材截图,连续播放的动画就是由一张一张的图片连续切换实现的。

角色类

关于角色类的属性属于这个游戏实现的核心,所以相关的属性会比较多,其中部分属性如下:
javascript 代码

  • type:角色类型,英雄或怪兽
  • x,y:角色坐标
  • speedX,speedY:角色 X 轴和 Y 轴的移动速度
  • life:角色生命值
  • idle、run、attack、hurt、die:角色不同状态(站立、移动、攻击、受伤、死亡)下的动画序列对象,并为每个状态设置一个值判断当前角色处于什么状态
  • direction:角色朝向,记录当前角色向右或向左
  • isFlipX:并判断角色动画是否需要翻转,因为游戏素材角色默认是朝向左侧的,在角色向右时需将画布翻转并重绘动画
  • canMove:角色能否移动
  • isDie:记录角色是否死亡
  • state:记录角色当前状态值
  • state_IDLE、state_RUN、state_ATTACK、state_HURT、state_DIE:分别对应角色(站立、移动、攻击、受伤、死亡)几种状态

游戏引擎类

javascript 代码

结语

评论 ( 3 )
最新评论
asd2340138 2F 2017-11-14 13:52:35 3F

没错,闲得无聊了,才有时间做这个

前端大队长 2017-11-13 10:54:42 2F

工作不饱和啊

jb12467 2017-11-07 11:07:46 1F

es6刚好要学下,不错啊