时间戳

首页 > 解决方案 > 从 XML 加载游戏图块数据并使用 jQuery 渲染新图块

javascript - 从 XML 加载游戏图块数据并使用 jQuery 渲染新图块

问题描述

作为一个有趣的项目，我决定尝试用 HTML、CSS 和 JavaScript 创建一个自上而下的 2D 游戏引擎。我已经掌握了基础知识，生成了一个网格并在使用箭头键模拟行走时移动了该网格。作为测试，我只使用了一个精灵作为背景，例如，当向上走时，底行高度从 50 像素动画到 0 像素，同时它在顶部添加了一行，其高度从 0 像素动画到 50 像素。到目前为止，它运行良好并且反应灵敏。

我决定将所有图块数据存储在数据库中，然后使用 PHP 在页面加载时生成 XML 文件，将其存储在 javascript 变量中，然后用于find()获取我需要的数据。每个图块都有纬度和经度，因此我可以搜索与这两个值匹配的图块并提取其他相关信息，例如玩家是否可以走到那里，它需要具有哪种纹理等。

我的 XML：http ://www.nickbetting.nl/bit-engine/test3/createxml.php?id=1

问题是，它非常慢。我决定使用 50x50 像素的 25x15 网格。因此，在初始页面加载时，它必须找到起始的 375 个图块，获取它们的数据并将图块中的图像替换为数据中的图像。此初始加载可能需要 10-20 秒。

然后当我使用箭头键行走时，它将计算需要渲染哪些图块，然后用于find()获取这些图块的数据，创建一个新行并将图块元素附加到与该图块纹理对应的图像。这也需要 1-2 秒，这比在不解析数据和查找信息的情况下步行慢很多倍。

简而言之：

这是我的 JS：http ://www.nickbetting.nl/bit-engine/test3/js/functions.js

这是我的测试： http: //www.nickbetting.nl/bit-engine/test3/

本次测试注意事项：

所以，我的问题。我怎样才能让它更快？有没有更好的方法来存储和查找这样的数据，或者有更好的方法在 DOM 中呈现新的图块？jQuery 对于这样的事情是否太慢了？

任何其他提示也值得赞赏。我知道有可以免费下载的 2D JS 游戏引擎，但我这样做是为了学习。我通常会做这样的项目，看看在没有帮助的情况下我能走多远，并通过遇到新问题来学习新事物。

标签： javascriptjqueryxml

解决方案

如果没有基本上归结为“重写引擎”的建议，很难就此提出任何建议。但是，您正在做的一些事情可以优化；

  1. 使用spritesheet而不是单个图像（这只需要加载一次）
  2. 使用画布。一次编辑多个元素时，操作 DOM会更慢
  3. 只在数据库中存储您需要的数据。例如，图块的 x、y 和 sprite 引用。
  4. 使用 JSON 而不是 xml。

这是关于磁贴引擎、磁贴地图和画布的 MDN的有用链接。

为了解决您关于 find 速度慢的实际问题，这里有一个关于这个的小讨论。

更新：

关于检测可以在哪些瓷砖上行走，您有几个选择。几个流行的是;

  1. 像你已经在做的那样做，并在数据库中存储一个标志
  2. 在您的瓷砖地图中使用两个图层。一层用于渲染精灵，第二层用于指示哪些瓷砖可以/不能在上面行走。讨论这个的参考。如果您想对标题执行其他操作，例如让玩家减速（水）或在行走时伤害玩家（熔岩），这将非常有用。

推荐阅读