如何修復從它生成的數組中翻轉的 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);

Map Class 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

您的二維數組將 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, 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);

Answer 2

您在打印陣列時犯了一個基本錯誤。 第 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] 中打印（走進列）

但這是一個問題……你正在長大，然后你在列中打印！！！

解決方案很簡單：您需要旋轉 Map 以匹配代碼：

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：

this.data[x][y];

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