《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
`

相关文章
|
8月前
|
移动开发 HTML5
html5掷骰子跳棋游戏源码
html5掷骰子跳棋游戏源码
146 1
html5掷骰子跳棋游戏源码
|
8月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
358 0
|
6天前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
38 22
|
2月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
73 11
|
3月前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中,`<form>`元素具备自动完成功能,可根据用户历史输入提供建议,提高输入效率并改善体验。默认情况下,浏览器会自动开启此功能,也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段,如`<input>`,同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入,在用户再次访问相同表单时提供相应的自动完成建议。
|
4月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
WK
|
4月前
|
存储 移动开发 API
哪些功能是HTML5的新增功能
HTML5作为HTML的最新版本,引入了许多新的功能和特性,这些功能极大地丰富了网页的表现力和交互性。以下是HTML5的一些新增功能:
WK
77 2
|
4月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
48 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
|
4月前
|
存储 文字识别 前端开发
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能