【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  

不错，学习了，有机会研究研究。感谢楼主分享