Ajax call makes sprite movement flicker javascript

Question

i've just implemented movement for my main character sprite on my JavaScript/HTML5 game and all is well except for when i load existing users saved data.

In my main JavaScript file depending on whether the user clicked the new game button or load game button either a new game is loaded or the users data is loaded from a DB via PHP and Ajax.

If the user clicks new game it runs the code below and the player moves fine:

 else{
        //set beginning params
        //Change screens
        ui.new_game();

        layer = scene.load("level_"+1);
        layer = $.isArray(layer) ? layer : layer.layers;

        layer.forEach(function(layer){
            if (layer.hasOwnProperty("properties") && layer.properties.hasOwnProperty("collision"))
            {
                scene.collisionLayer(layer);
            }
        });

        gameGUI.set_level(1);
        gameGUI.set_location(20,20);
        gameGUI.init_inv();
        player.init_Player(20,20);
        player.draw();
        last_update = Date.now();

    }

BUT if the player decides to load their previous game settings the code below is run and instead of the sprite moving fluidly in the canvas, when a key is pressed e.i right arrow key, the sprite will disappear, then flicker somewhere on the right side of the screen then disappear again.

function game_settings(state){
    if(state == "load"){

        ui.load_game();

        //do ajax call to load user last save
        var dataString = {"user_data": "true"};
        $.ajax({
           type:"POST",
            url:"PHP/class.ajax.php",
            data: dataString,
            dataType: 'JSON',
            async:false,
            success: function(success) {
                player_details_init(success);

            },
            error: function(){
                alert("ERROR in User data");
            }
        });

        layer = scene.load("level_"+level);
        layer = $.isArray(layer) ? layer : layer.layers;

        layer.forEach(function(layer){
            if (layer.hasOwnProperty("properties") && layer.properties.hasOwnProperty("collision"))
            {
                scene.collisionLayer(layer);
            }
        });
        player.init_Player(location_X,location_Y);
        player.draw();
        last_update = Date.now();

    }

I know the Ajax is whats causing the problem because when i comment it out the Sprite moves like it should do, the only problem is i don't know why the Ajax is causing this weird behavior?

I have uploaded the current version of the game to HERE, so you can witness the weird behavior if you so wish.

To log in use

• guest - username
• guest - password

Thanks for your time

EDIT Ok i have narrowed down the problem even further to the variables location_X, location_Y. Whne i stick in a hardcoded number say 20, 20 in the playr.init call the movement works fine, but when i use location_X, location_Y like you see in the example the problem still occurs as above.

I retrieve location_X and location_Y from a function called when the Ajax returns success called player_details_init. Here is that function:

function player_details_init(success){

    $.each(success, function(key,value){
        if(level == null){
            level = value.level;
        }
        if(location_X == null){
            location_X = value.location_X;
        }
        if(location_Y == null){
            location_Y = value.location_Y;
        }
        //items.push([value.game_item_id, value.quantity]);

        gameGUI.set_level(level);
        gameGUI.set_location(location_X,location_Y);
        gameGUI.init_inv();
    });
}

SO my guess is it is something to do with this function although when i do a console.log the location returns fine and the sprite does appear where it should it just doesnt move correctly

Answer 1

From the symptoms you describe, it looks like location_X and location_Y are strings instead of numbers. In this situation, computations will not work as you expect (addition will result in concatenation, for instance).

I would suggest you try applying parseInt() to these values (and possibly others as well) when reading your JSON payload.