《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找到它。

相关文章
|
1月前
|
移动开发 HTML5
html5掷骰子跳棋游戏源码
html5掷骰子跳棋游戏源码
37 1
html5掷骰子跳棋游戏源码
|
7月前
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
|
4月前
|
前端开发 JavaScript 安全
【网络安全/前端XSS防护】一文带你了解HTML的特殊字符转义及编码
【网络安全/前端XSS防护】一文带你了解HTML的特殊字符转义及编码
155 0
|
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来制作一款拳皇游戏
36 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 创建响应式可过滤的游戏+工具展示页面 ❤️