开发者社区> 华章计算机> 正文

《HTML5 2D游戏编程核心技术》——第3章,第3.3节实现游戏主循环

简介:
+关注继续查看

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

3.3 实现游戏主循环
既然我们已经具备了绘制图形和动画这个先决条件,现在就可以让Snail Bait游戏动起来了。在一开始,我们会在Snail Bait游戏的HTML文件中为requestNextAnimationFrame()函数添加一段JavaScript代码,如程序清单3.7所示。
程序清单3.7 HTML


53998d50d6d9b2e6df415ad683d6a66a734a921a

程序清单3.8列出了游戏动画循环的开始阶段代码,一般称为游戏主循环。
程序清单3.8 游戏主循环


fb7a8bd2f113b2520b2ff493e694006896f88221


873919f1b39dfba5fa2af3adb7b9e64949e9b0d1

背景图像的onload事件处理程序调用startGame()函数,该函数通过第一次调用request-NextAnimationFrame()的polyf?ill实现来启动游戏。然后,到了绘制游戏第一个动画帧的时候,浏览器将会调用animate()函数。
animate()函数调用calculateFps()函数,使用当前时间值来计算动画的帧速率(阅读3.2.1节了解更多关于时间值的信息)。在计算完帧速率后,animate()函数调用draw()函数绘制下一个动画帧。然后,animate()函数调用requestNextAnimationFrame()函数维持动画。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《HTML5游戏编程核心技术与实战》一2.5 绘制文字
canvas中除了可以绘制图形图像外,还可以绘制文字,同时也可以指定文字的字体、大小、对齐方式以及填充文字的纹理。
1285 0
《HTML5游戏编程核心技术与实战》一2.4 坐标变换
在绘制图像的过程中,经常可能需要对图像进行旋转、缩放等变形处理,canvas也提供了一系列的API帮助我们完成这些操作。
1474 0
《Java 2D游戏编程入门》—— 1.1 使用FrameRate类
FrameRate类位于javagames.util包中。本书中所开发的工具代码都会放到这个工具包中,随后,我们将把这个包变成一个工具库。这个类用来测量本书中所开发的应用程序的每秒的帧数(frames per seconds,FPS)。
1879 0
《JavaScript高效图形编程(修订版)》——第6章 HTML5画布 6.1 画布的支持
大部分流行的浏览器都支持画布元素,包括Firefox、Chrome、Opera和Safari。2010年7月1日,微软通过IE9开发博客宣布其最新的浏览器会支持画布。事实上,该公司甚至为画布支持提供了硬件加速。
1138 0
《HTML5游戏编程核心技术与实战》一2.6 其他全局属性
在context中还有一些常见的全局属性,做一些了解。
1141 0
《HTML5游戏编程核心技术与实战》一2.3 图像API
除了绘制常用的图形以外,canvas提供了一系列的API能够对图像进行操作,常见的图像API有以下3个方法。
1256 0
《Java 2D游戏编程入门》—— 第1章 Hello World
大多数编程图书的第1章是创建一个Hello World应用程序,它执行一个简单的函数以确认一切都能工作。最简单的计算机游戏是一个黑色背景的窗口,还有一个紧凑的while循环,它负责尽可能快地清除屏幕并且重新绘制黑色的背景。
1562 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载