《HTML5 2D游戏编程核心技术》——第3章，第3.8节绘制动画帧

本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第3章，第3.8节绘制动画帧，作者［美］ 戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.8 绘制动画帧
3.3节介绍了Snail Bait游戏的主循环。该循环包含了一个animate()函数，浏览器会在绘制下一个动画帧时调用这个函数。animate()函数会依次调用draw()函数绘制下一个动画帧。在本开发阶段中，draw()函数的代码如程序清单3.17所示。
程序清单3.17 draw()函数

draw()函数首先设置背景的偏移量，然后绘制背景、跑步小人和平台。draw()函数调用的所有方法都已经在本章中介绍过。
既然我们已经了解了Snail Bait游戏是如何使用基于时间的运动来滚动背景的，接下来就让我们看一看它如何滚动游戏中的平台。

基于 HTML5 Canvas 的简易 2D 3D 编辑器 不管在任何领域，只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的，今天我们不需要 3dMaxs 等设计软件，直接用 HT 就能自己写出一个 2D 3D 编辑器，实现这个功能我觉得成就感还是爆棚的，哈哈！只要你会想，能做，就能根据这个编辑器延展成 big thing！ 本例地址：http://www.
基于HTML5 Canvas 点击添加 2D 3D 机柜模型 今天又返回好好地消化了一下我们的数据容器 DataModel，这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。
《HTML5 2D游戏编程核心技术》——导读 本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的目录，作者［美］ 戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。