我的第一个HTML5游戏——打地鼠总结…

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

由于这里不能发代码，所以大家可以去 http://codingforme.iteye.com/blog/1613314这里下代码。

或者是直接演示地址： 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有问题（声音也播不出）。

最后，大家有什么建议或者意见，可以发留言或者发邮件给我：lufeng2013@qq.com

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

本文请勿转载