Javascript 为什么赢了'；这段代码不能生成tilemap吗？

我目前正试图创建一个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=新图像（）；
testBlock.src=“/img/52571.png”
var-posX=0；
var-posY=0；
函数drawMap（）{
对于（var i=0；i

HTML:

游戏

这是你的电话号码

---

有人能提供一些关于为什么这不起作用的见解吗？

在使用图像绘图之前，请确保已加载图像

您可以通过调用

testBlock.onload

中的

drawMap

来实现这一点

这是一个有效的演示（只需单击

运行代码片段

）：

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=新图像（）；
testBlock.onload=drawMap；
testBlock.src=”https://i.stack.imgur.com/R6JFX.png"
函数drawMap（）{
var canvas=document.getElementById（“GameCanvas”）
var ctx=canvas.getContext（“2d”）
var-posX=0；
var-posY=0；
对于（var i=0；i

---

在使用图像绘制之前，请确保已加载图像

您可以通过调用

testBlock.onload

中的

drawMap

来实现这一点

这是一个有效的演示（只需单击

运行代码片段

）：

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=新图像（）；
testBlock.onload=drawMap；
testBlock.src=”https://i.stack.imgur.com/R6JFX.png"
函数drawMap（）{
var canvas=document.getElementById（“GameCanvas”）
var ctx=canvas.getContext（“2d”）
var-posX=0；
var-posY=0；
对于（var i=0；i

---

在代码中定义了

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=新图像（）；
testBlock.src=”https://mdn.mozillademos.org/files/5397/rhino.jpg"
testBlock.onload=drawMap；
设posX=0；
设posY=0；
函数drawMap（）{
for（设i=0；i

---

在代码中定义了

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=新图像（）；
testBlock.src=”https://mdn.mozillademos.org/files/5397/rhino.jpg"
testBlock.onload=drawMap；
设posX=0；
设posY=0；
函数drawMap（）{
for（设i=0；i

---

什么是

ctx

？ctx是2d的画布获取上下文什么是

ctx

？ctx是2d的画布获取上下文谢谢大家的帮助！这非常有帮助，现在我可以继续。@Twickz-如果解决方案解决了您的问题，请将其标记为已接受，以表明问题已解决。谢谢大家的帮助！这非常有帮助，现在我可以继续。@Twickz-如果解决方案解决了您的问题，请将其标记为已接受，以表明问题已解决。

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;
    };
}