html5 canvas - Remove keydown delay in JavaScript? - Stack Overflow

admin管理员组

文章数量:1345435

Well, when you hold a key on your keyboard, after the first fire there is a 1sec delay.
You can go ahead and open notepad and hold a key (e.x 'x') you'll see after the first fire there is a delay.

However, I'm trying to develop a game in HTML5 Canvas with JavaScript, and that 1sec delay is very annoying, Additionally, it stops the player walking animation..

So how can I delete that annoying delay in JavaScript ( no jQuery! ) ?

My keydown event works in this pattern -

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;
    }
}

Well, when you hold a key on your keyboard, after the first fire there is a 1sec delay.
You can go ahead and open notepad and hold a key (e.x 'x') you'll see after the first fire there is a delay.

However, I'm trying to develop a game in HTML5 Canvas with JavaScript, and that 1sec delay is very annoying, Additionally, it stops the player walking animation..

So how can I delete that annoying delay in JavaScript ( no jQuery! ) ?

My keydown event works in this pattern -

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;
    }
}

• javascript
• html5-canvas
• dom-events

Share Improve this question Follow edited Oct 19, 2019 at 13:43 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 21, 2013 at 23:21 julianjulian 4,7141111 gold badges4545 silver badges6060 bronze badges 2

• 1 There is a simple solution: Don't rely on OS repeating, roll your own event loop that polls your keyboard class (optionally: only if there is something happening). – John Dvorak Commented Jan 21, 2013 at 23:26
• @JanDvorak Yeah I've got that thanks :) – julian Commented Jan 21, 2013 at 23:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

you could start an event on keydown and stop it on 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 }

Instead, listen for when the key is first pressed, and then listen for when it's released. This also means that you have to record the current state of movement speed somewhereso you can apply it between those events.

This example will only serve for walking forward, it should be easy to extend to the other directions.

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;
}

This way, it doesn't matter what the repeat rate of the keyboard is. Every onkeydown, will always eventually have an onkeyup. All you have to do and update things a different way inbetween those events.

You're lucky, I just code this for a game.

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
            }
        })
    },
}

Example:

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

本文标签： html5 canvasRemove keydown delay in JavaScriptStack Overflow