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

Question

我正在为一个小型 www 游戏创建等距平铺地图，我创建了一个数组来存储地图数据、列号和行号以及平铺的高度和宽度。然后我在 web 上找到了这个地图数组末尾的函数 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]
  }
};

然后我有一段代码可以在画布上绘制一些东西：

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 的标题。其余部分保持未绘制。像这样：

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 了解更多信息。