이벤트가 발생하지 않고 각 루프 이후에 var yPosition이 증가하는 이유는 무엇입니까?

Question

var canvas = document.getElementById('gameCanvas'); 
var ctx = canvas.getContext('2d'); 
var xPosition = 0; 
var yPosition = 0; 
var frameLength = 20; 

function gameLoop(){ 

    gameUpdate(); 
    setTimeout(function(){gameLoop()}, frameLength); 
} 

function gameUpdate(){ 

ctx.clearRect(0, 0, 480, 640); 
window.addEventListener('keydown', function(event){switch(event.keyCode){case 38: yPosition -= 1; break; case 40: yPosition += 1; break;}}, false); 
ctx.fillRect(xPosition, yPosition, 50, 50); 

} 

$(document).ready(function() { 
gameLoop(); 
}); 

화살표 키를 사용하여 캔버스에서 사각형을 이동하려고합니다. X 및 Y 위치는 변수 xPosition 및 yPosition입니다. 지금은 Y 방향을 엄격하게 다루기 때문에 "keydown"에 대한 eventlistener에 의해 트리거되는 스위치 기능이 있습니다. 예를 들어, 아래쪽 화살표 키를 누르면 Y 값이 fillRect(X, Y, originX, OriginY)으로 증가합니다. 그러면 전역 변수가 변경되고 새 좌표로 새 사각형이 Canvas에 그려집니다. GameLoop 재설정, 헹굼 반복. 그것이 내가 이론으로 작동하는 것을인지하는 방법입니다.

그러나 아무 이유없이 내가 아무 것도하지 않더라도 스크립트를 실행 시키면 길어질수록 "위"가 위로 또는 아래로 누르면 점프가 점프됩니다. 즉, 누를 때마다 setTimeout 루프 횟수에 의해 결정되는 많은 픽셀이 캔버스에서 시작됩니다. 왜 이것이, 어떻게 그것을 해결할 수 있습니까?

Answer 1

이벤트를 여러 번 추가하는 중입니다. 하지 키를 여러 번 발견 될 경우

window.addEventListener('keydown', function(event){switch(event.keyCode){case... 

당신이 그것을에있는 동안 당신은 또한 핸들러에서 preventDefault에 던질 수

을 축적 그에 : : 그냥 전역에이 줄을 이동

window.addEventListener('keydown', function(event){ 
    if (event.preventDefault) event.preventDefault(); 
    switch(event.keyCode){case ...