1

jQueryと十字キーを使って古いマリオゲームを再現しようとしていますが、左右をスムーズに動かしながら、設定した量だけジャンプしたり、倒れたりするのに問題があります。これまでの私のプロジェクトは次のとおりです。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');
            }
        }
    }
}

これをどのように行うことができるかについてのアイデアはありますか？ご覧のように、ジャンプ動作が完了した後、横に移動します。

4

1 に答える 1

2

アニメーションステートメントが衝突しています。また、すでにintervalを使用しているため、左右に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");
        }
    }
于 2013-02-21T20:17:45.217 に答える