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

如何解决如何修复我的 tilemap 从它生成的数组中翻转的问题？

我正在尝试在我正在开发的游戏中渲染瓷砖地图，但在渲染时它会垂直和水平翻转。我正在使用 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]

]);

function drawTopDownMap() {
    ctx.clearRect(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,this.tileSize
                    );
                };
            };
        }
    }
};

任何帮助将不胜感激！

解决方法

您的二维数组将 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
            );
        }
    }
}

这是一个工作片段：

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,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,]);

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

  TestMap.draw();

  requestAnimationFrame(drawTopDownMap);
}

requestAnimationFrame(drawTopDownMap);

您在打印数组时犯了一个基本错误。第 1 点是您将数组视为屏幕：

updated_at

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

拳头互动：

created_at

因此，您在 data[0][0]、data[1][0]、data[2][0] 中打印（走在列中）

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

如果你改变循环的顺序：

拳头互动：

catch (Exception $e) {
        throw new QueryException(
            $query,$this->prepareBindings($bindings),$e

因此，您在 data[0][0]、data[0][1]、data[0][2] 中打印（进入列）

但这是一个问题......你正在成长，然后你会被列在列中！！！

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

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

或者你在：

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

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