jquery - 平稳运动

Question

我正在尝试使用 jQuery 和 d pad 重新创建旧的马里奥游戏，我在让他跳起来和跌落一定量时遇到了麻烦，而右/左仍然平稳移动。到目前为止，这是我的项目：http: //jsfiddle.net/Zeaklous/NpKgc/1/

$(document).ready(function () {
$(document).keydown(function (key) {
    switch (parseInt(key.which, 10)) {
        case 38:
            $(".mario").animate({
                top: "-=50px"
            });
            $(".mario").animate({
                top: "+=50px"
            });
            break;
        default:
            break;
        case 83:
            $(".mario").addClass("crouching");
            $('.mario').attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSstp0TMfI46ImPw3Ynoq8N64Trn9ew70Dzh8NR4u4VLm40nccV');
            break;
    }
    });
});
setInterval(movePlane, 20);
var keys = {};
$(document).keydown(function (e) {
    keys[e.keyCode] = true;
});
$(document).keyup(function (e) {
    delete keys[e.keyCode];
});
function movePlane() {
    for (var direction in keys) {
        if (!keys.hasOwnProperty(direction)) continue;
        if (direction == 37) { //left
            $(".mario").animate({
                left: "-=5"
            }, 0);
            if (!$('.mario').hasClass('flipped')) {
                $(".mario").toggleClass("flipped");
            }
        }
        if (direction == 39) { //right
            $(".mario").animate({
                left: "+=5"
            }, 0);
            if ($('.mario').hasClass('flipped')) {
                $(".mario").toggleClass("flipped");
            }
        }
        if (direction == 40) { //down 
            if (!$(".mario").hasClass(!"crouching")) {
                $(".mario").toggleClass("crouching");
                $('.mario').attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSstp0TMfI46ImPw3Ynoq8N64Trn9ew70Dzh8NR4u4VLm40nccV');
            }
        }
    }
}

关于我如何做到这一点的任何想法？如图所示，它在跳跃动作完成后向侧面移动。

Answer 1

你的动画语句正在发生冲突。并且由于您已经在使用间隔，因此无需对左右使用 animate ：

http://jsfiddle.net/NpKgc/3/

    if (direction == 37) { //left
        $(".mario").css({
            left: "-=2"
        });
        if (!$('.mario').hasClass('flipped')) {
            $(".mario").toggleClass("flipped");
        }
    }
    /*if (direction == 38) {//up
        $(".mario").animate({top: "-=5"}, 0);
    }*/
    if (direction == 39) { //right
        $(".mario").css({
            left: "+=2"
        });
        if ($('.mario').hasClass('flipped')) {
            $(".mario").toggleClass("flipped");
        }
    }