2

ユーザーが「キーダウン」しているときに要素を移動するにはどうすればよいですか

$(document).ready(function(){

    function checkKey(e){
         switch (e.keyCode) {
            case 40:
                //alert('down');
                $('#cube').animate({top: "+=20px"})
                break;
            case 38:
                //alert('up');
                $('#cube').animate({top: "-=20px"})
                break;
            case 37:
                //alert('left');
                $('#cube').animate({left: "-=20px"})
                break;
            case 39:
                //alert('right');
                $('#cube').animate({left: "+=20px"})
                break;
            default:
                alert('???');  
                }      
    }

    if ($.browser.mozilla) {
        $(document).keydown (checkKey);
    } else {
        $(document).keydown (checkKey);
    }
})

ユーザーがキーを押している間 (下、左、上、右)、押すたびにキューブを移動したいのですが、可能ですか?

4

4 に答える 4

3

ゲームループを設定するシンプルな2Dエンジンが必要です。

簡単なデモ： http： //jsfiddle.net/kzXek/

ソース：https ：//github.com/superrob/simple-2D-javascript-engine/blob/master/simple2d.html

于 2012-05-27T14:08:48.457 に答える
3

それはあなたが探しているものですか？

$(document).on("keyup", function() {
    $("#cube").stop(true);
});

デモ: http://jsfiddle.net/LjGRe/

于 2012-05-27T13:07:38.967 に答える
0

checkKey 関数を変更して、これを追加するだけです。

   function checkKey(e){
          $(document).keyup(return);
         switch (e.keyCode) {
            case 40:
                //alert('down');
                $('#cube').animate({top: "+=20px"})
                break;
            case 38:
                //alert('up');
                $('#cube').animate({top: "-=20px"})
                break;
            case 37:
                //alert('left');
                $('#cube').animate({left: "-=20px"})
                break;
            case 39:
                //alert('right');
                $('#cube').animate({left: "+=20px"})
                break;
            default:
                alert('???');  
                }      
    }
于 2012-05-27T13:08:47.953 に答える
0

タイマーを使用してアニメーションを処理する方が良いと思います。

キーを押したときにタイマーを開始し、キーを離したときにタイマーを停止するだけです..

これは、複数のキープレスを処理する簡単なソリューションです（斜めに移動できます）

var direction = {top:0,left:0},
    animator = null,
    cube = $("#cube");

function animate(){
    cube.css({
        top: '+=' + direction.top,
        left: '+=' + direction.left
    });
}
function setProperties(keyCode, unset){
        switch (keyCode) {
        case 40:
                direction.top = (unset)?0:2;
            break;
        case 38:
            direction.top = (unset)?0:-2;
            break;
        case 37:
            direction.left = (unset)?0:-2;
            break;
        case 39:
            direction.left = (unset)?0:2;
            break;
    }  
}
function setKey(e) {

    setProperties(e.keyCode);

    if (animator === null){
        animator = setInterval(animate, 10);
    }
}
function unsetKey(e){
    setProperties(e.keyCode, true);
    if (direction.top === 0 && direction.left === 0){
        clearTimeout(animator);
        animator = null;
    }
}

$(document)
    .on("keyup", unsetKey)
    .on('keydown', setKey);

http://jsfiddle.net/gaby/Cu6nW/のデモ

于 2012-05-27T13:58:31.720 に答える