i want to draw a tilemap into a canvas. I don't know why my code is not working. I get no error in the browser console and my nested loops are working. I think, that my images are not loaded correctly. I have already tried to put all the code in a window.onload function. But that has not solved the problem.
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Testseite</title>
</head>
<body>
<div id="header">
<img src="testbanner1.jpg" alt="banner" width="1500" height="150px" >
</div>
<div id="main">
<canvas id="spacecanvas" height="1200px" width="1200px" ></canvas>
<script>
var spacecanvas=document.getElementById('spacecanvas');
var context=spacecanvas.getContext('2d');
var spacefieldArray = [
[7,7,7,7,0,7,0,7,0,0],
[0,0,1,0,0,0,0,0,0,0],
[0,0,0,0,4,0,0,0,3,0],
[0,0,0,0,0,7,0,7,0,0],
[0,2,0,6,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,5,0,0,0,0]
];
var weltall = new Image();
var asteroid = new Image();
var deutnebel = new Image();
var erdplanet = new Image();
var gesteinsbrocken = new Image();
var mine = new Image();
var sonne = new Image();
var solarkollektor = new Image();
weltall.src = '\grafiken\/Weltall_Feld.jpg';
asteroid.src = '\grafiken\/asteroid.jpg';
deutnebel.src ='\grafiken\/deutnebel.jpg';
erdplanet.src ='\grafiken\/erdplanet.jpg';
gesteinsbrocken.src='\grafiken\/gesteinsbrocken.jpg';
mine.src='\grafiken\/mine.jpg';
sonne.src='\grafiken\/sonne.jpg';
solarkollektor.src='\grafiken\/solarkollektor.jpg';
var posX = 0;
var posY = 0;
for (var i=0; i< spacefieldArray.length; i++) {
for (var j=0; j<spacefieldArray.length; j++) {
if (spacefieldArray[i][j]==0) {
context.drawImage(gesteinsbrocken, posX, posY, 50, 50);
}
if (spacefieldArray[i][j]==1) {
context.drawImage(asteroid, posX, posY, 50, 50);
}
if (spacefieldArray[i][j]==2) {
context.drawImage(deutnebel, posX, posY, 50, 50);
}
if (spacefieldArray[i][j]==3) {
context.drawImage(solarkollektor, posX, posY, 50, 50);
}
if (spacefieldArray[i][j]==4) {
context.drawImage(mine, posX, posY, 50, 50);
}
if (spacefieldArray[i][j]==5) {
context.drawImage(erdplanet, posX, posY, 50, 50);
}
if (spacefieldArray[i][j]==6) {
context.drawImage(sonne, posX, posY, 50, 50);
}
if (spacefieldArray[i][j]==7) {
context.drawImage(weltall, posX, posY, 50, 50);
}
posX+=50;
}
posX=0;
posY+=50;
}
</script>
<div id="spacefield">
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire