I am re-imagining a game of pacman that uses facebook and twitter credentials.
I am using javascript to generate the map via a World class, that gets number of tiles on width and height, and a bidimensional array as a hardcoded map.
So far so good, I succeeded in generating the map, but my main problem is that the map sometimes is not being loaded on page access. I have used
$(window).load(function(){});
but it has the same behaviour
This is my world class that draws the sprites
var World = function(width, height, map){
this.height = height;
this.width = width;
this.map = map;
this.draw = function(){
for(i = 0; i < this.width; i++){
for(j = 0; j < this.height; j++){
//console.log(this.map[i][j]);
if(world.map[i][j] === 0){
var mapSprite = new Sprite('images/empty.png', i, j);
mapSprite.draw();
}
if(world.map[i][j] === 1){
var mapSprite = new Sprite('images/point.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 2){
var mapSprite = new Sprite('images/corner-left-up.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 3){
var mapSprite = new Sprite('images/corner-right-up.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 4){
var mapSprite = new Sprite('images/left-side.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 5){
var mapSprite = new Sprite('images/right-side.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 6){
var mapSprite = new Sprite('images/corner-right-down.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 7){
var mapSprite = new Sprite('images/top-side.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 8){
var mapSprite = new Sprite('images/bottom-side.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 9){
var mapSprite = new Sprite('images/corner-left-down.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 13){
var mapSprite = new Sprite('images/pilon.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 14){
var mapSprite = new Sprite('images/pilon-middle.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 15){
var mapSprite = new Sprite('images/cross.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 16){
var mapSprite = new Sprite('images/ghost-box-left-corner-up.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 17){
var mapSprite = new Sprite('images/ghost-box-left-corner-down.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 18){
var mapSprite = new Sprite('images/ghost-box-right-corner-down.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 19){
var mapSprite = new Sprite('images/ghost-box-right-corner-up.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 20){
var mapSprite = new Sprite('images/exit-left-up.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 21){
var mapSprite = new Sprite('images/exit-right-up.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 22){
var mapSprite = new Sprite('images/exit-left-down.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 23){
var mapSprite = new Sprite('images/exit-right-down.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 24){
var mapSprite = new Sprite('images/ghost-box-left-side.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 25){
var mapSprite = new Sprite('images/ghost-box-right-side.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 26){
var mapSprite = new Sprite('images/ghost-box-bottom.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 27){
var mapSprite = new Sprite('images/obstacle-up.png', i, j);
mapSprite.draw();
}
else if(world.map[i][j] === 28){
var mapSprite = new Sprite('images/obstacle-inside.png', i, j);
mapSprite.draw();
}
}
}
}
};
and this is the call:
$(document).ready(function(){
//initialization
Context.create("canvas");
world = new World(25, 20, map);
//world.draw();
console.log('in the document event');
});
$(window).load(function(){
console.log('Window load event!');
world.draw();
});
Should I be pre-loading the sprites?
All I know is that the window event should trigger the code once all the images are loaded.
Also, is there a better alternative, as I’ve seen that the window.load even does not full support cross webbrowsing