2

我如何在用户“keydown”时移动元素，然后如果他让“keyup”停止动画（移动），这是我现在的代码

$(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

是你要找的吗？

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

演示：http: //jsfiddle.net/LjGREe/

于 2012-05-27T13:07:38.967 回答
3

您需要一个简单的 2D 引擎来设置游戏循环。

简单演示：http: //jsfiddle.net/kzXek/

来源：https ://github.com/superrob/simple-2D-javascript-engine/blob/master/simple2d.html

于 2012-05-27T14:08:48.457 回答
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 回答