《Canvas做游戏实践分享》由会员分享，可在线阅读，更多相关《Canvas做游戏实践分享（9页珍藏版）》请在金锄头文库上搜索。
1、HTML5 教程 | 来自 Canvas 做游戏实践分享1.游戏的基本内容1.1 什么是动画? 动画是通过连续播放一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉原理。医学已证明，人类具有视觉暂留的特性，就是说人的眼睛看到一幅画或一个物体后，在 1/24 秒内不会消失。利用这一原理，在一幅画还没有消失前播放出下一幅画，就会给人造成一种流畅的视觉变化效果。因此，电影采用了每秒 24 幅画面的速度拍摄播放，电视采用了每秒 25 幅（PAL 制，中央电视台的动画就是 PAL 制）或 30 幅（NSTC 制）画面的速度拍摄播放。如果以每秒低于 24 幅画面的速度拍摄播放，就
2、会出现停顿现象。? 从播放效果上看，分为顺序动画（连续动作）和交互式动画（反复动作）。逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。1.2 使用 HTML5 来做动画? HTML5 制作的动画主要是逐帧动画。目前主要有 DOM, SVG 与 Canvas 三种方式来实现。在此我们主要讨论 Canvas 方式来制作动画。Canvas 的支持? 到目前为止，基本所有浏览器 的最新版本均提供了对 canvas 的全面支持。基于“渐近增强，优雅降级”的移动互联网应用体验，如果用户使
3、用的浏览器版本较低，可以在 canvas标签中写入信息来提示用户升级浏览器。如：HTML5 教程 | 来自 您的浏览器不支持此动画，请升级您的浏览器?如果要使用编程的方式来检测对于 canvas 的支持程度，可以使用如下代码：if(document.createElement(“canvas”).getContext(“2d”) console.log(“当前浏览器支持 canvas”); 当然，也可以引入第三方的开源 JavaScript 库(http:/ canvas 的浏览器中来模拟 canvas 的各种 API。由于各个设备及浏览器版本的实现方式不同，为了保证用户得到一致的体验，我们需
4、要在尽可能多的设备及浏览器上对我们的游戏进行测试及调优。HTML5 基本文档模板 ? 我们的游戏需要在一个 HTML 文档中的 canvas 标签中渲染，在此我们创建一个最基本的 HTML 文档模板。如下base canvas window.onload = function () ; HTML5 教程 | 来自 简单浏览一下，刚开始我们定义了 HTML5 文档类型，之后定义了 header 标签，引用了外部的 CSS 文件。然后在 body 中定义了一个 canvas 标签来做为我们的游戏渲染容器。在 body标签结束前，我们创建了一个 script 标签，在其中来使用 JavaScript
5、 来实现我们的游戏(之所以在 header 中使用 link 标签来加载外部 css 文件，或在 body 结束标签前再定义 script 标签、引入外部 JavaScript 文件，是为了保证页面的逐步呈现速度，保证浏览器更高效地渲染 HTML页面，提高脚本下载的并行度，参见 Steve Souders 大神的高性能网站建设指南).? 可以看到，在脚本中我们为 window 对象的 onload 事件指定了回调函数，即在所有的文档元素加载完成后，再执行回调函数中的程序。这可以保证 canvas 标签在我们使用之前已经创建成功。当然，如果当前的 HTML 文档中有大量的资源（如图片，音乐等）需
6、要加载，那我们的 window.onload 事件会需要等待很长的时间才能执行，在这种情况下最好是使用脚本来动态加载相应的资源，之后会介绍到相关的知识。其它?随着开发游戏的复杂度增加，我们的代码量及程序复杂度会随之增长，这就需要我们对游戏进行建模，将代码按一定的规则放置在外部脚本文件中引入。同时，游戏开发中一个好的编辑器与调试工具也会得到事半功倍的效果。在此我们使用sublime text2 来做为编辑器，使用 chrome 中的开发人员工具来做为调试工具。?1.3 逐帧动画?HTML5 教程 | 来自 因为 canvas 动画是逐帧动画，所以我们需要有一个循环来控制动画中的每一帧的渲染。而对
7、于每一帧动画的渲染，会按如下序列进行：a. 执行计算当前帧动作的所有代码，将其结果调用 canvas API 放入内存b. 将内存中当前帧渲染到 canvas 容器中c. 进入下一帧的处理流程（通常会在此时擦除画布）在 JavaScript 中，有两个函数 setTimeout 与 setInterval 通常用来进行相关的计时调用。setTimeout 只会执行回调函数一次， setInterval 会每隔 X 毫秒执行函数一次。但这两个函数均不是为开发游戏而生，都存在着一些问题。基于 JavaScript 引擎的计时策略，以及本质上的单线程运行方式，所以其它代码的运行可能会阻塞此线程。因此
8、没法确保 函数会在 setTimeout 指定的时刻被调用。而当回调函数的执行被阻塞时， setInterval 仍然会发布更多的毁掉指令。在很小的定时间隔情况下，这会导致回调函数被堆积起来。所以通常我们不建议使用 setInterval, 而是采用 setTimeout 来替代，最简单的处理回调函数被阻塞的情况就是在回调函数中再调用 setTimeout.( 具体参见JavaScript Garden http:/ ) .但是，随着对动画的流畅度要求提高，如果有大量定时器在同时运行，这些定时器之间的调度会对性能有轻微的影响。一种解决方案就是实现一个采用帧管理的动画框架，通过一个定时器触发动画
9、帧，不同的动画来注册这些帧，在每一帧上处理多个动画的属性变化。这样的好处是减少了定时器调度的开销，但是对于动画框架的开发者来说，统一帧管理、提供监听帧的API 等，都是需要开发和维护的。浏览器厂商目前提供一个专门做动画的方法，即requestAnimationFrame()，从浏览器的层面对帧动画进行了优化，如下代码示例（参见http:/ 。HTML5 教程 | 来自 window.requestAnimFrame = (function() return window.requestAnimationFrame | window.webkitRequestAnimationFrame | w
10、indow.mozRequestAnimationFrame | window.oRequestAnimationFrame | window.msRequestAnimationFrame | function( callback ) window.setTimeout(callback, 1000 / 60); ; )(); (function animloop() requestAnimFrame(animloop); render(); )();?1.4 JavaScript 对象知识? JavaScript 是一个基于对象的语言，它的对象就是一种包含属性的特殊的数据结构，这此属性可以
11、是变量，函数或其它对象。同时 JavaScript 对象可以随时被动态改变。如：?var objectA=; objectA.name=”objectA”;?如果我们需要同时创建同一类型的对象，可以使用构造函数的形式。JavaScript 的构造函数是一种特殊的函数，它可以基于设置给自身的属性来生成对象。在创建了构造函数后，我们就可以使用 new 关键字来生成对象了。如：function Animal(name) this.name=name | “animal”; this.say=function() console.log(this.name); var dog=new Animal(“
12、dog”); dog.say(); var cat=new Animal(“cat”); cat.say();JavaScript 是基于原型的一种语言。在我们创建了一个新的对象实例时，实际是我们是创建了一个对象，这个对象继承了构造函数的原型链（具体参见JavaScript 面向对象编程及HTML5 教程 | 来自 http:/ http:/ ）function Person(name)this.name=name;console.log(this.name); function Student(name,school) Person.call(this,name);this.school=s
13、chool;Student.prototype=new Person(); Student.prototype.constructer=Student;由于 JavaScript 的函数也是一种对象，所以，可以给函数设置属性及方法。比如很多时候我们使用的回调方法等。如：var person=“Jim”,”James”,”Kimmy”; person.forEach(function(o,i) console.log(i+”,”+o); 直接构造 for 循环或者使用 forEach 方法来遍历 Array 的所有元素，在 Array 对象的元素数目很大的情况下，使用 forEach 方法会有效
14、率上的问题。与此类似，在使用 forin 循环来遍历对象的所有属性时，如果对象的原型链嵌套层次比较深，也会导致效率上有问题。(for in 不能遍历出 enumerable 为 false 的属性，如 Array 的 length 属性)。?1.5 用户交互? 游戏的核心在于用户交互性，用户交互是基于事件的。事件包括监听器及事件处理。在canvas 上绘制的图形自身不支持 DOM 事件检测，只有 canvas 标签自身支持 DOM 整件监听。因此需要对 canvas 容器的事件进行处理，实现相对事件监听及处理。HTML5 教程 | 来自 ? 按 W3C 的规范 http:/www.w3.org/TR/DOM-Level-3-Events ，我们可以为对象注册事件，如下：element.addEventListener(type, handler , useCapture);?一个典型监听鼠标点击的事件如下：canvas.addEventListener(mousedown, function (event) console.log(“Mouse pressed on element!“); , false);换句话说，每一个对象都订阅了指定的事件触发事件，在该事件触发时，会将此信息广播给所有订阅其信息的对象，此对象再调用对应的事件触发回调函数来进行处理。如果我们想
