现在的位置: 首页 > 综合 > 正文

Html5小游戏之变大的小球

2012年10月18日 ⁄ 综合 ⁄ 共 530字 ⁄ 字号 评论关闭

现在很流行html5,所以我也花时间去学一下,我主要学习的是canvas标签,因为它可以画图,写小游戏。。。

发觉canvas写游戏跟用dom操作来写游戏很不同:

1,canvas是一张画布,所有东西都是画上去的,如果需要移动某个元素,需要擦掉它,然后再画个新的上去。

2,dom操作,如果要画一个东西,需要将dom元素添加到body或某个div中,设置它的样式,然后才会显示对应的样子出来,不过,它要移动,只需要改变坐标。

3,canvas只会重绘canvas标签,但dom会重绘页面,消耗的性能要小很多。

4,暂时发现那么多了。。。我也只是学到点皮毛而已。。。

 

游戏说明:每次拥有两次点击鼠标的机会,每点击一次鼠标,就会在相应的位置产生一个会慢慢变大,然后慢慢变小的红色球,当红色球碰撞到蓝色的小球,就会

将蓝色小球吃掉,然后在蓝色小球的位置,生出一个红色的球,最终看谁吃得小球最多。

温馨提示:既然是html5,就别用IE系列来浏览了,建议用FF或者chrome活safari。

 

游戏预览:

您的浏览器不支持html5,请使用chrome或者ff

 

bug肯定有的,代码也写得不咋D,请多多指教。

源码上面有完整注释与说明,写得很简单,一看就能看懂的了。。 

完整源码>>

抱歉!评论已关闭.