0


我是 JS 新手，但想写 Snake 游戏。在遇到问题的过程中：我正在使用 requestAnimationFrame 为 div 设置动画，一切正常（我的 div 正在移动），但是当我开始编写 switch 语句以改变方向时，我的代码会中断。
结果，我可以实现两者之一：使用 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);

Codepen 的问题（这里 div movung 但没有机会操纵）http://codepen.io/Kuzyo/pen/esFbf
感谢您的每一个帮助

在帮助下，我实现了当我按下左 div 向左移动时，我可以向右切换方向，但是如果我想让他再次向左移动，他会继续向右移动。上下也一样。

这是更新的代码：http ://codepen.io/Kuzyo/pen/esFbf

4

1 回答 1

0

首先，在请求动画帧后调用你的更新，这会让你的时间稍微平滑一些。

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

    ...

}
于 2013-08-02T14:33:26.847 回答