基于 javascript 2d 平铺的游戏渲染（泰拉瑞亚风格）答案

【问题标题】：javascript 2d tile based game rendering (terraria-style)基于 javascript 2d 平铺的游戏渲染（泰拉瑞亚风格）
【发布时间】：2013-11-17 05:24:51
【问题描述】：

我过去制作过泰拉瑞亚克隆。我发现它们作为一个项目非常有趣。但是随着泰拉瑞亚的 1.2 更新，我想要一个可以随时随地在任何计算机上运行的克隆。所以我正在使用 HTML5。

起初，我认为它会很简单 - 就像过去我使用的其他语言一样。

但是一旦我进入它，我就开始面临很多问题。我没有任何代码可以分享，因为我已经全部删除并再次尝试了无数次。我只能在我的网站上实时进行编辑，所以当我想再试一次时，我要么完全创建一个新页面，要么只编辑我当前拥有的页面。由于缺乏无限存储空间，我编辑了我目前拥有的页面。

我尝试过的一些伪代码是这样的：

将填充样式设置为黑色。循环通过宽度和高度/16 并创建 x 数量的 rect()。填写所有矩形。绘制玩家（使用图像或其他颜色的矩形）。

效果很好，我可以很好地渲染它。但这比我想要的要长得多。如果我用它来渲染，我会得到大约 .4FPS。那么我想知道的是，如何才能有效地渲染一个基于 2d 瓦片的地图，该地图可以有效地延伸到视口区域之外？

我不想要理论，我知道概念。我需要帮助理解如何实现这些概念。看到一些准有效地执行此操作的代码会很棒。

编辑：

我只能实时进行编辑，因为我使用的是 chromebook。我没有选择使用文本编辑器，然后在文件完成后上传文件。

【问题讨论】：

【解决方案1】：

如果您将整个内容渲染一次，那么您将获得更少的延迟。也许整个地图中有 16x16 的网格可以保存，然后根据需要作为一个整体呈现？当它们被修改和首次出现时，您可以（重新）渲染它们。

【讨论】：

在过去的一个月里，我已经设法在 Javascript 中稍微有效地做到了这一点，但我仍然无法弄清楚如何在地图上移动相机，我被限制在了范围内当前的视口。没关系，我可以在这里完成很多物理/逻辑。但我确实想要一个可滚动的游戏。嗯，我可能会弄明白。 :P
在这方面超级晚了，但你可以使用名为 transform(xOffset, yOffset) 的画布方法来“移动”这些东西。

【解决方案2】：

我也为类似的游戏做了这个。我注意到的一件事是使用非常大的地图，再次绘制整个背景需要很长时间。相反，制作多个画布元素并且只绘制一次背景。然后使用另一个画布在其上绘制玩家和敌人（以及其他非静态图块）。

【讨论】：