ckwebproject / h5-game-plantsvszombies Goto Github PK

本项目是利用原生js实现的h5小游戏，在实现时使用了大量es6语法，对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下

demo：线上地址

代码详解：博客链接

• 绘制游戏场景：背景、阳光计分板、植物卡片（用于放置植物）、植物（6种）、僵尸（1种）
• 植物和僵尸的攻击判定、死亡判定
• 角色动画由一帧一帧图片不停切换绘制实现，可绘制流畅动画效果
• 角色动画根据角色状态自动切换，植物动画包括（普通形态、攻击形态），僵尸动画包括（普通形态、移动形态、攻击形态、濒死形态、死亡形态）
• 阳光自动生成、植物放置需消耗阳光，僵尸随机生成
• 游戏包含僵尸、植物独立胜利条件判定
• 游戏状态：Loading、游戏运行、游戏暂停、游戏结束（玩家胜利）、游戏结束（僵尸胜利）

v1.1 优化代码，添加向日葵，能自动生成阳光

v1.15 优化代码，修复添加新植物使同行僵尸攻击判定失效bug，添加坚果墙

v1.17 优化代码，添加樱桃炸弹

v1.18 优化代码，添加除草车可清除整行僵尸

v1.2 优化代码，添加食人花

git clone https://github.com/yangyunhe369/h5-game-plantsVSzombies.git

.
├─ index.html                   // 首页html
│  
├─ css                          // css样式资源文件
├─ images                       // 图片资源文件  
└─ js
   ├─ common.js                 // 公共方法
   ├─ scene.js                  // 游戏场景相关类
   ├─ game.js                   // 游戏主要运行逻辑
   └─ main.js                   // 游戏运行主函数

• common.js => 引入公共方法
• scene.js => 引入游戏场景素材相关类，包括角色类、动画类
• game.js => 引入游戏引擎
• main.js => 游戏运行主函数

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^

或者您可以 "follow" 一下，我会不断开源更多的有趣的项目

作者：弦云孤赫(David Yang)

职业：web前端开发工程师

爱好：网游、音乐（吉他）

QQ：314786482

微信：yangyunhe_yyh

坐标：四川成都

MIT