Cómo fijar retraso en Javascript keydown

Question

Duplicar posible:
JavaScript move delay and multiple keystrokes

Soy nuevo y aprender canvas de HTML5 junto con javascript. Creé un evento para mover un objeto a la izquierda y a la derecha, y mi problema es el retraso cada vez que mantienes presionada la tecla o cambias a otra tecla. Sé que falta mi código a continuación, por favor, ayúdenme. Gracias de antemano.

c.addEventListener('keydown',this.check,true); 
    function check(el) { 
    var code = el.keyCode || el.which; 
    if (code == 37 || code == 65){ 
    x -=1; 
    } 

    if (code == 39 || code == 68){ 
    x += 1; 
    } 

    el.preventDefault(); 
} 

Answer 1

lugar de tratar de reaccionar directamente con el evento KeyDown, sugeriría que utilice los eventos KeyDown y KeyUp para mantener una lista de las teclas que están actualmente hacia abajo. Luego implemente un "bucle de juego" que verifique cada x milisegundos qué teclas están caídas y actualice la pantalla en consecuencia.

var keyState = {};  
window.addEventListener('keydown',function(e){ 
    keyState[e.keyCode || e.which] = true; 
},true);  
window.addEventListener('keyup',function(e){ 
    keyState[e.keyCode || e.which] = false; 
},true); 

x = 100; 

function gameLoop() { 
    if (keyState[37] || keyState[65]){ 
     x -= 1; 
    }  
    if (keyState[39] || keyState[68]){ 
     x += 1; 
    } 

    // redraw/reposition your object here 
    // also redraw/animate any objects not controlled by the user 

    setTimeout(gameLoop, 10); 
}  
gameLoop(); 

Se dará cuenta de que esto le permite manejar múltiples teclas a la vez, por ejemplo, si el usuario presiona la izquierda y hacia arriba junto flechas, y el problema de la demora entre los eventos posteriores keydown cuando una tecla se mantiene pulsada va lejos, ya que todo lo que realmente importa es si se ha producido una copia de teclado.

que se dan cuenta de que no puede estar implementando un juego, pero este concepto "bucle del juego" debe trabajar para usted como se muestra en esta simple demostración: http://jsfiddle.net/nnnnnn/gedk6/