在Javascript中显示tilemap

下面是我现在用来尝试生成tilemap的代码：

// --- Javascript ---

window.onload = function (){
  var can = document.getElementById("canvas");
  var ctx = can.getContext('2d');
  var map = {
  cols: 8, //# of cols
  rows: 8, // # of rows
  tSize: 32, // tile size (32px x 32px)
  tiles: [
    [1, 1, 1, 1 ,1 ,1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1]
  ], // map
};

var tileAtlas = new Image();
tileAtlas.src = 'Tiles.png';
tileAtlas.onload = function () {
  for (var c = 0; c < map.cols; c++) {
    for (var r = 0; r < map.rows; r++) {
      if (map.tiles[c][r] !== 0) { // 0 is an empty tile
        ctx.drawImage(
          tileAtlas, // image
          map.tiles[c][r] * 32, // cut start x
          0, // cut start y
          map.tsize, // size of tiles for cut size x
          map.tsize, // size of tiles for cut size y
          c * map.tsize, // place tiles on canvas x
          r * map.tsize, // place tiles on canvas y
          map.tsize, // place height
          map.tsize // place width
        );
      }
    }
  }
}
}

/--Javascript---
window.onload=函数（）{
var can=document.getElementById（“画布”）；
var ctx=can.getContext（'2d'）；
变量映射={
科尔斯：8匹，每匹
行数：8行，共行
tSize:32，//磁贴大小（32px x 32px）
瓷砖：[
[1, 1, 1, 1 ,1 ,1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1]
]，//地图
};
var tileAtlas=新图像（）；
tileAtlas.src='Tiles.png'；
tileAtlas.onload=函数（）{
对于（var c=0；c

这是你的电话号码

---

它本应显示8x8网格的“grass”，但它是空白的，但控制台是清晰的

您拼错了

tsize

（与

tsize

）。另外，第二个参数的表达式似乎不是您想要的。您只需传递一个0:

ctx.drawImage(
    tileAtlas, // image
    0,
    0,
    map.tSize, // size of tiles for cut size x
    map.tSize, // size of tiles for cut size y
    c * map.tSize, // place tiles on canvas x
    r * map.tSize, // place tiles on canvas y
    map.tSize, // place height
    map.tSize // place width
);

var can=document.getElementById（“canvas”）；
var ctx=can.getContext（'2d'）；
变量映射={
科尔斯：8匹，每匹
行数：8行，共行
tSize:32，//磁贴大小（32px x 32px）
瓷砖：[
[1, 1, 1, 1 ,1 ,1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1]
]，//地图
};
var tileAtlas=新图像（）；
tileAtlas.src=https://i.stack.imgur.com/2JX3d.png';
tileAtlas.onload=函数（）{
对于（var c=0；c

---

用于行

如果（1！==0）{//0是一个空磁贴

，这是您当前使用的实际代码，还是您复制代码时出现了打字错误？

tsize

和

tsize

不是一回事。对不起，不，这是为了尝试调试，因为整个事情不是一个空白，所以我只是让它始终为真。它是

如果（磁贴[c][r]！==0）{//0是一个空磁贴

请编辑问题中的代码，以包括@GameCocks20048的更正，该更正非常接近我所寻找的内容，但我只需要第一个元素，不需要整个图片，因此泥土精灵之前的草将作为第二个和第三个参数传递为零。相应地更新了答案。