Javascript 从XML加载游戏磁贴数据并使用jQuery呈现新磁贴

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

我决定将所有磁贴数据存储在数据库中，然后使用PHP在页面加载时生成一个XML文件，将其存储在javascript变量中，然后使用

find（）

获取所需的数据。每个磁贴都有一个纬度和经度，所以我可以搜索匹配这两个值的磁贴，并提取其他相关信息，比如玩家是否可以走到那里，它需要什么纹理，等等

我的XML：

---

问题是，速度太慢了。我决定使用25x15网格的50x50px瓷砖。因此，在初始页面加载时，它必须找到起始的375个磁贴，获取它们的数据，并将磁贴中的图像替换为数据中的图像。这个初始负载可能需要10-20秒

然后，当我使用箭头键漫游时，它将计算需要渲染的平铺，然后使用

find（）

获取这些平铺的数据，创建新行，并将与该平铺纹理对应的图像附加到平铺元素。这也需要1-2秒，这比不解析数据和查找信息的步行慢很多倍

简言之：

• 我通过ajax提取XML
• 我将该XML作为XMLdocument保存到变量中
• 我根据繁殖位置计算需要加载哪些磁贴
• 我使用

  find（）

• 行走时，我在行走方向添加一行或一列瓷砖，并在相反方向删除一行或一列瓷砖
• 在遍历这些新磁贴时，还将使用

  find（）

  从存储在var中的XML中获取每个磁贴的数据

这是我的JS：

这是我的测试：

本试验的注意事项：

• 我不是在复制塞尔达，那只是一些占位符艺术
• 向上走将从XML中获取平铺数据
• 在任何其他方向行走都只会加载空的草地方块，而不会查看XML数据
• 向上走是它应该如何工作的，其他方向只是比较加载数据所需的时间

---

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

---

任何其他提示也将不胜感激。我知道有免费的，随时可以下载2D JS游戏引擎，但我这样做是作为一种学习经验。我通常做这样的项目是为了看看我在没有帮助的情况下能走多远，并通过遇到新问题来学习新东西。

如果没有“重写你的引擎”的基本建议，就很难就此提出任何建议。然而，你正在做的一些事情是可以优化的

使用而不是单个图像（只需加载一次）

使用画布。一次编辑多个元素时速度较慢

只在数据库中存储所需的数据。例如，平铺的x、y和精灵引用

这里有一个有用的链接

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

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

按照您已经执行的操作，并在数据库中存储此操作的标志

在tilemap中使用两个图层。一层用于渲染精灵，第二层用于指示哪些瓷砖可以/不能在上面行走。如果你想用标题做其他事情，比如让玩家慢下来（水）或者在行走时伤害玩家（熔岩），这很有用

---

谢谢你，这肯定很有帮助。我现在使用单独图像的唯一原因是出于测试目的，我认为仅仅这两个图像不会产生太大的影响。或者问题在于使用img标记而不是CSS背景图像？我会看看画布，我知道它更好，但它对我来说仍然是骗人的，这就是为什么我尝试这样做。如果只存储x、y和sprite，我将如何获得“我可以在这块瓷砖上行走”之类的数据？最后但并非最不重要的一点是，从您链接的帖子来看，JSON似乎是一个更好的候选者。他们看起来和我差不多。再次感谢@s1h4d0w无论哪种方式都应该缓存图像，这通常只是dom操作。是的，canvas的学习曲线更高，但绝对值得。我的意思是只储存你需要的东西。更新了答案，涵盖了您评论中的其他要点。谢谢，我接受了您的答案，因为我目前创建它的方式可能没有修复程序。对于行走，我想实现它，就像“如果玩家向上行走，在坐标为curLat的平铺上检查

walk==true

（curLng-1）然后从XML或JSON获取数据。但我想第一步是熟悉画布。最后，我希望每个瓷砖都有多个层，有背景，可能是一些草或建筑的一部分。我想我应该创建一个div作为瓷砖，将图像放在其中，并将它们设置为

位置：绝对；

以使它们看起来更像rlap。您至少可以隐藏症状。尝试在每一侧渲染更多的列，在顶部和底部渲染比实际需要更多的行。在视口外部渲染这些列，用户不会注意到图像弹出。或者，将所需的所有图像逐个加载到屏幕外的文档中