JQuery同时按键答案

【问题标题】：JQuery while keydownJQuery同时按键
【发布时间】：2012-05-27 13:03:56
【问题描述】：

如何在用户“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);
    }
})

我想在用户按下键（下、左、上、右）时移动立方体，而不是每次按下都可以？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

是你要找的吗？

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

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

【讨论】：

但是我怎样才能在 keydown 时进行循环？因为立方体随着每次按键而移动，但我不希望这样，我希望立方体在按下键时移动
@BlareStriker 你说的循环是什么意思？现在它应该不断移动立方体，直到您松开按键。
КорочеЯжмуодинразиондвигаетсяна20пикселей，аяхочучтобыонпостоянно+ = 20пикселейприбавлялпокаядержуклавишу，янезнаюможетчерез而сделать?,атоящаскакуюнитьхрень сделаю, думаю есть грамотный способ поетому спрашиваю
@BlareStriker 好吧，这可能取决于浏览器，因为在我的 Chrome 中它可以完美运行。还有keypress 事件，但是用它来捕捉箭头键可能会有问题。从此页面：unixpapa.com/js/key.html 第 2.2 节，您可以了解到不同的浏览器和操作系统以不同的方式处理自动重复事件。 Короче, охренеешь под каждый подстраиваться。

【解决方案3】：

您可以更改 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('???');  
                }      
    }

【讨论】：

没关系，是的，当我按下“keyup”时它会停止，但是如何在按下“keydown”时进行循环移动

【解决方案4】：

我认为使用计时器来处理动画会更好。

您只需在按下某个键时启动计时器，并在释放该键时停止它..

这是一个处理多个按键的简单解决方案（可以对角移动）

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/

【讨论】：

这个检查有什么意义？：if (direction.top === 0 && direction.left === 0){...}
在所提供代码的上下文中，如果在任一方向（水平或垂直）上没有移动，此检查将停止计时器