Question

好吧，当你按住键盘上的键时，第一次发射后会有1秒的延迟。
您可以继续打开记事本并按住一个键（e.x'x'），您会在第一次火灾后看到延迟。

然而，我正在尝试使用JavaScript开发HTML5 Canvas游戏，而且1秒延迟非常烦人，另外，它会阻止玩家行走动画..

那么如何删除JavaScript中的烦人延迟（没有jQuery！）??

我的keydown事件以这种模式运作 -

document.onkeydown = getKey;
function getKey(e) {
    switch(e.keyCode) {
        case 38: // UP
            Player.PositionY--;
        break;
        case 39: // RIGHT
            Player.PositionX++;
        break;
        case 40: // DOWN
            Player.PositionY++;
        break;
        case 37: // LEFT
            Player.PositionX--;
        break;
    }
}

提前致谢：）

Answer 1

您可以在keydown上启动活动并在keyup

上停止活动

$('#mycanvas').on('keydown', function() { 
   $(document).trigger('start'); 
}); 

$('#mycanvas').on('keyup', function() { 
   $(document).trigger('stop'); 
});

$(document).on('start', startAnimation);
$(document).on('stop', stopAnimation);

function startAnimation(e) { //start something }
function stopAnimation(e) { //stop something }

Answer 2

相反，请先按按<键>按键，然后再听取它的发布时间。这也意味着您必须记录当前的移动速度状态，以便在这些事件之间应用它。

此示例仅用于向前行走的服务器，应该很容易扩展到其他方向。

var playerSpeed = 0;

document.onkeydown = keyDown;
document.onkeyup = keyUp;

function keyDown(e) {
    switch(e.keyCode) {
        case 38: // UP
            playerSpeed = 1; // moving!
            break;
        // other cases...
    }
}

function keyUp(e) {
    switch(e.keyCode) {
        case 38: // UP
            playerSpeed = 0; // NOT moving!
            break;
        // other cases...
    }
}

// Whatever loop is called for each frame or game tick
function updateLoop() {
  // rendering, updating, whatever, per frame
  Player.PositionY += playerSpeed;
}

这样，键盘的重复率无关紧要。每onkeydown，最终总会有一个onkeyup。所有你需要做的事情，并在这些事件之间以不同的方式更新事物。

Answer 3

你很幸运，我只是为游戏编码。

Controller = {
    keyIsDown: [],

    // Add a new control. up is optional.
    // It avoids key repetitions
    add: function (key, down, up) {
        $(document).keydown(function(e) {
            if(e.keyCode === key && !Controller.keyIsDown[key]) {
                    down()
                Controller.keyIsDown[key] = true
                return false
            }
        })

        $(document).keyup(function(e) {
            if(e.keyCode === key) {
                if(up) up()
                Controller.keyIsDown[key] = false
                return false
            }
        })
    },
}

示例：

Controller.add(65,
    function () {
        console.log("A is down")
    },
    // This argument is optional
    function () {
        console.log("A is up")
})

删除JavaScript中的keydown延迟？

3 个答案: