所以，我制作 HTML5 RPG 只是为了好玩。地图是一个<canvas>（512px 宽，352px 高 | 16 个图块，从上到下 11 个图块）。我想知道是否有更有效的方法来绘制<canvas>.
这是我现在的方式：
如何在地图上加载和绘制图块
使用这幅图块（32x32）绘制地图Image()。图像文件通过一个简单的for循环加载并放入一个名为tiles[]在使用时被绘制的数组中drawImage()。
首先，我们加载瓷砖......
这是如何完成的：
// SET UP THE & DRAW THE MAP TILES
tiles = [];
var loadedImagesCount = 0;
for (x = 0; x <= NUM_OF_TILES; x++) {
var imageObj = new Image(); // new instance for each image
imageObj.src = "js/tiles/t" + x + ".png";
imageObj.onload = function () {
console.log("Added tile ... " + loadedImagesCount);
loadedImagesCount++;
if (loadedImagesCount == NUM_OF_TILES) {
// Onces all tiles are loaded ...
// We paint the map
for (y = 0; y <= 15; y++) {
for (x = 0; x <= 10; x++) {
theX = x * 32;
theY = y * 32;
context.drawImage(tiles[5], theY, theX, 32, 32);
}
}
}
};
tiles.push(imageObj);
}
自然，当玩家开始游戏时，它会加载他们上次离开的地图。但在这里，它是一张全草地图。
现在，地图使用二维数组。这是一个示例地图。
[[4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 1, 1, 1, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 13, 11, 11, 11, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 1, 1, 1, 1, 1, 1, 1, 13, 13, 13, 13, 13, 1],
[1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 1, 1]];
我使用简单的if结构得到不同的地图。一旦上面的二维数组return被绘制出来，每个数组中对应的数字就会根据Image()存储在里面进行绘制tile[]。然后drawImage()将发生并根据它x和y时间32进行绘制，以在正确的x-y坐标上进行绘制。
多图切换是如何发生的
在我的游戏中，地图需要跟踪五件事：currentID、leftID、rightID、upID和bottomID。
- currentID：您所在地图的当前 ID。
- leftID：
currentID在当前地图左侧退出时要加载的 ID 。 - rightID：
currentID在当前地图右侧退出时加载什么ID 。 - downID：
currentID在当前地图底部退出时要加载的 ID 。 - upID：
currentID在当前地图顶部退出时要加载的 ID 。
需要注意的一点：如果leftID、rightID、upID或bottomID不是特定的，则表示它们是0. 这意味着他们不能离开地图的那一侧。这只是一种无形的封锁。
因此，一旦一个人离开地图的一侧，取决于他们退出的位置......例如，如果他们从底部退出，bottomID将map加载的数量并因此被绘制在地图上。
这是一个具有代表性的 .GIF，可帮助您更好地可视化：
正如你所看到的，迟早我会处理很多地图，我会处理很多ID。这可能会变得有点混乱和忙碌。
明显的优点是它一次加载 176 个图块，刷新一个 512x352 的小画布，一次处理一张地图。缺点是 MAP id 在处理许多地图时有时可能会令人困惑。
我的问题
- 这是存储地图的有效方式（考虑到瓷砖的使用），还是有更好的方式来处理地图？
我在沿着一张巨大的地图思考。地图大小很大，而且都是一个二维数组。然而，视口仍然是 512x352 像素。
这是我（针对这个问题）制作的另一个 .gif 以帮助可视化：
抱歉，如果您看不懂我的英语。请询问任何您无法理解的内容。希望我说清楚了。谢谢。
