Ben sinds kort bezig met de html 5 canvas.
Nu lukt simpele figuurtjes lijnen en afbeelding plaatsen makkelijk
Alleen in mijn onderstaande code ben ik bezig met het opbouwen van mijn achtergrond dat als gamelevel moet dienen.
Nu krijg ik de pngtjes wel op het scherm als ik x en y niet aanpas maar zodra ik de x en of y increase
om de tiles goed op de canvas te krijgen waardoor het een 3d level lijkt van bovenag krijg ik niks terwijl ik in firebug wel de juiste x en y waardes krijg als ik de image wil plaatsen.
Iemand een idee?
$(document).ready(function() {
//Some variables
var canvas = document.getElementById('maincanvas');
var ctx = canvas.getContext("2d");
var tiles = [
['gras','gras','gras','gras','gras'],
['gras','water','water','water','gras'],
['gras','water','water','water','gras'],
['gras','gras','gras','gras','gras']
];
var x = 0;
var y = 0;
// iterate through the level array and draw each levelTile using drawTile()
function createLvl(){
for (var i=0; i < tiles.length; i++) {
x = x + 101;
for (var j=0; j < tiles[i].length; j++) {
drawTile(tiles[i][j]);
x= x + 101;
}
y= y + 171;
}
}
// draw a single Tile
function drawTile(type){
if (type){
var img = new Image();
img.onload = function() {
ctx.drawImage(img,x,y);
};
img.src = 'C://Users/mrozenbeek/Desktop/htmlcanvas 2/Sprites/Sprites/'+type+'.png';
}
}
function startGame(){
createLvl();
}
startGame();
});
