在JS-基于平铺的游戏中，图像未加载到带有context.drawImage()的画布中

我正在尝试使用canvas在JavaScript/HTML中创建一个平铺映射。我使用两个55 x 55像素的.png图像文件作为草和水的纹理。

在数组"for loops"期间，此游戏的瓦片没有加载到画布中。这两个图像文件与.html页面位于同一文件夹级别。

如有任何帮助，我们将不胜感激。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mapArray = [
[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]
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0]
[0, 0, 0, 1, 1, 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, 0, 0, 0, 0, 0]
];
var grass = new Image();
var water = new Image();
grass.src = 'grass_tile.png';
water.src = 'water_tile.png';
var posX = 0;
var PosY = 0;
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
if (mapArray[i][j] == 0) {
context.drawImage(grass, posX, PosY, 55, 55);
}
if (mapArray[i][j] == 1) {
context.drawImage(water, posX, PosY, 55, 55);
}
posX += 55;
}
posX = 0;
posY += 55;
}

<style>#canvas {
border: 1px solid black;
}
</style>

<!doctype <!document html>
<html>
<head>
<meta charset="utf-8">
<title>GAME</title>
</head>
<body>
<canvas id="canvas" height="520px" width="520px"></canvas>
</body>
</html>

这里的一些要点：

您忘记在多维数组中放置逗号。
有些地方有varPosY，而其他地方有posY。
您应该等待加载图像以便绘制它们。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mapArray = [
[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],
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 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, 0, 0, 0, 0, 0]
];
var grass = new Image();
var water = new Image();
grass.src = 'https://fyldegrass.co.uk/wordpress/wp-content/uploads/2016/04/Lytham-Ebay-Top2-128x128.jpg';
water.src = 'data:image/jpeg;base64,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';
var posX = 0;
var posY = 0;
grass.onload = function () { draw(); };
function draw() {
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
if (mapArray[i][j] == 0) {
context.drawImage(grass, posX, posY, 55, 55);
}
if (mapArray[i][j] == 1) {
context.drawImage(water, posX, posY, 55, 55);
}
posX += 55;
}
posX = 0;
posY += 55;
}
}

<style>#canvas {
border: 1px solid black;
}
</style>

<!doctype <!document html>
<html>
<head>
<meta charset="utf-8">
<title>GAME</title>
</head>
<body>
<canvas id="canvas" height="520px" width="520px"></canvas>
</body>
</html>

相关内容

最新更新

热门标签：