html5java游戏_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游戏引擎。

售价:99美元

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

4cc48b8acd9bc02aafd991c23deef6d8.png

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

游戏技术要素

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

10e1cb54fa37c447e94dd9f5758813fa.png

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

5c8ed3b884ed55ba41af9a35982b35bc.png

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

菜单

如下图所示:

1d5ba9c6f74081651b525bcdf8d188c0.png

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

爆炸效果

17e6f0cbf152872dfc57d8ee1f7ca06c.png

b843d21a9e01170fc95809c6f2c0f275.png

bd468af27e79199789e6253c50051403.png

6ff466eb783e04f675f19ac5244e2e8c.png

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

发射动画

4ed73df91d5ffc16870f5a6f19f5e044.png

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

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

9ecf0ecf706a3bb35b8a23217486582b.png

不使用Impact

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

f532094d10760c8774f5726c3f9b90b4.png):

加载游戏:

18fa34584a3618acd037923d8da00c7d.png

菜单:

db211303312479377cd1dba67bec031f.png

扫射与爆炸:

dbe9799d8a2042415352295962fb5abb.png

网格动态背景

47808b2aefd35792ea96f3b3e0361c8e.png

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

在线演示(AD+J)

To play this game you need a good Browser, like

Opera,

Chrome,

IE9+,

Firefox or

Safari.

Have Fun!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值