JS / jQuery / Canvas - 数组瓦片图，在行和列中查找数组的值

Question

我正在为一个小型 www 游戏创建等距图块地图，我创建了一个数组来存储地图数据、列号和行号以及图块的高度和宽度。然后我在网络上找到了函数 getTile ，它位于这个地图数组的末尾。它应该在以后给我瓷砖的价值。它看起来像这样：

  var map = {
  cols: 13,
  rows: 11,
  twidth: 200,
  theight: 100,
  tiles: [
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 2, 2, 2, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 2, 2, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1,
    2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 2, 1,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1,
  ],
  getTile: function(col, row) {
    return this.tiles[row * map.cols + col]
  }
};

然后我有一个代码可以在canvas上画一些东西：

for (var c = 0; c < map.cols; c++) {
  for (var r = 0; r < map.rows; r++) {

    var tile = map.getTile(c, r);

        var screenX = (c - r) * map.twidth/2;
        var screenY = (c + r) * map.theight/2;
        var screenX = screenX+1000;

        if(tile == 1) {
            var element = "area_grass_01";
        }

        if(tile == 2) {
            var element = "area_road_01";
        }

        var img = document.getElementById(element);


      ctxObj.drawImage(img, (tile - 1) * map.twidth, 0, map.twidth, map.theight, screenX, screenY, map.twidth, map.theight);
  }
}

现在，当我运行 console_log 或在循环为运行时使用 tile 变量发出警报。它一一显示了 map.tiles 中包含的所有数字。然而，当我试图找出应该像这样绘制哪个图像时：

    if(tile == 1) {
        var element = "area_grass_01";
    }

    if(tile == 2) {
        var element = "area_road_01";
    }
    var img = document.getElementById(element);

只绘制值为1的title，其余不绘制。像这样：

Map render

现在我想问你，我如何根据我放在里面的数组编号实际设置图像map.tiles？

还有一个问题，我想问任何熟悉这个的人。如果我的瓷砖宽度为 200，高度为 100，我该如何绘制比方说更高的建筑物？我是否找到该绘图的高度并将其设置得比绘图尺寸高 - 瓷砖高度（即 100），或者您对如何绘制更高的元素有任何其他建议吗？我是否仍然使用相同的绘图技术：

    var screenX = (c - r) * map.twidth/2;
    var screenY = (c + r) * map.theight/2;

但是在screenY中调整了map.theight？

Answer 1

您正在使用 drawImage 的重载，其中第二个和第三个参数是源 X 和 Y 值。如果您正在使用看起来不像您的 spritesheet，则只需要使用这些。尝试仅用 0 替换该函数调用的第二个参数。

查看 sx、sy、swidth 和 sheight 参数 here 了解更多信息。

JS / jQuery / Canvas - 数组瓦片图，在行和列中查找数组的值

JS / jQuery / Canvas - Array tile map, find value of array in row and column

javascript

arrays

dictionary

canvas

tile