Javascript Ajax调用使sprite运动闪烁

我刚刚在JavaScript/HTML5游戏中为我的主角sprite实现了移动，除了加载现有用户保存的数据外，一切都很好

在我的主JavaScript文件中，这取决于用户是否单击了“新建游戏”按钮或“加载游戏”按钮，要么加载新游戏，要么通过PHP和Ajax从数据库加载用户数据

如果用户单击“新建游戏”，则会运行下面的代码，玩家可以正常移动：

 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();

    }

但是，如果玩家决定加载他们以前的游戏设置，下面的代码将运行，而不是精灵在画布中流畅地移动，当按下一个键e.i right arrow键时，精灵将消失，然后在屏幕右侧某处闪烁，然后再次消失

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();

    }

我知道是Ajax导致了这个问题，因为当我把它注释掉时，Sprite会像它应该做的那样移动，唯一的问题是我不知道为什么Ajax会导致这种奇怪的行为

我已经把游戏的当前版本上传到了，所以如果你愿意，你可以看到这种奇怪的行为

登录使用

• 来宾-用户名
• 来宾密码

谢谢你的时间

编辑 好的，我已经把问题进一步缩小到变量location，location，Y。当我在playr.init调用中插入一个硬编码的数字，比如20，20时，移动效果很好，但是当我使用location，location，像你在示例中看到的那样，问题仍然会出现，如上所述

当Ajax返回名为player\u details\u init的success时，我从一个函数中检索location_X和location_Y。 以下是该函数：

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();
    });
}

---

因此，我猜测这与此功能有关，尽管当我执行console.log时，位置返回良好，精灵确实出现在它应该出现的位置，但它没有正确移动。从您描述的症状来看，它看起来像是字符串而不是数字。在这种情况下，计算将不会像您预期的那样工作（例如，加法将导致串联）

---

我建议您在读取JSON负载时尝试应用这些值（可能还有其他值）。

看起来

location\u X

和

location\u Y

是字符串而不是数字。因此，计算不会像您期望的那样工作（例如，加法将导致串联）。在读取JSON负载时，尝试将

parseInt（）

应用于这些值。如果你在我旁边，我会拥抱你！！我一点也没想到，非常感谢！已经找了很久了！，请把这个作为答案，这样我就可以把它标记为这样，并投票感谢