HTML5热门游戏制作---没有99美元的Impact也行

Impact 简介

Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.

Impact 一款让开发者在桌面浏览器和移动终端浏览器开发优秀的HTML5游戏的javascript游戏引擎。

官网地址：http://impactjs.com/

售价：99美元

其中的最受欢迎且耳熟能详的莫过于下面这款：

这是一个打字射击游戏，该游戏被国外很多网站评选为二十款优秀游戏之一。综合分析了一下该款游戏，总体感觉----注重细节。

 

游戏技术要素

1.资源加载和进度显示，这HTML5游戏中很重要的一个元素。当然也可以使用loading的方式，如：HTML5实验室【四十一】--怎么把CanvasLoading插件嵌入你的游戏。或者loading配合进度条，这给玩家的体验最好了。

不过还有一种最好的方式就是，预先加载一个无聊的小游戏，然后让玩家打发loading期间的时间。比如新浪微博中的很多微游戏，都提供了loading期间打地鼠的游戏。如下图所示：

下面是游戏加载的进度条，上面是打地鼠游戏。

 

菜单

如下图所示：

细节如图标注所示，另外文字menu的鼠标事件精确到矩形区域，而不是像素，这点很重要。就像我以前做的那款3D贪吃蛇，鼠标事件精确到文字，这样的用户体验非常不好，应该是立方体。

 

爆炸效果

 

 

 

 

 

 

 

 

 

 

 

如图所示，该款游戏的爆炸不是固定不变使用连续的图片。而是利用3张图片，随机运动+旋转组成的，改细节也是一个亮点。

 

发射动画

 

 

如上图所示，在飞船发射子弹的过程当中，不是不动的，而是有一个发射的动画。这在很多射击类游戏中都没有考虑。

 

 

关卡过度动画及网格动态背景

 

 

不使用Impact

这是我不使用Impact制作的类似的游戏（我也很注重细节）：

加载游戏：

菜单：

 

扫射与爆炸：

网格动态背景

当粒子很多的时候，谷歌浏览器也可以达到40帧以上，IE9和IE10表现良好，一直都在60帧以上。

在线演示(AD+J)

To play this game you need a good Browser, like Opera, Chrome, IE9+, Firefox or Safari.

Have Fun!