Add pause key in a game javascript

Question

I create little game but I have some trouble to put a pause key. It doesn't work. Can you see what is wrong and correct me? Thanks. I would like to know how to implement a pause key and a key for restart for not refresh the page for do it.

Link of the game code:

//this is where the keybinding occurs
$(document).keydown(function(e){
    if(!gameOver && !playerHit){
    if (!gamePaused) {
        game = clearTimeout(game);
        gamePaused = true;
        } else if (gamePaused) {
            game = setTimeout(gameLoop, 1000 / 30);
            gamePaused = false;
            }

Keys down:

        switch(e.keyCode){
            case 75: //this is shoot (k)
                //shoot missile here
                var playerposx = $("#player").x();
                var playerposy = $("#player").y();
                var name = "playerMissle_"+Math.ceil(Math.random()*1000);
                $("#playerMissileLayer").addSprite(name,{animation: missile["player"], posx: playerposx + 90, posy: playerposy + 14, width: 36,height: 10});
                $("#"+name).addClass("playerMissiles")
                break;
            case 65: //this is left! (a)
                $("#playerBooster").setAnimation();
                break;
            case 87: //this is up! (w)
                $("#playerBoostUp").setAnimation(playerAnimation["up"]);
                break;
            case 68: //this is right (d)
                $("#playerBooster").setAnimation(playerAnimation["booster"]);
                break;
            case 83: //this is down! (s)
                $("#playerBoostDown").setAnimation(playerAnimation["down"]);
                break;

Pause key P:

            case 80: //pause (p)
                pauseGame();
                alert ("paused")
        }

    }
});

Key released:

//this is where the keybinding occurs
$(document).keyup(function(e){
    if(!gameOver && !playerHit){
    if (!gamePaused) {
        game = clearTimeout(game);
        gamePaused = true;
        } else if (gamePaused) {
            game = setTimeout(gameLoop, 1000 / 30);
            gamePaused = false;
        switch(e.keyCode){
            case 65: //this is left! (a)
                $("#playerBooster").setAnimation(playerAnimation["boost"]);
                break;
            case 87: //this is up! (w)
                $("#playerBoostUp").setAnimation();
                break;
            case 68: //this is right (d)
                $("#playerBooster").setAnimation(playerAnimation["boost"]);
                break;
            case 83: //this is down! (s)
                $("#playerBoostDown").setAnimation();
                break;
            case 80: //pause (p)
                pauseGame();


        }
    }
});

Pause function:

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

Answer 1

Try and check if the P key is registered at all (using alert or a console message). Then

I would also suggest the following: do not set the actual gameloop interval (or call game functions) inside the keyUp / keyDown handlers. Place actual game code inside their own functions, for example:

bGamePaused = false;
// key handlers
$(document).keydown(function(e){
    switch(e.keyCode){
    case 80: 
      // check if the key is registered
      console.log("p is pressed, pause the game!");
      // toggle the paused status: 
      bGamePaused = !bGamePaused;
      // tell gameQuery to pause or resume the game
      (bGamePaused) ? pauseGame() : resumeGame();
      break;
}
$(document).keyup(function(e){
    switch(e.keyCode){
    // do not check for pause here. you only need to check when the key is either pressed or released, or the function will get called twice.
}