`
LeeYee
  • 浏览: 72116 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【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的区别。

  • 大小: 11.3 KB
  • 大小: 7.3 KB
  • 大小: 14 KB
3
1
分享到:
评论
1 楼 liujun58love 2011-11-28  
不错,学习了,有机会研究研究。感谢楼主分享

相关推荐

    html5 canvas 实现贪吃蛇

    在这个项目中,“html5 canvas 实现贪吃蛇”,我们将探讨如何利用Canvas API来构建一个经典的贪吃蛇游戏。 首先,我们要理解Canvas的基本结构。一个Canvas元素在HTML中以`<canvas>`标签定义,可以通过`id`属性来...

    Html5-Canvas 贪吃蛇

    这个“Html5-Canvas 贪吃蛇”项目是利用HTML5的Canvas技术和jQuery库来实现的经典游戏——贪吃蛇。下面我们将详细探讨HTML5 Canvas与jQuery在实现这个游戏中的关键知识点。 1. **HTML5 Canvas基本概念**: - ...

    Javascript + canvas 实现贪吃蛇小游戏

    在本项目中,"Javascript + canvas 实现贪吃蛇小游戏" 是一个利用HTML5的Canvas API和JavaScript语言构建的经典小游戏。Canvas是HTML5的一个重要特性,它允许在网页上进行动态图形绘制,非常适合用于开发此类交互式...

    html5canvas开发贪吃蛇游戏

    在HTML5 Canvas上实现这款游戏,主要涉及以下几个关键技术点: 1. **Canvas基本概念**:Canvas是一个基于矢量图形的画布,通过JavaScript API进行操作。HTML5提供`<canvas>`标签来创建Canvas元素,并通过`context`...

    canvas贪吃蛇源码.html

    对应我canvas贪吃蛇那篇文章

    HTML5 canvas简单贪吃蛇小游戏.zip

    通过研究这个HTML5 Canvas实现的贪吃蛇小游戏,我们可以深入理解Canvas API的用法,以及如何利用它来开发互动性的网页应用。这对于想要提升前端开发技能,尤其是游戏开发方面的人来说,是一个很好的实践项目。

    HTML5 Canvas js贪吃蛇

    在这个“HTML5 Canvas js贪吃蛇”项目中,我们看到的是一个利用Canvas API和JavaScript实现的经典游戏——贪吃蛇。这个项目不仅展示了Canvas的基本用法,还涉及到了JavaScript编程技巧和游戏逻辑的实现。 首先,...

    H5 canvas实现贪吃蛇小游戏

    【H5 canvas 实现贪吃蛇小游戏】是一个利用HTML5的canvas元素来创建经典游戏“贪吃蛇”的教程。canvas是HTML5中的一个强大的绘图工具,允许开发者通过JavaScript动态绘制图形。 首先,我们了解实现贪吃蛇的基本思路...

    贪吃蛇---HTML5 canvas版

    贪吃蛇 html5 canvas版本 请使用支持HTML5的浏览器运行。

    非常简单的canvas贪吃蛇

    【标题】"非常简单的canvas贪吃蛇"是一个利用HTML5的Canvas API实现的贪吃蛇游戏。这个项目展示了如何在网页上用纯JavaScript构建一个基本的游戏框架,通过Canvas的绘图功能来绘制游戏元素,以及处理游戏逻辑。 ...

    canvas贪吃蛇

    "canvas贪吃蛇"是一款基于HTML5的Canvas技术和jQuery库实现的经典小游戏,它为初学者提供了实践和理解Canvas API的良好机会。在这个项目中,我们主要会涉及到以下几个关键知识点: 1. **HTML5 Canvas**: Canvas是...

    html5 canvas 贪吃蛇 js

    运用html5的canvas画布和javascript制作的简易贪吃蛇游戏

    canvas实现贪吃蛇小游戏

    html5、canvas、贪吃蛇,小游戏,可演示,制作简单,有说明

    html5贪吃蛇源码

    HTML5贪吃蛇游戏是利用HTML5的Canvas元素和JavaScript编程实现的一款经典小游戏。Canvas是HTML5中的一个核心特性,它允许在网页上进行动态图形绘制。贪吃蛇游戏的实现主要涉及到以下几个关键技术点: 1. **Canvas ...

    贪吃蛇代码html和JavaScript实现

    《贪吃蛇游戏的HTML与JavaScript实现解析》 贪吃蛇游戏,作为一款深受各年龄段玩家喜爱的经典益智游戏,其简洁的规则和无限的挑战性使其在各种平台都有着广泛的应用,包括PC和移动设备。在当今Web技术高度发达的...

    20行代码的贪吃蛇,canvas实现snake.html

    20行代码的贪吃蛇,canvas实现

    HTML5 Canvas贪吃蛇网页游戏.zip

    在这个“HTML5 Canvas贪吃蛇网页游戏”中,我们看到Canvas被用来实现经典的游戏——贪吃蛇。贪吃蛇游戏最早出现在早期的黑白手机上,现在通过HTML5技术,它得以在网页上重现,且具有更高的视觉效果和操作流畅性。 ...

    HTML5 Canvas贪吃蛇特效.zip

    "HTML5 Canvas贪吃蛇特效"是一个利用Canvas API实现的经典游戏——贪吃蛇的示例。这个项目不仅展示了Canvas的基础用法,还融入了jQuery和CSS特效,使得游戏更有趣且易于操作。 Canvas API是HTML5的一个核心特性,...

    贪吃蛇html5版本

    1. HTML5 Canvas:贪吃蛇游戏的图形界面主要通过HTML5的Canvas元素来实现。Canvas是一个可编程的画布,允许开发者使用JavaScript来绘制2D图形。在这个游戏中,蛇的移动、食物的位置以及边界都将在Canvas上动态绘制。...

Global site tag (gtag.js) - Google Analytics