《HTML5 2D游戏编程核心技术》——第1章,第1.3节特别功能

简介: 本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第1章,第1.3节特别功能,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。 1.3 特别功能 Snail Bait游戏有3个特别的功能,既能为游戏带来加分,又能让游戏测试更加便捷,它们分别是: 开发者后门 时间系统 粒子系统 当你按下Ctrl+D组合键时,Snail Bait游戏就会显示开发者后门,如图1.11所示。

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

1.3 特别功能

Snail Bait游戏有3个特别的功能,既能为游戏带来加分,又能让游戏测试更加便捷,它们分别是:
开发者后门
时间系统
粒子系统
当你按下Ctrl+D组合键时,Snail Bait游戏就会显示开发者后门,如图1.11所示。当开发者后门处于可见状态时,你可以通过控制游戏时间流逝的速率来缓慢地运行游戏,以便观察游戏中诸如碰撞检测这样的事件是如何发生的。反过来,你也可以加速运行游戏,从而获得游戏的最佳运行速率。
你可以打开碰撞矩形以便更好地观察碰撞是如何发生的;如果烟雾孔阻碍了你的视野,你可以通过不选烟雾的复选框来关掉烟雾。你也可以调节Snail Bait游戏中显示游戏运行缓慢提示板的阈值,如图1.8所示


889791a5a1966fb740527d0385017b149417a553

或者你也可以完全关掉它,这样你就可以在没有阈值限制的前提下,测试慢帧的速率。
当测试游戏的某个特定内容时,你可以避免运行之前的游戏内容。除了游戏canvas元素顶部的控制键之外,开发者后门还在canvas元素的底部显示了一个尺子,用于显示背景水平滚动的像素点数。
你可以通过设置这些值以便在一个指定的水平位置上重启游戏,这样可以避免重新运行之前的游戏。为了方便,在开发者后门可见的情况下,你可以简单地拖曳游戏,包括背景和所有的sprite对象,来改变跑步小人的水平位置。
开发者后门可以让你在游戏中通过Snail Bait游戏的时间系统控制时间流逝的速率。在Snail Bait游戏中发生的所有事件都依赖于当前的游戏时间,在游戏启动时,时间就开始流逝;例如,当跑步小人开始跳跃时,游戏记录当前的时间,之后通过跳跃序列一帧一帧地移动跑步小人,帧数依赖于跑步小人开始跳跃之后有多少时间流逝。

图1.11 Snail Bait的开发者后门


be860b51d89f48705fb018c75576266d4c6b4a6b

Snail Bait游戏默认的时间模式是使用真实时间代表游戏时间。但是Snail Bait游戏的时间系统也可以不使用真实时间;例如,时间系统可以持续地使用真实时间的一半,这样游戏运行的速率就会降为原来的1/2。
除了可以让你控制游戏时间流逝的速率之外,Snail Bait游戏的时间系统也是一些特效的源泉。当跑步小人撞到一个坏家伙并爆炸时,Snail Bait游戏会在转换下一条生命时放缓时间。一旦转换完成,Snail Bait游戏就将时间恢复正常,游戏重新开始。
最后,Snail Bait游戏使用两个粒子系统来在背景中完成烟雾和火焰特效。在第16章,我们将进一步学习粒子系统,你可以在完成学习后创造出类似的特效来。
既然你已经对该游戏有了深层次的理解,接下来让我们看一看代码。
Snail Bait游戏的代码统计(代码行数)
`JavaScript:5230
CSS:690
HTML:350
Snail Bait游戏的代码详述
snailbait.js:3740
JavaScript支持代码:1500
sprite对象初始化数据:500
创建sprite对象:400
sprite对象的行为实现:730
事件处理:300
用户交互:225
声音:130
`

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