Toggle pause with key in HTML5 game

Question

I want to make a function for a html5 game to pause and unpause with the keyboard key p. I can get the game to pause while pressing p, but not to unpause while pressing p again. What am I doing wrong here?

document.addEventListener('keydown', pauseGameKeyHandler, false);

function pauseGameKeyHandler(e) { 
    var keyCode = e.keyCode;
    switch(keyCode){ 
        case 80: //p
        togglePause();
        break; 
    }
}

function togglePause() {
    if ( paused = true ) {
        pauseTime = Date.now();
        var pausedElement = document.getElementById( 'paused' );

        if( pausedElement ) {
            pausedElement.style.width = world.width + 'px';
            pausedElement.style.height = world.height + 'px';
        }

        document.body.className = 'paused';
    } else if ( paused = false ) {
        var wasPaused = paused;
        paused = false;
        time += Date.now() - pauseTime;

        if( wasPaused ) {
            timeLastFrame = Date.now();
            animate();
        }

        document.body.className = '';
    }
}

Andrew_CS · Answer 1 · 2014-06-18T15:24:44.703

if(paused = true) sets the variable paused to true - therefore every time you enter the method you're setting the variable to true, so you'll never unpause your game. Use the double equal signs == in your if and else if statements. Or you can just say if(paused) and else if(!paused) to avoid the possible mistake of using assignment instead of comparison.

Also, the overall logic to your method seems a little off. This is basically what you have.

function togglePause() {
    if (paused) { // already paused

    // set the game state to paused

  } else if (!paused) {

    var wasPaused = paused; // you already know it will be set to false

    paused = false; // re-setting the game to paused...

    // restart the game...

  }
}

It should be more like this

function togglePause() {
    if (paused) { // Already paused
    // restart the game!
    paused = false; // Game was restarted, so you're not paused anymore
  } else{ // Only other option is the game isn't paused, means currently playing
    // pause the game!
    paused = true; // Game was paused, so you're now paused
  }
}

The logic and code for unpausing and pausing should just be added into the spots where I only had it as a comment.

Thanks! But the only thing that does is some funky stuff with my time indicator, and no pause-unpause at all. — Justin, Jun 18 '14 at 14:49
See my edit - let me know if you see how you had things a little backwards. — Andrew_CS, Jun 18 '14 at 15:17

score 0 · Answer 2 · answered Jun 19 '14 at 09:00

I found the solution!

function pauseGameKeyHandler(e) { 
      var keyCode = e.keyCode;
      switch(keyCode){ 
        case 80: //p
          togglePause();
          break; 
      }
    }

    function togglePause(e) {
        if (keyCode == 80) {
            pause();
        } else if (!paused) {
            pause();
        } else if (paused) {
            resume();
        }
    };

    function pause() {
        paused = true;
        pauseTime = Date.now();

        var pausedElement = document.getElementById( 'paused' );

        if( pausedElement ) {
            pausedElement.style.width = world.width + 'px';
            pausedElement.style.height = world.height + 'px';
        }

        document.body.className = 'paused';
    }

    function resume() {
        var wasPaused = paused;

        paused = false;
        time += Date.now() - pauseTime;

        if( wasPaused ) {
            timeLastFrame = Date.now();
            animate();
        }

        document.body.className = '';
    }

You implemented the logic I suggested in my answer, and instead of accepting my answer you posted your own... — Andrew_CS, Jun 19 '14 at 13:06

Toggle pause with key in HTML5 game

2 Answers2