0

我正在生成一个随机的“地图”，如下所示：

generateTiles() {
    for (let x = 0; x < this.width; x++) {
      for (let y = 0; y < this.height; y++) {
        if (Math.random() < 0.3) {
          this.worldmap[x][y] = new Wall(x, y);
        } else {
          this.worldmap[x][y] = new Floor(x, y);
        }
      }
    }
  }

然后，我尝试通过映射行和单元格将其渲染到画布：

drawMap(context) {
    this.worldmap.map(function(row) {
      return row.map(function(cell) {
        return this.drawSprite(
          context,
          loadSpritesheet(sprites),
          cell.attributes.sprite,
          cell.x,
          cell.y,
          this.tilesize
        );
      }, this);
    }, this);
  }

通过上面只渲染一个{x: 0, y:0}. 当我检查 map 正在迭代的row和cell数组时，它们都有不同的坐标。这意味着生成部分工作正常，问题在于我如何循环和渲染地图。

我在 SO 上阅读了一些关于预加载图像的答案。这是未来需要考虑的事情，但由于我只加载一个精灵表，我认为这不是我的问题。

我无法弄清楚这一点，建议将不胜感激！

为了完整起见，这是我的绘图功能：

drawSprite(context, spritesheet, sprite, x, y, tilesize) {
    context.drawImage(
      spritesheet, // image
      sprite * 16, // sx
      0, // sy
      16, // sWidth
      16, // sHeight
      x, // dx
      y, // dy
      tilesize, // dWidth
      tilesize // dHeight
    );
  }

还有一个加载精灵表的函数：

const loadSpritesheet = src => {
  const spritesheet = new Image();
  spritesheet.src = src;

  return spritesheet;
};

export default loadSpritesheet;

此外，这里是一个要点，其中包含更完整的代码，展示了所描述的问题。

编辑：根据@CertainPerformance 的建议，我尝试了嵌套for循环：

for (let x = 0; x < this.worldmap.length; x++) {
  for (let y = 0; y < this.worldmap[x].length; y++) {
    this.drawSprite(
      context,
      loadSpritesheet(sprites),
      this.worldmap[x][y].attributes.sprite,
      this.worldmap[x][y].x,
      this.worldmap[x][y].y,
      this.tilesize
    );
  }
}

尽管如此，只有一个瓦片正在被渲染。

4

0 回答 0