如何修复从它生成的数组中翻转的 tilemap？

Question

我正在尝试在我正在开发的游戏中渲染瓷砖地图，但在渲染时它会垂直和水平翻转。我正在使用 JavaScript 在 HTML 5 Canvas 中处理它。我已经尝试了所有我能想到的方法，但我似乎无法摆脱这个问题。

索引 JS：

import Map from './MapClass.js';

export var miniMapScale = .5;

var MiniMap = document.createElement("canvas");
document.body.appendChild(MiniMap);
MiniMap.width = miniMapScale * 640;
MiniMap.height = miniMapScale * 640;
MiniMap.id = "TopDownView";
var ctx = MiniMap.getContext("2d");

var TestMap = new Map([
    [1,1,1,1,1,1,1,1,1,1],
    [1,0,1,0,0,0,0,0,0,1],
    [1,0,1,0,0,0,0,0,0,1],
    [1,0,1,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,1,1,1,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,1,1,1,1,1,1,1,1,1]

]);

function drawTopDownMap() {
    ctx.clearRect(0, 0, MiniMap.width, MiniMap.height);

    TestMap.draw();

    requestAnimationFrame(drawTopDownMap);
};

requestAnimationFrame(drawTopDownMap);

地图类JS：

import { miniMapScale } from './index.js';

export default class Map{
    constructor(mapData) {
        this.data = mapData;
        this.tileSize = miniMapScale * 64;
        this.width = this.data[0].length;
        this.height = this.data.length;
        this.ctx = document.getElementById("TopDownView").getContext("2d");
    };

    draw() {
        for(var y = 0; y < this.height; y++) {
            for(var x = 0; x < this.width; x++) {
                var wall = this.data[x][y];

                if(wall == 0) {
                    this.ctx.fillStyle = "#ffe4c4";

                    this.ctx.fillRect(
                        x * this.tileSize,
                        y * this.tileSize,
                        this.tileSize, this.tileSize
                    );
                }else if(wall == 1) {
                    this.ctx.fillStyle = "#000000";

                    this.ctx.fillRect(
                        x * this.tileSize,
                        y * this.tileSize,
                        this.tileSize, this.tileSize
                    );
                };
            };
        }
    }
};

任何帮助将不胜感激！

Answer 1

您在打印数组时犯了一个基本错误。第 1 点是你创建了你的数组，考虑作为一个屏幕：

[[1,1,1,1,1,1,1,1,1,1] // <- top screen
[1,0,1,0,0,0,0,0,0,1] ] //<- 1 position after top

但是，当您使用 this.data[x][y] 在屏幕上打印此内容时，y 固定为 0，x 步行为 0 到宽度。

拳头互动：

x=0, y=0; 
x=1, y=0; 
x=2, y=0. 

所以，你在 data[0][0], data[1][0], data[2][0] 中打印（走在列）

正确的是data[0][1],data[0][2],data[0][3]（排队走）

如果你改变循环的顺序：

拳头互动：

x=0, y=0; 
x=0, y=1; 
x=0, y=2. 

所以，你打印在 data[0][0], data[0][1], data[0][2] (walkin in column)

但这是个问题……你在长大，然后你就在列中打印！！！

解决方案很简单：您需要旋转地图以匹配代码：

var TestMap = new Map([
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,1,1,1,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,1,0,1],
[1,0,0,0,0,0,0,1,0,1],
[1,0,0,0,0,0,0,1,0,1],
[1,1,1,1,1,1,1,1,1,1]
]);

或者你把 x 改成 y in：

this.data[x][y];

看例子： https://codepen.io/Luis4raujo/pen/NWbvvay

Answer 2

您的二维数组的第一维是 Y，第二维是 X。这是因为您的数据排列为行数组，而不是列数组。

使用this.data[y][x] 应该会提供预期的结果。

draw() {
    for(var y = 0; y < this.height; y++) {
        for(var x = 0; x < this.width; x++) {
            var wall = this.data[y][x]; // instead of [x][y]

            if(wall == 0) {
                this.ctx.fillStyle = "#ffe4c4";
            } else if(wall == 1) {
                this.ctx.fillStyle = "#000000";
            }

            // Moved this out of the if statement to avoid repeated code
            this.ctx.fillRect(
                x * this.tileSize,
                y * this.tileSize,
                this.tileSize, this.tileSize
            );
        }
    }
}

这是一个有效的 sn-p：

var miniMapScale = 0.5;

class Map {
  constructor(mapData) {
    this.data = mapData;
    this.tileSize = miniMapScale * 64;
    this.width = this.data[0].length;
    this.height = this.data.length;
    this.ctx = document.getElementById('TopDownView').getContext('2d');
  }

  draw() {
    for (var y = 0; y < this.height; y++) {
      for (var x = 0; x < this.width; x++) {
        var wall = this.data[y][x];

        if (wall == 0) {
          this.ctx.fillStyle = '#ffe4c4';
        } else if (wall == 1) {
          this.ctx.fillStyle = '#000000';
        }
        this.ctx.fillRect(
          x * this.tileSize,
          y * this.tileSize,
          this.tileSize,
          this.tileSize
        );
      }
    }
  }
}

var MiniMap = document.createElement('canvas');
console.log(document);
document.body.appendChild(MiniMap);
MiniMap.width = miniMapScale * 640;
MiniMap.height = miniMapScale * 640;
MiniMap.id = 'TopDownView';
var ctx = MiniMap.getContext('2d');

var TestMap = new Map([
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
]);

function drawTopDownMap() {
  ctx.clearRect(0, 0, MiniMap.width, MiniMap.height);

  TestMap.draw();

  requestAnimationFrame(drawTopDownMap);
}

requestAnimationFrame(drawTopDownMap);