Ajax 调用使精灵运动闪烁 javascript答案

【问题标题】：Ajax call makes sprite movement flicker javascriptAjax 调用使精灵运动闪烁 javascript
【发布时间】：2013-04-14 16:50:23
【问题描述】：

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

在我的主 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 右箭头键时，精灵会消失，然后在某处闪烁然后屏幕右侧又消失了。

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，所以如果你愿意的话，你可以亲眼目睹这个奇怪的行为。

登录使用

客人 - 用户名
访客 - 密码

感谢您的宝贵时间

编辑好的，我已将问题进一步缩小到变量 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 时，位置返回正常，并且精灵确实出现在它应该没有正确移动的位置

【问题讨论】：

看起来location_X 和location_Y 是字符串而不是数字。因此，计算不会像您期望的那样工作（例如，加法将导致串联）。在读取 JSON 有效负载时，尝试将 parseInt() 应用于这些值。
如果你在我身边，我会拥抱你！！这一点我都没有想到，非常感谢！一直在寻找年龄！，请将此作为分析器，以便我可以将其标记为这样并支持它，谢谢

标签： javascript jquery ajax html

【解决方案1】：

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

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

【讨论】：