javascript - 将静态数据存储在图像而不是数组中是否有任何优势？

Question

我正在开发一个涉及世界地图的 Javascript 游戏，并将该 map 绘制/存储为图像。图像上每个像素的颜色代表 map 上该单元格将包含的内容。

加载图像并即时读取颜色，而不是预加载并将其存储为数组，是否有任何内存消耗优势？

此外，这样做可能会导致速度严重下降吗？

我最终可能会根据需要仅加载其中的一部分，但同样的问题仍然存在。当前测试图像为1000x1000像素。

Answer 1

没有。没有，除非您关心绘制图像而不是手写数千个数字。

从图像中检索数据的最快方法是获取“类似图像的对象”(基本上是 Canvas 或实际图像)并调用 .getImageData(x, y, width, height) 来获取像素值数组。

如果有的话，这会增加“”“开销”“”(可以忽略不计)，因为你现在的值增加了 4 倍。每个像素都存储超过 4 个 JavaScript 数字，因为您可以将每个图 block 作为单个整数标识符，但这会浪费内存。

尽管 imageData 对象允许您从中获取矩形，如果您有 4 个图 block 层，那么存储像素的方式是最好的。

如果你想将关卡存储为图像，那么就去吧，我仍然可能会将关卡存储在平面数组中，因为如果我需要第五层，我只需切换几个数字即可，瞧，现在是我的系统有 5 层，您无法使用图像数据做到这一点。

无论哪种方式，只要尝试确保无论采用哪种方式，嵌套级别都较低(所有层的平面数组优于每层 4 个数组)，并且从数组中检索值足够快你做什么。