《HTML5 2D游戏编程核心技术》——第2章,第2.5节缩短编码周期

简介:

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

2.5 缩短编码周期
JavaScript是一种解释型语言,因此在代码改变时不需要重新编译。这意味着改变代码后,通过简单的刷新浏览器就可以使用更新后的代码来重新开始你的游戏。
然而,当你在编辑器中完成代码修改,需要刷新浏览器时,意味着你必须从编辑器切换应用程序到浏览器来刷新页面。一般来说,你可以使用按键或者通过鼠标点击来实现。假若你的代码存在错误或者没有完成需要的功能,你将不得不切换回编辑器进行代码修改。
如果一天之内在应用程序和刷新浏览器之间切换几十次,那么效率会很低。如果浏览器能够在你更改编辑器内的代码时自动刷新,将会极大地提高你的编码效率,相应地,会让你在更短的时间内完成游戏。
使用Ruby脚本,在编辑代码时不用离开编辑区,浏览器会自动刷新,如图2.21所示,它可以监控一个目录里的所有文件。当目录中的任何文件发生改变时,Ruby脚本会自动更新具体的浏览器窗口。你只需在浏览器窗口地址栏中指明目录和文本(正则表达式),接下来的工作交给Ruby脚本去做就可以了。
通过图2.21所示的Ruby脚本(或者类似的工具),在编写代码时,你不再需要离开编辑区。当你每次保存编辑区的更改时,Ruby脚本会自动更新你指定的浏览器窗口。

图2.21 用于监控文件的Ruby脚本


b6509592d2fc80684cf3eeb147cc8979406bdf39
缩短编程周期的好处

当你修改游戏玩法,保存编辑区中的代码时,自动刷新浏览器的益处不大,这是因为你必须要从编辑区切换到浏览器,才能检测你的修改情况。自动刷新浏览器仅仅让你少按了一次刷新页面的按键。
如果你修改游戏的其他方面,例如,游戏的载入画面,在你的游戏自动加载后,你可以不必离开编辑区就查看浏览器中的改变。
当你在使用CSS时,自动刷新浏览器将会给予你很大的帮助。你可以改变CSS,然后立即观察到浏览器中的变化,不需要离开编辑器,这使得快速调整游戏的CSS变得很容易。

Chrome Live Reload扩展包

Chrome有一个免费的名为Live Reload的扩展包,也可以监控文件并刷新浏览器窗口。你可以在http://bit.ly/1ojCxVq找到它。

相关文章
|
移动开发 HTML5
html5掷骰子跳棋游戏源码
html5掷骰子跳棋游戏源码
743 1
html5掷骰子跳棋游戏源码
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
|
编解码 移动开发 JavaScript
html页面播放视频编码是265的m3u8的流媒体地址
html页面播放视频编码是265的m3u8的流媒体地址
639 0
|
6月前
|
移动开发 JavaScript 前端开发
HTML5最新经典俄罗斯方块游戏插件
HTML5最新经典俄罗斯方块游戏插件
|
9月前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
332 22
|
12月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
前端开发 JavaScript 安全
【网络安全/前端XSS防护】一文带你了解HTML的特殊字符转义及编码
【网络安全/前端XSS防护】一文带你了解HTML的特殊字符转义及编码
884 0
|
移动开发 前端开发 程序员
程序员必知:基于HTML5堆木头游戏
程序员必知:基于HTML5堆木头游戏
78 0
|
JavaScript 前端开发 开发者
html编码
【4月更文挑战第30天】html编码
130 2
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
156 0