Question

这是代码：

$(document).ready(function(){

        var mUp=false;
        var mLeft=false;
        var mRight=false;

        function movement(){
            $(function(){
                if(mUp){
                    $('.user').animate({
                        bottom: '+=120'
                    },{
                        duration: 50,
                        easing: 'linear',
                        complete: function() {
                            $('.user').animate({
                                bottom: '-=120'
                            },{
                                duration: 150,
                                easing: 'linear',
                                complete: function() {
                                    mUp=false;
                                    if(!mRight&&!mLeft){
                                        $('.user').stop();
                                    }
                                }
                            }).dequeue();
                        }
                    }).dequeue();
                }

                if(mRight){
                    $('.user').animate({
                        left: '+=1000'
                    },{
                        duration: 1000,
                        easing: 'linear',
                    }).dequeue();
                }

                if(mLeft){
                    $('.user').animate({
                        left: '-=1000'
                    },{
                        duration: 1000,
                        easing: 'linear',
                    }).dequeue();
                }
            });
        }



        $(document).keydown(function(e){
            var curKey=e.keyCode;
            if(curKey==39){
                console.log('right+');
                if(!mRight){
                    mRight=true;
                    movement();
                }
            }
            if(curKey==37){
                if(!mLeft){
                    mLeft=true;
                    movement();
                }
            }
            if(curKey==38){
                console.log('up+');
                if(!mUp){
                    mUp=true;
                    movement();
                }
            }
        });

        $(document).keyup(function(e){
            var curKey=e.keyCode;
            if(curKey==39){
                console.log('right-');
                if(!mUp){
                    $('.user').stop();
                }
                mRight=false;
            }
            if(curKey==37){
                console.log('left-');
                if(!mUp){
                    $('.user').stop();
                }
                mLeft=false;
            }
            if(curKey==38){
                console.log('up-');
            }
        });
    });

我正在为一个基于jQuery的游戏开发一个简单的移动系统。我可以向左或向右移动角色并跳跃。当跳跃动画仍在进行中时，尝试向左或向右移动角色时我的问题就开始了。如果我在向左或向右移动时跳跃一切正常但当我第一次跳跃时，当跳跃动画仍然有效时，尝试向左或向右移动它有点疯狂。

JSFIDDLE：CLICK

Answer 1

问题是动画“up”会同时执行多次。

按向上键 - ＆gt; mUp变为true，movement被调用，“向上”动画开始。
按左键 - ＆gt; mLeft变为true，movement被调用，因为mUp仍为真，“向上”动画再次启动。

您应该检查当您调用移动功能动画时，如果它已在进行中，则不会启动。

function movement(){
    $(function(){
        if(mUp && !mUpInProgress){
           //...
        }
     });
}

JSFiddle

jQuery游戏角色动作系统

1 个答案: