我的第一个HTML5游戏——打地鼠总结及源码

历时10天，我的第一个HTML5游戏终于完成了，下来介绍我这个游戏——打地鼠

源码在最下面，大家下下玩玩

演示地址：http://mousehit.sinaapp.com/mouseHit/index.html

游戏功能

1.帮助界面

2.游戏预备开始

3.5种不同地鼠的随机出现

4.关卡设置，当然有计时条显示

5.失败和通过关卡设置

6.音效设置

经验

1.找出需要的图片和音频时候      

  没有必要重新选择了，资源是从个android游戏解压来的，本身就是符合这个游戏。但是，如果以后做正式项目时候，就不能靠解压android游戏了（但谁又会说不会参考参考其他人，这你懂的）。

2.把图片，相同功能作用的图P在一起，解压出来的图片都是一张张，比较散乱。这样可以减少图片的http请求。为了使游戏更加流畅，可以用音频和图片的压缩来优化。

3.如果定位背景图，有个比较简单方法，打开dreamweaver，然后写个HTML页面，里面就一句body里面就一句<img src="你要定位的图片路径"/>和设置CSS样式*{margin:0;padding:0;} ，切换到设计界面，可以通过拉参考线，然后按ctrl键就知道定位位置。

4.当setInterval里面的函数需要传参数时候，可以使用匿名函数包装的方式。

//为setInterval传参数

function foo()

{

     var param = 100;

     window.setInterval(function()

     {

         intervalFunction(param);

         param++;

     }, 888);

 }

intervalFunction(param){

 ......

}

4.HTML5 canvas 在鼠标的拖动上有些不便的东西。比如30毫秒刷新一次canvas，而鼠标如果在这30毫秒内移动速度快，就会产生鼠标所在的位置会比canvas画面快，而鼠标控制的东西就有些滞后感。

5.设置存在矩阵(地鼠位于哪个洞)之后，碰撞检测就不需要轮询全部对象了，只需要检测相应位置的对象。这个方法适合那些在同个canvas位置上有多个不同对象的游戏。

6.鼠标控制的游戏，HTML5 canvas 有些缺陷，也本身是页面的问题，就是在鼠标迅速点击，会出现“I”的图标（即使鼠标），这比较影响人机交互。

7.canvas绘图所画的是那些经常变化对象（如地鼠，计时条），其他不变部分最好是用HTML+CSS（如暂停按钮）。

教训和不足

1.在5种地鼠的随机产生过程中，本不应该是同等概率出现的，但我还是同概率的。应该，甚至是一关出现几只都是计算好的。

2.框架这方面，由于之前的例子是用键盘事件的，而由于我的打地鼠游戏是鼠标事件的，所以就不能安照他的例子。而且我要实现和其框架有些不大符合，最后打算用一半。

3.在功能完善难易和代码整洁上，如果存在冲突，如何平衡之间的问题，也是需要认真考虑。

浏览器兼容

1.兼容Chrome和FF（效果最不错），但IE有问题（声音也播不出）。

最后，大家有什么建议或者意见，可以发留言或者发邮件给我：[e-mail]

（请了解：游戏中所有图片和音乐均来自手机版同名游戏，本游戏仅供学习参考)

 

评论

2 楼 绽放的微笑 2014-03-07  

1 楼 jnlk0001 2013-02-18