Question

我正在制作游戏并且遇到问题，因为当按下左键时，角色应该向左移动，当按下右键时，角色应该向右移动。这一切都正常，但问题是当按下一个键时，角色会在相应的方向上稍微移动，等待大约半秒直到计算机意识到按键被按下，然后角色按照我想要的方式移动。按住键后如何摆脱延迟？这是我移动角色的代码。

$(document).keydown(function(key) {
    switch(parseInt(key.which, 10)) {
        case 37:
            $('#player').animate({left:'-=5px'}, 1);
            break;
        case 39:
            $('#player').animate({left:'+=5px'}, 1);
            break;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

如果您想以可控方式进行密钥重复，则必须这样做自己实现它，因为按键事件是依赖于操作系统关于如何重复键的想法。这意味着可能存在变数初始和后续延迟，并一次按住两个键导致其中只有一个重复。

我从this回答中获取了代码（以及该引用）并将其与您的代码混合了一些，因此它适用于您的#player元素。请查看该链接中的问题和答案。我删除了原始注释，使这里发布的代码更短，但它们很有用，所以你知道你在做什么。

代码（jsFiddle）：

function KeyboardController(keys, repeat) {

    var timers= {};

    document.onkeydown= function(event) {
        var key= (event || window.event).keyCode;
        if (!(key in keys))
            return true;
        if (!(key in timers)) {
            timers[key]= null;
            keys[key]();
            if (repeat!==0)
                timers[key]= setInterval(keys[key], repeat);
        }
        return false;
    };

    document.onkeyup= function(event) {
        var key= (event || window.event).keyCode;
        if (key in timers) {
            if (timers[key]!==null)
                clearInterval(timers[key]);
            delete timers[key];
        }
    };

    window.onblur= function() {
        for (key in timers)
            if (timers[key]!==null)
                clearInterval(timers[key]);
        timers= {};
    };

}

KeyboardController({
    37: function() { $('#player').animate({left:'-=5px'}, 100); },
    39: function() { $('#player').animate({left:'+=5px'}, 100); }
}, 100);

我还根据自己的喜好调整了你的动画设置和KeyboardController“重复”参数（实际上有点随机）。玩这些参数，看看你最喜欢什么。

按键之间没有延迟

1 个答案: