《HTML5 2D游戏编程核心技术》——第3章,第3.4节计算帧速率

简介:

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

3.4 计算帧速率
程序清单3.9列出了函数calculateFps()的具体代码,该函数在Snail Bait游戏中用于计算帧速率。
程序清单3.9 计算帧速率
帧速率表示为帧/秒,是一帧除以上一个动画帧和当前动画帧之间的时间间隔来计算的,时间以秒为单位。
对前面算法做一个小小的修改,就可以实现一个帧速率读数器,如程序清单3.10所示。
程序清单3.10 更新snailbaits-fps元素


583cb45b49d143b40bd2bc6f8ff2d127f16cd950

程序清单3.10描述了一个重要的动画技术:以一个特定的速率,而不是动画速率来执行一个任务。如果每个动画帧都更新一次帧速率读数器,读数将变得不可读,因为它会一直改变。因此前面的代码每秒更新一次读数。
拥有了游戏主循环和帧速率后,我们就可以开始编程实现滚动游戏背景。

记住游戏主循环

一定要记住Snail Bait游戏会连续地调用它的许多方法,且频率通常在60帧/秒左右。
如果你忘记了Snail Bait游戏会持续地调用方法这一事实,代码将很难理解。例如,程序清单3.9中lastAnimationFrameTime变量的声明和赋零值仅仅发生一次。但是Snail Bait游戏在每个动画帧都会调用calculateFps(),即Snail Bait游戏第一次调用calculateFps()时,lastAnimationFrameTime的值是零,但是在接下来的调用中,它就不是零了(因为lastAnimationFrameTime的赋值是在calculateFps()中完成的)。

相关文章
|
2月前
|
移动开发 HTML5
html5掷骰子跳棋游戏源码
html5掷骰子跳棋游戏源码
42 1
html5掷骰子跳棋游戏源码
|
8月前
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
|
3月前
|
安全 Windows
在线网页版扫雷游戏HTML源码
在线网页版扫雷游戏HTML源码
54 1
在线网页版扫雷游戏HTML源码
|
4月前
|
JavaScript
基于js和html的骰子游戏
基于js和html的骰子游戏
23 0
|
4月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
38 1
|
4月前
|
前端开发 JavaScript 定位技术
web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏
38 0
|
11月前
|
存储 人工智能 移动开发
HTML5 游戏开发实战 | 五子棋
五子棋是一种家喻户晓的棋类游戏,它的多变吸引了无数的玩家。本章首先实现单机五子棋游戏(两人轮流下),而后改进为人机对战版。整个游戏棋盘格数为 15×15,单击鼠标落子,黑子先落。在每次下棋子前,程序先判断该处有无棋子,有则不能落子,超出边界不能落子。任何一方有横向、竖向、斜向、反斜向连到 5 个棋子则胜利。
23418 8
HTML5 游戏开发实战 | 五子棋
|
5月前
|
存储 JavaScript 索引
基于 HTML+CSS+JS 的石头剪刀布游戏
基于 HTML+CSS+JS 的石头剪刀布游戏
78 0
|
5月前
|
前端开发 JavaScript
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
56 0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
|
8月前
|
Serverless
html 页面中动态计算 div 元素的宽度
html 页面中动态计算 div 元素的宽度
90 2