ICanvas做游戏实践分享.docxVIP

Canvas做游戏实践分享1.游戏的基本内容1.1什么是动画????? 动画是通过连续播放一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉原理。医学已证明，人类具有视觉暂留的特性，就是说人的眼睛看到一幅画或一个物体后，在1/24秒内不会消失。利用这一原理，在一幅画还没有消失前播放出下一幅画，就会给人造成一种流畅的视觉变化效果。因此，电影采用了每秒24幅画面的速度拍摄播放，电视采用了每秒25幅（PAL制，中央电视台的动画就是PAL制）或30幅（NSTC制）画面的速度拍摄播放。如果以每秒低于24幅画面的速度拍摄播放，就会出现停顿现象。??????? 从播放效果上看，分为顺序动画（连续动作）和交互式动画（反复动作）。逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。1.2使用HTML5来做动画??????? HTML5制作的动画主要是逐帧动画。目前主要有DOM, SVG与Canvas三种方式来实现。在此我们主要讨论Canvas方式来制作动画。Canvas的支持???????到目前为止，基本所有浏览器?的必威体育精装版版本均提供了对canvas的全面支持。基于“渐近增强，优雅降级”的移动互联网应用体验，如果用户使用的浏览器版本较低，可以在canvas标签中写入信息来提示用户升级浏览器。如：canvas您的浏览器不支持此动画，请升级您的浏览器/canvas?如果要使用编程的方式来检测对于canvas的支持程度，可以使用如下代码：if(document.createElement(“canvas”).getContext(“2d”)){ console.log(“当前浏览器支持canvas”); }当然，也可以引入第三方的开源JavaScript库(/p/explorercanvas/),在不支持canvas的浏览器中来模拟canvas的各种API。由于各个设备及浏览器版本的实现方式不同，为了保证用户得到一致的体验，我们需要在尽可能多的设备及浏览器上对我们的游戏进行测试及调优。HTML5基本文档模板????????? 我们的游戏需要在一个HTML文档中的canvas标签中渲染，在此我们创建一个最基本的HTML文档模板。如下!doctype html html head meta charset=utf-8 titlebase canvas/title link rel=stylesheet type=”text/css” href=style.css /head body canvas id=canvas width=400 height=400/canvas script type=”text/javascript” window.onload = function () { }; /script /body /html简单浏览一下，刚开始我们定义了HTML5文档类型，之后定义了header标签，引用了外部的CSS文件。然后在body中定义了一个canvas标签来做为我们的游戏渲染容器。在body标签结束前，我们创建了一个script标签，在其中来使用JavaScript来实现我们的游戏(之所以在header中使用link标签来加载外部css文件，或在body结束标签前再定义script标签、引入外部JavaScript文件，是为了保证页面的逐步呈现速度，保证浏览器更高效地渲染HTML页面，提高脚本下载的并行度，参见Steve Souders大神的《高性能网站建设指南》).????? 可以看到，在脚本中我们为window对象的onload事件指定了回调函数，即在所有的文档元素加载完成后，再执行回调函数中的程序。这可以保证canvas标签在我们使用之前已经创建成功。当然，如果当前的HTML文档中有大量的资源（如图片，音乐等）需要加载，那我们的window.onload事件会需要等待很长的时间才能执行，在这种情况下最好是使用脚本来动态加载相应的资源，之后会介绍到相关的知识。其它?随着开发游戏的复杂度增加，我们的代码量及程序复杂度会随之增长，这就需要我们对游戏进行建模，将代码按一定的规则放置在外部脚本文件中引入。同时，游戏开发中一个好的编辑器与调试工具也会得到事半功倍的效果。在此我们使用?sublime text2?来做为编辑器，使用?chrome?中的开发人员工具来做为调试工具。?1.3 逐帧动画?因为?canvas?动画是逐帧动画，所以我们需要有一个循环来控制动画中的每一帧的渲染。而对于每一帧动画的渲染，会按如下序列进行：a.?执行计算当前帧动作的所有代码，将其结果调用?canvas API?放入内存b.