Html5小游戏之变大的小球
现在很流行html5,所以我也花时间去学一下,我主要学习的是canvas标签,因为它可以画图,写小游戏。。。
发觉canvas写游戏跟用dom操作来写游戏很不同:
1,canvas是一张画布,所有东西都是画上去的,如果需要移动某个元素,需要擦掉它,然后再画个新的上去。
2,dom操作,如果要画一个东西,需要将dom元素添加到body或某个div中,设置它的样式,然后才会显示对应的样子出来,不过,它要移动,只需要改变坐标。
3,canvas只会重绘canvas标签,但dom会重绘页面,消耗的性能要小很多。
4,暂时发现那么多了。。。我也只是学到点皮毛而已。。。
游戏说明:每次拥有两次点击鼠标的机会,每点击一次鼠标,就会在相应的位置产生一个会慢慢变大,然后慢慢变小的红色球,当红色球碰撞到蓝色的小球,就会
将蓝色小球吃掉,然后在蓝色小球的位置,生出一个红色的球,最终看谁吃得小球最多。
温馨提示:既然是html5,就别用IE系列来浏览了,建议用FF或者chrome活safari。
游戏预览:
bug肯定有的,代码也写得不咋D,请多多指教。
源码上面有完整注释与说明,写得很简单,一看就能看懂的了。。