2D game creation with enchant.js game engine

[yahoo5000]

Hello guys i start coding a game with an enchant.js game plugin and face a problem witch i cant solve and do not know what i did wrong cuz whole code looks fine maybe someone of you could assist me and help to solve this problem :

 

enchant();
window.onload = usercheck();

function usercheck(){
    $.post('checkcharacter.php', function(data){ 
                gamePlay(data);
    });
}

function gamePlay(data){
    
    var game = new Game(1364,650);
    game.fps = 30;
    game.preload(["js/backgroundmap.png",
                  "js/leaf.png",
                  "js/sand.png",
                  "js/stone.png",
                  "js/cloud.png",
                  "js/mist.png",
                  "js/grass.png",
                  "js/rain.png",
                  "js/sound.png",
                  "js/waterfall.png",
                  "js/hotwater.png"
                 ]);
    
    game.onload = function(){
        
        if(data < 1){
            //setRegistration();
            var mapGroup = new Group();
            var mapVillage = [
                {name: "leaf", src: "js/leaf.png"},
                {name: "sand", src: "js/sand.png"},
                {name: "stone", src: "js/stone.png"},
                {name: "cloud", src: "js/cloud.png"},
                {name: "mist", src: "js/mist.png"},
                {name: "rain", src: "js/rain.png"},
                {name: "grass", src: "js/grass.png"},
                {name: "sound", src: "js/sound.png"},
                {name: "hotwater", src: "js/hotwater.png"},
                {name: "waterfall", src: "js/waterfall.png"}
            ];
            
            for(var i = 0; i < mapVillage.length; i++){
                var b = mapVillage[i];
                b = new Sprite(game.width, game.height);
                b.image = game.assets[b.src];
                alert(b.image);
                mapGroup.addChild(b);
            }
            
            
            game.rootScene.addChild(mapGroup);
        }else{
            //setGameStage();
            //setPlayer();
            //setBattle();
        }
        
    };
    
    game.start();
    
    
}

this is whole my game code , my goal is browser online games i lack of knowledge about game programing but i am try to learn as much as i can and this is my start . so in this code ones page are loaded i call function check to check if user are first time or if hes exist if hes first time and nothing are into database check function will return me 0 . on game load fuction i checking a data value witch was send by check function and if its < then 1 i do registration scene there at first i am trying to draw a game map to chose game play area , i have checked my code everything looks fine but i got no result at all i am doing a loop to to draw a map but nothing happens no error nothing so i try to alert b.image and what do i get is undefined .

[mattstyles]

Loading images is asynchronous, meaning that even if that code was working its possible image is undefined until it has actually been loaded (the framework might take care of that, but the image still would not be a HTML element at that point).

In any case, that isn't your actual problem (not yet anyway).

I don't know Enchant at all but it doesn't look like you either load the assets nor attach them to the sprites you are creating.

Quote

var b = mapVillage[i];
b = new Sprite(game.width, game.height);

 

You assign an object (presumably describing a resource) but then immediately stamp over that by assigning b to a new Sprite image, nowhere does the Sprite image know it is to use the resource. I'd expect the Sprite constructor be able to accept an image, or that object description, or simply a string, to let it know which resource to use, or, the resultant newly created Sprite would have a method to assign a resource later.

Either way, you don't do that, so presumably game.assets is empty of non-existent and b.src probably doesn't exist either.