My Javascript tile map won't draw?
Here is my script, I can't figure out what's wrong, I want to draw a map of 12 * 12 tiles and the tiles are 32px - 32px. The tiles don't draw when I run the page, I've tried using parse int like below, but still, it didn't work.
if(parseInt(mapArray[x][y]) == 0){
ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
}
Here is the script I created.
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = (32 * 12);
canvas.height = (32 * 12);
document.body.appendChild(canvas);
var rockTile = new Image();
rockTile.src = "../Images/dc-dngn/floor/rect_gray0.png";
var tileSize = 32;
var posX = 0;
var posY = 0;
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, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
$(document).ready(function(){
drawMap();
});
function drawMap(){
for(var x = 0; x < mapArray.length; x++){
for(var y = 0; y < mapArray[x].length; y++){
if(mapArray[x][y] == 0){
ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
}
posX += 32;
}
posX = 0;
posY += 32;
}
}
If anyone can help me get my tiles that would be greatly appreciated, thanks!
source to share
You have two main problems that I see:
- You access
document.body
prior to its definition. - You are using the image, perhaps before uploading it.
Here's some code that solves both of these problems:
// variables are defined as global variables
var posX = 0;
var posY = 0;
var tileSize = 32;
var mapArray;
var canvas;
var ctx;
var rockTile;
$(function() {
// document should be defined now
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = (32 * 12);
canvas.height = (32 * 12);
document.body.appendChild(canvas);
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, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
// wait until the image is loaded to draw
rockTile = new Image();
rockTile.onload = drawMap;
rockTile.src = "../Images/dc-dngn/floor/rect_gray0.png";
});
function drawMap(){
posX = 0;
posY = 0;
for(var x = 0; x < mapArray.length; x++){
for(var y = 0; y < mapArray[x].length; y++){
if(mapArray[x][y] == 0){
ctx.drawImage(rockTile, posX, posY, tileSize, tileSize);
}
posX += 32;
}
posX = 0;
posY += 32;
}
}
Also double check the image path.
source to share
You must wait for the image to load. This image is not part of the DOM and therefore waiting for the document to load will not help.
You need to put a handler for the slot image.onload
and call redraw when this code is called.
The usual procedure
- create image object
- register an onload event for it
- set image
src
value
only when the registered event is called can you use the image object.
The tricky part is that depending on the browser, the image may be immediately valid after installation src
if it's already in the cache, so when you don't follow the correct procedure, it still might still work (but they won't work in real cases where downloading requires internet access).
source to share