0

ムービングを作ってみましたが、img部分的に動作します。右、上、下のボタンを押すと、右、上、下に移動します。しかし、左ボタンを押すと、非常に速く右にジャンプし、次に左に戻って動きを止めません（私はそれが速いと言いました）。

JSFiddle ;
Javascript：

$(document).ready(function() {
    var up = down = left = right = false;
    var top = 100, left = 500;
    $("body").on("keydown", function(e) {
        if(e.keyCode == 39) {e.preventDefault(); if (right == false) right = setInterval(moveRight, 80);}
        else if(e.keyCode == 37) {e.preventDefault(); if (left == false) left = setInterval(moveLeft, 80);}
        else if(e.keyCode == 38) {e.preventDefault(); if (up == false) up = setInterval(moveUp, 80);}
        else if(e.keyCode == 40) {e.preventDefault(); if (down == false) down = setInterval(moveDown, 80);}
    });
    $("body").on("keyup", function(e) {
        if(e.keyCode == 39) {clearInterval(right); right = false;}
        else if(e.keyCode == 37) {clearInterval(left); left = false;}
        else if(e.keyCode == 38) {clearInterval(up); up = false;}
        else if(e.keyCode == 40) {clearInterval(down); down = false;}
    });

    function moveUp() {
        top -= 2;
        $("#player").css("top", top + "px");
    }
    function moveDown() {
        top += 2;
        $("#player").css("top", top + "px");
    }
    function moveLeft() {
        left -= 2;
        $("#player").css("left", left + "px");
    }
    function moveRight() {
        left += 2;
        $("#player").css("left", left + "px");
    }
});

これはおそらくこれを行うための最良の方法ではありません、私はより良い提案を開いています。

4

2 に答える 2

2

2つの「左」変数を定義していて、それらが互いに邪魔になっています。それらの名前の1つ（おそらくinterval変数のleftInterval）を変更すると、状況は良くなるはずです。

于 2012-07-03T15:09:08.863 に答える
0

変数は上書きされます。次のようにしてみてください。

$("body").on("keydown", function(e) {
    e.preventDefault();
    var elm = $("#player"),
        top = parseInt(elm.css('top')),
        left = parseInt(elm.css('left'));

    switch(e.which) {
        case 37:
            elm.css("left", left-2);
        break;
        case 38:
            elm.css("top", top-2);
        break;
        case 39:
            elm.css("left", left+2);
        break;
        case 40:
            elm.css("top", top+2);
        break;
    }
});

FIDDLE

于 2012-07-03T15:13:01.640 に答える