Question

我是JS的新手，但想写Snake游戏。在遇到问题的过程中：我正在使用requestAnimationFrame为div设置动画，一切正常（我的div正在移动），但是当我开始编写切换语句以改变方向时，我的代码就会中断。
结果我可以实现两个中的一个：使用requestAnimationFrame移动我的div而没有机会用键盘箭头改变方向，或者如果我停止按下键盘箭头则移动和改变方向但没有动画。有人可以帮我组合动画和键盘操作吗？

这是我的代码：

 // 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);

问题的编解码（此处为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);

您还需要keyup事件将标志设置为false。更新时，只需读取关键数据并移动即可。类似的东西：

this.update() {

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

    ...

}

用键盘移动div（requestAnimationFrame不工作）

1 个答案: