活动地址: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的区别。
- 大小: 11.3 KB
- 大小: 7.3 KB
- 大小: 14 KB
分享到:
相关推荐
参考html5 canvas中文文档实现的贪吃蛇。
使用html5的canvas标签+JQuery实现的贪吃蛇小游戏
对应我canvas贪吃蛇那篇文章
html5+javascript 实现贪吃蛇小游戏 实现功能升级 闯关升级
贪吃蛇 html5 canvas版本 请使用支持HTML5的浏览器运行。
运用html5的canvas画布和javascript制作的简易贪吃蛇游戏
HTML5 canvas简单贪吃蛇小游戏,按上下左右键开始游戏。
html5、canvas、贪吃蛇,小游戏,可演示,制作简单,有说明
20行代码的贪吃蛇,canvas实现
看别人视频后,一步一步写出来的贪吃蛇,canvas的版本。这里来收藏一份。 html5+canvas还是挺简单的。
经典贪吃蛇游戏,怀旧感十足,代码结构非常清晰,注释简单明了
HTML5 Canvas贪吃蛇网页游戏是一款网页在线小游戏试玩特效。
贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长。 此代码用html和JavaScript实现贪吃蛇,非常适合编程练习。
看了一天HTML5 Canvas基础教程那本书(之前看过javascript高级程序设计),然后花了几个小时写的~~还是蛮简单的~~
刚开始学html5 然后用html5写了个最简单的小游戏 贪吃蛇
html5 canvas实现经典的手机端贪吃蛇游戏源码.zip
HTML5贪吃蛇中文版基于HTML5 canvas制作,贪吃蛇网页版小游戏,代码附带详细中文注释,供大家参考。