基于javascript 2d tile的游戏渲染（terraria风格）

Question

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

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

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

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

将fillStyle设置为黑色。 循环遍历宽度和高度/ 16并创建x量的rect（）。 填写所有的rects。 绘制播放器（使用不同颜色的图像或其他矩形）。

哪种方法很好，我可以很好地渲染它。但它比我想要的要长很多。如果我用它来渲染，我会得到.4FPS。所以我想知道的是，我如何才能有效地渲染一个延伸到视口区域的基于2D图块的地图？

我不想要理论，我知道这些概念。我需要帮助了解如何实现这些概念。有些准确有效地执行此操作的代码非常棒。

编辑：

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

Answer 1

如果你渲染了整整一件事，你会得到更少的滞后。 可能在整个地图中有16x16网格可以保存，然后根据需要整体渲染？ 您可以在修改它们以及它们第一次出现时（重新）渲染它们。

Answer 2

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