I created a simple snake game after following some simple tutorials on YouTube. 

The problem is that the game does not have a pause function (e.g. when pressing P the game should pause/resume) and when the snake hits the border of the canvas the game restarts itself (but that is another problem). 

Here is the complete code I have of the game: <https://pastebin.com/URaDxSvF>

The pause-related functions I've created:

```
function gamePaused{ /**i need help on this**/ }

function keyDown(e) {
  if (e.keyCode == 80) pauseGame();
}

function pauseGame() {
  if (!gamePaused) {
    game = clearTimeout(game);
    gamePaused = true;
  } else if (gamePaused) {
    game = setTimeout(loop, 1000 / 30);
    gamePaused = false;
  }
}

```
['https://Stackoverflow.com/questions/43814422', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/7971087/']
Game state managment
--------------------

Games will usually have various game states. Pause, End game, Press key to start, etc... As the optimal way to run a game is via a single main loop the easiest way to manage game states is to have variable hold the current state function and just assign that variable the appropriate function to handle the current state.

**BTW** you should use `requestAnimationFrame` instead of `setTimeout` or `setinterval` and `keyCode` should not be used as it is depreciated use `keyEvent.code` (see example for details)

```
requestAnimationFrame(mainLoop);  // start when code below done.
// set up keyboard IO
const keys = {
    KeyP : false,
    Enter : false,
    listener(e){
       if(keys[e.code] !== undefined){
           keys[e.code] = e.type === "keydown";
           e.preventDefault();
        }
    }
}
addEventListener("keydown",keys.listener);
addEventListener("keyup",keys.listener);

// the current game state
var currentState = startGame;

function startGame (){
    // code to do a single frame of start game
   // display press enter to start
   if(keys.Enter){
      keys.Enter = false;
      currentState = game;  // start the game
   }
}
function pause(){
    // code to do a single frame of pause
   // display pause
    if(keys.KeyP){
       keys.KeyP = false; // turn off key
       currentState = game;   // resume game
    }

}
function game(){
    // code to do a single frame of game
    if(keys.KeyP){
       keys.KeyP = false; // turn off key
       currentState = pause;  // pause game
    }
}
function mainLoop(time){
    currentState(); // call the current game state
    requestAnimationFrame(mainLoop);
}

```

Reference:
<https://developer.mozilla.org/es/docs/Web/API/KeyboardEvent>
Your game loop is not based on `setTimeout`, but on `requestAnimationFrame`. So setting and clearing a timer will not change anything.

Secondly, you did not bind your `keyDown` function to any event, so it will never get invoked.

### Solution:

Have a look at your `loop` function: it calls itself asynchronously, which provides the animation. You need to stop that loop to effectively introduce a pause:

```
function loop() {
    if (gamePaused) return; // <--- stop looping
    update();
    draw();
    window.requestAnimationFrame(loop, canvas);
}

```

Define the new variable upon page load, and bind your function to the `keyDown` event:

```
var gamePaused = false;
document.addEventListener('keydown', keyDown);

```

And your `pauseGame` function would look like this:

```
function pauseGame() {
    gamePaused = !gamePaused; // toggle the gamePaused value (false <-> true)
    if (!gamePaused) loop(); // restart loop
}

```