管理要在HTML5Canvas上绘制的2D数组中的文本地图-Managingtext-mapsina2DarrayontobepaintedonHTML5Canvas

So, I'm making a HTML5 RPG just for fun. The map is a (512px width, 352px height | 16 tiles across, 11 tiles top to bottom). I want to know if there's a more efficient way to paint the .

所以，我正在制作一个HTML5 RPG，只是为了好玩。地图是 （512px宽度，352px高度| 16个瓷砖，11个瓷砖从上到下）。我想知道是否有更有效的方法来绘制 。

Here's how I have it right now:

这就是我现在的方式：

How tiles are loaded and painted on map

The map is being painted by tiles (32x32) using the Image() piece. The image files are loaded through a simple for loop and put into an array called tiles[] to be PAINTED on using drawImage().

使用Image（）片段通过图块（32x32）绘制地图。图像文件通过一个简单的for循环加载，并使用drawImage（）放入一个名为tiles []的数组中进行PAINTED。

First, we load the tiles...

首先，我们加载瓷砖......

Naturally, when a player starts a game it loads the map they last left off. But for here, it an all-grass map.

当然，当玩家开始游戏时，它会加载他们最后离开的地图。但是在这里，它是一张全草图。

Right now, the maps use 2D arrays. Here's an example map.

现在，地图使用2D数组。这是一个示例地图。

[[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]];

I get different maps using a simple if structure. Once the 2d array above is return, the corresponding number in each array will be painted according to Image() stored inside tile[]. Then drawImage() will occur and paint according to the x and y and times it by 32 to paint on the correct x-y coordinate.

我使用简单的if结构获得不同的地图。一旦返回上面的2d数组，将根据存储在tile []内的Image（）绘制每个数组中的相应数字。然后将发生drawImage（）并根据x和y进行绘制，并将其乘以32以在正确的x-y坐标上绘制。

How multiple map switching occurs

With my game, maps have five things to keep track of: currentID, leftID, rightID, upID, and bottomID.

在我的游戏中，地图有五个要跟踪的内容：currentID，leftID，rightID，upID和bottomID。

• currentID: The current ID of the map you are on.
• currentID：您所在地图的当前ID。
• leftID: What ID of currentID to load when you exit on the left of current map.
• leftID：退出当前地图左侧时要加载的当前ID的ID。
• rightID: What ID of currentID to load when you exit on the right of current map.
• rightID：退出当前地图右侧时要加载的当前ID的ID。
• downID: What ID of currentID to load when you exit on the bottom of current map.
• downID：退出当前地图底部时要加载的当前ID的ID。
• upID: What ID of currentID to load when you exit on the top of current map.
• upID：退出当前地图顶部时要加载的当前ID的ID。

Something to note: If either leftID, rightID, upID, or bottomID are NOT specific, that means they are a 0. That means they cannot leave that side of the map. It is merely an invisible blockade.

需要注意的事项：如果leftID，rightID，upID或bottomID不是特定的，那意味着它们是0.这意味着它们不能离开地图的那一侧。它只是一个无形的封锁。

So, once a person exits a side of the map, depending on where they exited... for example if they exited on the bottom, bottomID will the number of the map to load and thus be painted on the map.

因此，一旦一个人退出地图的一侧，取决于他们退出的位置...例如，如果他们退出底部，则底部ID将加载地图的编号，从而在地图上绘制。

Here's a representational .GIF to help you better visualize:

这是一个代表性的.GIF，可以帮助您更好地可视化：

这是另一个.gif我（为这个问题）帮助可视化：

Sorry if you cannot understand my English. Please ask anything you have trouble understanding. Hopefully, I made it clear. Thanks.

对不起，如果你不懂我的英语。请问任何你无法理解的事情。希望我说得很清楚。谢谢。

1 个解决方案