Comment mettre en pause et reprendre un simple jeu de serpent écrit en javascript vanille ?

Question

J'ai créé un simple jeu de serpent en JavaScript y

J'aimerais ajouter une fonction permettant au jeu d'être pau lorsqu'une certaine image est cliquée,

et j'ai du mal à comprendre comment la fonction devrait se dérouler.

c'est la fonction que je veux ajouter, mais elle est toujours vide :

function gamepaused(){

}
function gameResume(){

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

et voici l'intérieur de ma fonction gameLoop qui montre comment le serpent se déplace :

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)

et vous pouvez cliquer sur ici pour voir le repo github de ce jeu, si vous avez besoin de voir le code complet.

Merci de votre attention !

Answer 1

Lorsque quelqu'un appuie sur le bouton pause, check définit la valeur d'une variable à paused (true/false). Ensuite, dans la boucle du jeu, on vérifie si le jeu est en pause et on arrête de régler l'intervalle. Lorsque l'on clique sur le bouton de reprise, on peut à nouveau définir l'intervalle (sans le délai) et, bien sûr, mettre la valeur de la variable paused à false.

Une autre façon de faire est d'avoir la var en pause comme avant et de mettre tout le code de la boucle du jeu sauf l'intervalle dans une instruction if qui vérifie si la var est vraie ou fausse (en pause ou non).

Answer 2

Maintenir la valeur de setInterval dans la variable et appeler clearInterval pour mettre en pause. comme :

let interval

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

Et ajoutez du code à votre fonction de pause et de reprise.

function gamepaused(){
  clearInterval(interval);
}

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