为什么此代码无法生成切片地图？

我目前正在尝试使用一些Mario Sprites为我的游戏创建一个TILEMAP。由于某种原因，没有图像正在加载，我尝试了我能想到的一切。

我尝试了以下代码以使用2D数组生成我的地图：

JS：

var canvas = document.getElementById("GameCanvas")
var ctx = canvas.getContext("2d")
var testMap = [
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,1,1,1,1,1]
];
        var testBlock = new Image();
        testBlock.src = "./img/52571.png"
var posX = 0;
var posY = 0;
function drawMap () {
    for (var i = 0; i < testMap.length; i++) {
    for (var j = 0; j < testMap[i].length; j++) {
        if (testMap[i][j] == 1) {
            ctx.drawImage(testBlock, 0, 0, 16, 16, posX, posY, 16, 16);
        }
        posX += 16;
    }
    posX = 0;
    posY += 16;
    };
}

html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Game</title>
    </head>
<body>
    <canvas id = "GameCanvas" width = "800" height = "480"></canvas>
    <script src ='game_main.js'></script>
</body>
</html>

这是瓷砖。

任何人都可以就为什么不起作用提供一些见解？

确保在绘制之前加载图像。

您可以通过在testBlock.onload中调用drawMap来做到这一点。

这是一个工作演示（只需单击Run code snippet）：

var testMap = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
var testBlock = new Image();
testBlock.onload = drawMap;
testBlock.src = "https://i.stack.imgur.com/R6JFX.png"
function drawMap() {
  var canvas = document.getElementById("GameCanvas")
  var ctx = canvas.getContext("2d")
  
  var posX = 0;
  var posY = 0;
  for (var i = 0; i < testMap.length; i++) {
    for (var j = 0; j < testMap[i].length; j++) {
      if (testMap[i][j] == 1) {
        ctx.drawImage(testBlock, 0, 0, 16, 16, posX, posY, 16, 16);
      }
      posX += 16;
    }
    posX = 0;
    posY += 16;
  };
}

<body>
  <canvas id="GameCanvas" width="160" height="96" style="border:1px solid #000000;" />
</body>

在您的代码中，您定义了drawMap功能，但未调用。在图像的onload上调用DrawMap功能。

const canvas = document.getElementById("GameCanvas");
const ctx = canvas.getContext("2d");
var testMap = [
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,1,1,1,1,1]
];
const testBlock = new Image();
testBlock.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg"
testBlock.onload = drawMap;
let posX = 0;
let posY = 0;
function drawMap () {
    for (let i = 0; i < testMap.length; i++) {
    for (let j = 0; j < testMap[i].length; j++) {
        if (testMap[i][j] == 1) {
            ctx.drawImage(testBlock, 0, 0, 16, 16, posX, posY, 16, 16);
        }
        posX += 16;
    }
    posX = 0;
    posY += 16;
    };
}

<canvas id = "GameCanvas" width = "800" height = "480"></canvas>

相关内容

最新更新

热门标签：