1.达内教育

2.中公IT

3.火星时代

4.千锋教育

5.天琥教育

6.汇众教育

7.鹰空教育

8.博雅环球教育

9.新科教育

10.仑智教育

WEB前端培训之David Geary对HTML5 的 2D 视频游戏详细剖析思路三

4、html 游戏进入循环

分析：既然图形和动画的先决条件已经得到满足，那么现在是时候让 Snail Bait 动起来了。首先，我在游戏的 HTML 中让requestNextAnimationFrame()包含 JavaScript。startGame() 函数由背景图像的 onload 事件处理器调用，该函数通过调用 requestNextAnimationFrame() polyfill 启动游戏。在绘制游戏的第一个动画帧时，浏览器会调用 animate() 函数。

5、计算 fps 并更新 fps 元素及滚动背景并设置背景位移

分析：帧速率只是自上一个动画帧开始计算的时间量，所以您也可以认为它是 frame per second（帧每秒）而不是 frames per second（每秒的帧数），这使得它不太像是一个速率。您可以采用更严格的方法，在几个帧中保持平均帧速率，但我还没有发现这样做的必要性，事实上，自最后一个动画帧起所用的时间就正是我在 基于时间的运动 中所需要的。

执行任务的速率不同于动画速率。如果我在每一个动画帧都更新帧/秒值，则无法读取速率，因为它总是在不断变化；我将该设置改为每秒更新一次。设置好了游戏循环和帧速率之后，我现在就准备开始滚动背景了。setBackground() 函数在水平方向平移画布上下文 -backgroundOffset 像素。如果 backgroundOffset 是正数，那么背景会向右侧滚动；如果它是负数，那么背景会向左侧滚动。

在平移背景之后，drawBackground() 绘制了两次背景，然后将上下文平移回它在调用 drawBackground() 之前的位置。

一个看似琐碎的计算仍然保留：计算 backgroundOffset，这决定了为每个动画帧将画布的坐标系统平移多远。虽然该计算本身确实是琐碎的，但它具有重要的意义，所以我接下来将会讨论它。

6、设置背景位移、设置背景位移及draw() 函数

分析：draw() 函数设置了平台速度，并为背景和平台设置了位移。然后，它绘制背景、跑步者和平台。Snail Bait 的游戏循环。该循环包括一个 animate() 函数，在需要绘制游戏的下一个动画帧时，浏览器会调用该函数。然后，该 animate() 函数调用一个 draw() 函数来绘制下一个动画帧。

David Geary简介 ：他是 JSTL 1.0 和 JSF 1.0/2.0 专家组的成员，他还是 GWT Solutions 一书的作者。David 经常在各大会议和用户组发表演讲。是作家、演讲家以及顾问，也是 Clarity Training, Inc. 的总裁，他指导开发人员使用 JSF 和 Google Web Toolkit (GWT) 实现 Web 应用程序。与人合作编写了 Sun 的 Web Developer 认证考试的内容，并且为多个开源项目作出贡献，包括 Apache Struts 和 Apache Shale。David 的 Graphic Java Swing 一直是关于 Java 的畅销书籍，而 Core JSF（与 Cay Horstman 合著）是关于 JSF 的畅销书。他从 2003 年开始就一直是 NFJS tour 的定期演讲人，并且在 Java University 教授课程，三次当选为 JavaOne 之星