我的第一个HTML5游戏——打地鼠总结…
2013-05-07 16:25
260 查看
历时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
(请了解:游戏中所有图片和音乐均来自手机版同名游戏,本游戏仅供学习参考)
本文请勿转载
由于这里不能发代码,所以大家可以去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
(请了解:游戏中所有图片和音乐均来自手机版同名游戏,本游戏仅供学习参考)
本文请勿转载
相关文章推荐
- 我的第一个HTML5游戏——打地鼠具体…
- 第一个android游戏项目eyesight总结
- html5消除方块游戏总结-对象
- HTML5面向对象的游戏开发简单实例总结
- Html5消除方块游戏总结-其他
- HTML5 Canvas核心技术 图形、动画与游戏开发学习总结
- HTML5游戏总结:分辨率对游戏布局设计的影响
- HTML5面向对象的游戏开发简单实例总结
- 打地鼠游戏(简洁版)制作总结
- Cocos2d-x 独立开发之路--第一个游戏Fly Your Sister 总结
- HTML5游戏实战之20行代码实现打地鼠
- 创建你的第一个游戏Pong——总结
- 第一个游戏总结
- HTML5游戏实战之20行代码实现打地鼠
- 第一个IOS游戏——伞公主开发总结
- 用html5创建小游戏经验总结
- html5开发游戏总结
- 发布HTML5 RTS游戏-古代战争
- iOS与HTML5交互方法总结
- DirectX3D游戏开发一 第一个DirectX3D项目