javascript - Ajax 调用使 Sprite 运动闪烁 javascript

Question

我刚刚在我的 JavaScript/HTML5 游戏中为我的主要 Angular 色 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();

    }

但是如果玩家决定加载他们以前的游戏设置，下面的代码将运行，而不是 Sprite 在 Canvas 中流畅地移动，当按下一个键时，例如右箭头键， Sprite 将消失，然后闪烁在 Canvas 上的某个地方屏幕右侧然后再次消失。

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 会导致这种奇怪的行为？

我已经将当前版本的游戏上传到HERE ，因此如果您愿意，您可以目睹这种奇怪的行为。

登录使用

• 客人 - 用户名
• guest - 密码

谢谢你的时间

编辑好的，我已经将问题进一步缩小到变量 location_X、location_Y。当我在 playr.init 调用中使用硬编码数字(例如 20、20)时，移动工作正常，但是当我使用 location_X、location_Y(如您在示例中看到的那样)时，问题仍然如上所示。

我从 Ajax 返回成功时调用的名为 player_details_init 的函数中检索 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 时位置返回正常并且 Sprite 确实出现在它应该出现的位置它只是没有正确移动

Answer 1

从您描述的症状看来，location_X 和location_Y 是字符串而不是数字。在这种情况下，计算将不会按您预期的那样进行(例如，加法会导致串联)。

我建议您尝试申请 parseInt()在读取您的 JSON 有效负载时将这些值(可能还有其他值)。