为什么这段代码无法生成图块地图？
[英]Why won't this code work to generate a tilemap?
问题描述
I am currently trying to create a tilemap for my game with some mario sprites. 
我目前正在尝试使用一些马里奥精灵为游戏创建一个tilemap。 For some reason, no images are loading and I've tried everything I can think of. 由于某些原因，没有图像正在加载，因此我尝试了所有可以想到的方法。
I have tried the following code to generate my map with a 2d array: 我尝试了以下代码来生成具有2d数组的地图：
JS: 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: 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>
Can anyone provide some insight on why this is not working? 任何人都可以提供一些有关为什么这行不通的见解吗？
2 个解决方案
解决方案1
0 已采纳 2019-03-23 05:52:38
Make sure your image is loaded before you draw with it. 在绘制图像之前，请确保已加载图像。
You can do that by calling drawMap in testBlock.onload . 您可以通过在testBlock.onload调用drawMap来testBlock.onload 。
Here's a working demo (just click Run code snippet ): 这是一个有效的演示（只需单击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>
解决方案2
0 2019-03-23 06:00:37
In your code you defined drawMap function but it is not called. 在您的代码中定义了drawMap函数，但未调用它。 Call the drawMap function on onload of image. 呼吁drawMap功能onload形象。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.