JavaScript平台游戏引擎的大厅

分享于 

10分钟阅读

Web开发

  繁體
TomsHalls_v2.jpg

版本 3.0,2010年04月

汤姆的大厅版本 3.0基本上是游戏- 字面上来说,因为现在有一个游戏会序列。 游戏明智的游戏区域已经增加到 41个屏幕,各种新的复古画家做出了一个外观和修改。

从技术角度看,我花了时间给"应用程序"一个完整的优化修改:

  • 以前存在许多全局变量和函数。 现在几乎所有东西都被合并成一个名为 game的对象文本。 以前是 instantiatable"类"的Viewport 现在是 game的属性,它拥有自己的子属性。 我决定只有一个 game 和一个固定维度的Viewport,我也可以相应地优化和简化事件。 我认为 instantiatable Player 也是 game的一个属性,但选择不要大而复杂,并且可以使 game 对象无法管理。
  • 现在,诸如 Player的宽度和高度以及之类的各种以前可以配置的属性都是硬编码的。 这消除了大量的对象遍历,并显著地加快了速度。 这是为了牺牲代码的可读性。 例如" + this.player.width"比" + 32"提供更多的指示,但需要。
  • 使用本地缓存和 比如 消除了许多不必要的连续对象遍历 var v = this.game.viewport;
  • 以前我的setInterval 调用做的是隐式 evals,比如
    gLoopInterval = setInterval('loop()', gLoopIntervalMs);

    现在已经变成了:

    this.loopInterval = setInterval(function () { game.loop(); }, 12);

永久感谢crockford的http://jslint.com/工具,这让我在这一时间变得更加健壮高效。

浏览器行为

在我的中间specced笔记本电脑上,汤姆在 Firefox 3.6,Chrome 4.1和 Opera 9.62平稳地运行。 它在IE8中非常慢,比IE7慢得多。 我还没有在Mac上测试 v3.0.

TomsHalls_v2.jpg

版本 2.0,2008年11月

我发现了一个更完整的游戏,我 finally 发现了这样做的时间。 结果是 tom,你可以在 www.tomshalls.net的网站上播放。 你现在可以探索大量的dastardly房间,它的中包含最终奇怪的幽默和 private。 警告 !

技术更改和改进

  • 改进的播放机物理,碰撞检测和sprite交互算法
  • 添加收藏项。如果不在viewport中添加全局唯一 id,而在元素 array 中添加,则每个屏幕脚本都会添加它的收藏项,这将添加到每个屏幕项。
  • 优化了所有循环,array 查找等。
  • 调整了总体"对象模型",并重新排列了方法。
  • 改进了图形,同时保留了 quasi-8-bit quaintness。
  • 预加载图像。
  • 如果可能的话,使用CSS定义用于元素的inline 样式的数量,如果不需要改变 background 图像或者sprite大小的变化,那么 比如 就不存在了。
  • 在信息面板区域中替换了所有的InnerHTML用法,使用适当的DOM方法。

使用 Chrome的观察

自最初推出以来,Chrome 浏览器已经出现在场景中。 我与 Chrome的发现非常类似于在最初的开发过程中使用 Opera的结果: 对 Chrome的优化显然并不适用于这种类型的应用程序。 Firefox 和IE7相比,DOM访问的速度慢且不规则。 Chrome 还有一个烦人的习惯,在首次加载页面之后,重新装载或者重新构建 DOM,有效重新设置游戏。 finally,使用动态不透明度甚至在屏幕上的单个小画面上,大幅度减慢整个屏幕。 因为这个原因我把我的原始方法放在闪烁的collectables上,这样它们就会顺利地跳出来,选择 80的风格。

Screenshot - TomsHallsGame

介绍

使用 JavaScript DOM操作和CSS开发一个简单 2D 平台游戏引擎的学习项目。 我的主要目的是对以下内容进行 upskill:

  • JavaScript,特别是Prototype继承
  • DOM操作
  • 基于W3C标准的标记

我选择开发代码,而不是构建第三方库,部分原因是学习这些库的原因。

用 DOM,Luke

DOM div 元素用来表示这两个 static 房间项目,比如墙和梯子,还有运动员和"魔鬼玩家"怪物。 动画是通过修改 divstyle的左和顶部属性来实现的,这些属性及它的className 属性的属性更改 direction。

在碰撞检测的最初方法中,通过查询 lefttopwidthheight 属性的属性来直接检查元素和维度的每个DOM位置。 然而,这种方法非常慢,特别是当游戏区域变得非常复杂时,部分原因是在XHTML严格非零属性值必须包含单元( 比如 )的情况下。 200px ),我必须使用笨糙的string 操作去除单元,然后将数学应用于它的余值。

因此,我选择创建 Element 类,"换行"元素,实例化时存储它的位置。维度和其他有用属性,并将它的基础DOM元素属性添加到视图。 每个 Element 还包含子 Element的array,最上层是 Viewport,它本身是一个从 Element 中继承的类。 通过迭代 Viewport的子 Element 并测试感兴趣的"坚固型"。比如 实体( 墙壁,地面 等等 ) 或者 climbable ( 梯子,绳索 等等 )的每个 Element,可以实现碰撞检测。

游戏循环

15ms 间隔用于调用主游戏循环,该循环执行以下操作:

  • 移动子画面
  • 检查播放机是否已经被销毁
  • 将物理应用于玩家 比如 重力,跳跃和运动力

屏幕定义和加载

在这一阶段,"整个游戏"( 它的所有屏幕) 发生在一个XHTML页面( Default.htm ) 中。 每个游戏屏幕都在它自己的JavaScript文件中定义,由 XY 坐标。比如 screen_2_1.js 命名。 当播放机进入新屏幕时,将发生以下情况:

  • 游戏循环暂停
  • 除播放机外,Viewport的所有子 Element 均被移除
  • Element array的Viewport 子进程被初始化
  • 屏幕文件的当前JavaScript从文档头动态删除
  • 屏幕文件的新JavaScript动态地附加到文档头
  • new类脚本通过 Viewport 类中的便捷方法( 比如 addElevator ) 将子 Element 添加到 Viewport
  • 新的屏幕脚本开始游戏循环

这种方法意味着在技术上可以添加多个新屏幕,而不需要改变主引擎,或者( 我希望) 增加内存量。 我承认我没有深入分析浏览器内存,因为JavaScript文件被链接并且被删除了DOM元素。 我想这取决于垃圾 Collection 如何实现( 或者不)。 我希望有任何关于这个领域的专家的消息。

W3C标准和浏览器行为

我非常高兴能够使这个游戏能够作为 XHTML ( 1.0 ) 严格的验证,所有的JavaScript都无法连接。 它被测试并在 Firefox的。Opera 和 IE 7中工作。 我实际上在 IE 6 ( 经过几次CSS攻击,pained greatly我) 中工作,但是放弃了工作,并且尚未预览 IE 6的最新版本。 它不是商业"站点",目的是要基于标准的方法,而不是绝对地最大化兼容性。 因此,我很高兴我不会引入条件浏览器评论的混乱或者任何进一步的CSS攻击。

关于浏览器性能的一点说明是,尽管我的经验是 Opera,但是对于javascript操作,当javascript操作DOM元素时,它似乎是最慢的浏览器,它看上去是最慢的。 它似乎会随着移动精灵数量的增加而显著降低。 我刚升级到版本 9.25,它比以前的版本更快,但它仍然比 Firefox 和 IE 7更为困难。

结束语

当我的工作领域不涉及任何类型的游戏开发时,我通过这个项目获得了更多的理解。 希望这些方法对其他人有帮助。 我没有声称这个代码是完美的,因为它的大部分是对我来说很新的 ! 评论和有帮助的批评非常有用。


相关文章