【HTML5活动】HTML5 Canvas实现贪吃蛇
活动地址:http://html5.group.iteye.com/group/topic/28234
?
严格来说这片博文不应该叫《HTML5 Canvas实现贪吃蛇》。因为这里除了向给大家展示用Canvas+javascript实现snake外,更重要的是我在写出snake之前,对Canvas学习过程中整理的笔记。因此这篇博文的内容有两个重点:
?
提供关于Canvas的相关学习文档提供基于上述文档后的实例snake?
Canvas学习文档是参考https://developer.mozilla.org/cn/Canvas_tutorial提供的文档,但在学习过程中添加了自己的理解,并提供了相应的实例,以便直观的理解。
?
这里大概提下自己在学习Canvas中觉得重要的地方:
?
1、Canvas坐标系的所有方法
? ? ? 如果你想用Canvas绘制游戏场景,那么你必须要熟练掌握Canvas坐标系的相关知识。比如:如何移动坐标原点,如何缩放坐标比例以及如何进行坐标系旋转。因为使用Canvas制作移动动画时,其实可以认为是Canvas坐标原点的移动,也就是画可以不动,而是背景在移动;画面不用旋转,而是画布在旋转。
2、Canvas状态的保存与恢复
? ? ? 这里面涉及到两个方法save()和restore(),用来保存Canvas状态及回复Canvas状态到上一个状态。当需要在Canvas上绘制新的图形时,一般需要首先调用save()方法将绘制前Canvas上已经设置了的状态保存下,避免本次绘制时覆盖基础状态。而在绘制完成后调用restore()方法恢复Canvas状态。
3、Canvas基本动画
? ? ? 掌握在Canvas上动画的基本步骤
?
至于其他的什么绘制图形之类的,大家照着文档创建就行了。文档请查看附加,这里我已经制作成PDF格式的了。
?
?
Canvas贪吃蛇的实现请查看源文件。这里不再赘述,代码中有具体的注释。同时在demo中我提供了Mozilla中的钟表实例,并对其中的代码做了注解,大家可以看看学习下。
?
注:demo中的snake头部绘制成了吃豆子游戏的类似样子,在demo中该图形只是用来练习Canvas的相关函数,而不作为商业使用,特此声明
?
相关截图请查看附件。
?
?
最后大家有兴趣可以看下我以前用div + javascript写的贪吃蛇和俄罗斯方块,比较下与使用html5 canvas的区别。
1 楼 liujun58love 2011-11-28 不错,学习了,有机会研究研究。感谢楼主分享