키보드로 div 이동 (requestAnimationFrame이 작동하지 않음)

Question

저는 JS에 익숙하지만 스네이크 게임을 쓰고 싶습니다. 문제가 붙어있는 과정에서 : 나는 div를 애니메이트하기 위해 requestAnimationFrame을 사용하고 있습니다. 모든 것이 작동합니다 (div는 움직입니다). 그러나 방향을 바꾸기 위해 switch statment를 작성하기 시작할 때 코드가 끊깁니다.
결과에서 keybord 화살표로 방향을 변경할 기회가 없어도 requestAnimationFrame으로 div를 이동하거나 keybord 화살표를 누르지 않으면 애니메이션없이 방향을 이동하고 방향을 변경할 수있는 두 가지 중 하나를 수행 할 수 있습니다. 애니메이션을 키 조합 조작과 결합하도록 누군가도 도와 줄 수 있습니까? 여기

내 코드입니다 : 문제의

// field object 
    var fieldObj = { 
     field: document.getElementById("field"), 
     w: 480, 
     h: 580 
    }, 
snakeObj = { 
    snake: document.getElementById("snake"), 
    p: { 
     x: 0, // position x 
     y: 0 // position y 
    }, 
    v: { 
     x: 2, // velocity(here you can change speed) 
     y: 2 
    }, 
update: function(event) { 
     event = event || window.event; 
     switch(event.keyCode) { 
     case 40: 
      this.p.x += this.v.x; 
      break; 
     case 38: 
      this.p.x -= this.v.x; 
      break; 
     case 39: 
      this.p.y += this.v.y; 
      break; 
     case 37: 
      this.p.y -= this.v.y; 
      break; 
     } 
    this.snake.style.top = this.p.x + "px"; 
    this.snake.style.left = this.p.y + "px" 
    } 
} 

window.addEventListener('keydown', function gameLoop() { 
    snakeObj.update(); 
    requestAnimationFrame(gameLoop); 
}, false); 

Codepen (여기 DIV movung하지만 조작에 기회없이) 도움으로 모든 도움

에 대한 http://codepen.io/Kuzyo/pen/esFbf
덕분에, 내가 누를 때 달성 왼쪽 div가 왼쪽으로 이동하면 오른쪽으로 방향을 전환 할 수 있지만 왼쪽으로 다시 이동하려면 계속 오른쪽으로 이동하십시오. 위아래로 동일합니다. 여기

코드 업데이트됩니다 http://codepen.io/Kuzyo/pen/esFbf

Answer 1

첫째는, 애니메이션 프레임을 요구 한 후 업데이트가 전화를, 이것은 당신에게 약간 부드러운 시간을 제공합니다.

//declare and start the game loop 
(function gameLoop(){ 
    requestAnimFrame(gameLoop); 
    snakeObj.update(); 
})(); 

이제 애니메이션 프레임을 설정했습니다. 즉, 키 이벤트에 관계없이 update()이 모든 프레임에서 호출됩니다. 이제 우리가해야 할 일은 키 이벤트에 몇 가지 스위치를 설정하는 것입니다.

window.addEventListener('keydown', function() { 

    switch(event.keyCode) { 
    case 40: 
     snakeObj.keys.left = true; 
     break; 

    ... 

    } 
}, false); 

플래그를 false로 설정하려면 keyup 이벤트가 필요합니다. 업데이트시에는 키 데이터를 읽고 이동하십시오. 뭔가 같이 :

this.update() { 

    //read the keys and move accordingly 
    if(this.keys.left) { 
     this.p.x -= 5; 
    } 

    ... 

}