HTML5 游戏示例 DEMO
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本作品为HTML5游戏示例DEMO，旨在展示利用HTML5技术进行网页游戏开发的基本方法和技巧，适合初学者参考学习。
HTML5游戏开发很受欢迎，我打算用Cocos2d引擎来做一个简单的游戏试试手气。经过一番搜索后，我发现除了常用的Cocos2d-html5外，还有一个开源的Lufylegend.js也很不错，以后可以考虑使用它。
在开始之前，我在Chrome浏览器上搭建了开发环境，并且下载并安装了Cocos2d-html5引擎包。我将游戏发布到了一个网站上（注：原文中提及的游戏地址和测试方法已省略）。
接下来是具体的实现步骤：
1. 创建LayerGradient的子类（用于存放坦克子弹）
2. 重写onEnter 方法，添加一些基本按钮以及初始设置的坦克、子弹
3. 使用schedule方法来控制坦克及子弹的刷新与绘制
4. 根据键盘按键（ASWD）确定出坦克的方向，并通过修改X和Y坐标实现移动功能。
5. 应用cc.rectIntersectsRect函数进行碰撞检测，确保子弹可以击中目标。
下面是一些关键代码片段：
1. 方向变量：
```javascript
var Direction = { L:0, U:1, D:2, R:3, STOP:4 };
```
2. 子弹类属性及初始化方法：
```javascript
this.x=x;
this.y=y;
this.dir=dir;
this.tankClient=tankClient; //LayerGradient子类TankClient的引用
...
ctor:function (x,y,good,dir,tankClient) { ... }
Draw:function(){...}
HitTank:function(t){...}
```
3. 坦克类属性及初始化方法：
```javascript
var SPEED=5;
var WIDTH=58;
var HEIGHT=58;
this.x=x;
...
ctor:function (x,y,good,tankClient) { ... }
Draw:function(){...}
Fire:function(){...}
```
4. 在LayerGradient中加入坦克实例，以及子弹击打检测方法：
```javascript
this.tanks = [];
// 添加我的坦克和敌人坦克的实例化代码
...
m.HitTank(this.myTank);
m.HitTanks(this.tanks);
```
5. 控制移动与射击功能的方法：
```javascript
onKeyUp:function(key) { this.myTank.KeyReleased(key); }
onKeyDown:function(key) { this.myTank.KeyPressed(key); }
```
以上是开发过程中的一些关键步骤和代码片段。如果在阅读或实践中发现任何不合理之处或者需要改进的地方，欢迎随时提出建议（注：原文中提及的联系方式已省略）。
全部评论 (0)
