Here is my script, I can't seem to figure out what's wrong, I want to draw a tile map 12*12 and the tiles are 32px - 32px. The tiles dont draw when I run the page, Ive tried using parse int as shown 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 have 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 to get my tiles to draw that would greatly appreciated, Thank you!
$(document).ready(
is jQuery