Question

我用 JavaScript 和

做了一个简单的蛇游戏

我想添加一个功能，该功能可以在以下情况下暂停和恢复游戏单击某个图像，

我对函数的功能感到困惑。

这是我要添加的功能，但仍然为空：

function gamepaused(){

}
function gameResume(){

}
const pause = document.getElementById('pause').addEventListener('click', gamePaused)
const resume = document.getElementById('play').addEventListener('click', gameResume)

这是我的gameLoop函数的内部，该函数显示蛇如何移动：

function gameLoop(){

position.x += movement.x
position.y += movement.y

//if snake eats the snack
if (snack.x == position.x && snack.y == position.y) {
    snake.push({...position})
    position.x += movement.x
    position.y += movement.y
    drawSnack()
    score ++
}

//if head bump with body
if (movement.x || movement.y) {
    for (let body of snake) {
        if( body.x == position.x && body.y == position.y){
            return init()
        }
    }
    //this is what makes the snake moves forward
    snake.push({...position})
    snake.shift()

  }

  drawScore(score)



 // if head hits the wall, still in game.

  if (position.x < 0 ){
      position.x = TILE
  }
  else if (position.y < 0){
      position.y = TILE
  }
  else if (position.x > TILE)  {
      position.x = -1
  }
  else if (position.y > TILE){
      position.y = -1
  }


}
setInterval (function (){
    requestAnimationFrame (gameLoop)
}, INTERVAL)

，如果您需要查看完整的代码，则可以单击here查看该游戏的github存储库。

谢谢！

Answer 1

当有人按下“暂停”按钮时，将var值设置为“暂停”（是/否）然后在游戏循环中检查游戏是否暂停并停止设置时间间隔。单击简历后，您可以再次设置间隔（无延迟），当然也可以将暂停的var设置为false。

另一种方法是像以前一样暂停var，然后将所有游戏循环代码（除了间隔）放入if语句中，以检查var是true还是false（已暂停或未暂停）

Answer 2

将setInterval值保留在变量中，然后调用clearInterval暂停。喜欢：

let interval

interval = setInterval (function (){
    requestAnimationFrame (gameLoop)
}, INTERVAL)

并将代码添加到您的暂停和恢复功能。

function gamepaused(){
  clearInterval(interval);
}

function gameResume(){
   interval = setInterval (function (){
        requestAnimationFrame (gameLoop)
    }, INTERVAL)
}

如何暂停和恢复使用香草javascript编写的简单蛇游戏？

2 个答案: