Question 227952 in Javascript Question posted in
A very good W3school tutorial can be found here.

making a pause button using JavaScript

I’ve been making ping pong game watching tutorial and in the end decided to enhance a bit by adding paused button, I added and everything worked just fine but when I restart the game it was still being paused. Then I decided that I needed to add a paused check variable paused = false; and for some reason the state is the same, please help me!

const resetBtn = document.querySelector('#resetBtn');
const pauseBtn = document.querySelector('#pauseBtn');    

paused = false;
running = true;
pauseBtn.addEventListener('click', pauseGame);
resetBtn.addEventListener('click', resetGame);

gameStart();
function gameStart(){
  createBall();
  nextTick();
};
function nextTick(){
    if(running && !paused){
        intervalID = setTimeout(() => {
            // some code
            nextTick();
        }, 10)
    }
    else{
        displayPause();
    }
};
function resetGame(){
    // some code

    paused = false;

    // some code
    updateScore();
    clearInterval(intervalID);
    gameStart();
};
function pauseGame(){
    running = !running;
    paused = true;
    if(running){
        nextTick();
    }
};
<button class="buttons" id="pauseBtn">pause</button>
<button class="buttons" id="resetBtn">reset</button>

Here u can see paused game

after I pressed reset button

I’m expecting to resume game when user press restart button.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    the issue is resoled, i actually didn't need another variable like paused, all i needed was to add running to true like below, thanks for your attention

    function resetGame(){
running = true;

    };


  2. 0

    You don’t need both a running and paused variable. They are essentially the same thing. Just use running since you’ve already got that working.

    Since you are using setTimeout to run your game, you need to use clearTimeout when to clear it, not clearInterval. If you were using setTinterval that’s when you’d want to use clearInterval to clear it.

    In the below code I’ve changed your timeout amount to 100 just so it’s easier to see what’s happening in the console, it goes by too quickly at 10. You should probably keep it at 10 for your game though

    const resetBtn = document.querySelector('#resetBtn');
const pauseBtn = document.querySelector('#pauseBtn');    

running = true;
pauseBtn.addEventListener('click', pauseGame);
resetBtn.addEventListener('click', resetGame);

gameStart();
function gameStart(){
  //createBall();
  nextTick();
};
function nextTick(){
    if(running){
        intervalID = setTimeout(() => {
            console.log('game running', intervalID);
            nextTick();
        }, 100)
    }
    else{
        //displayPause();
        console.log('paused!')
    }
};
function resetGame(){
    // some code

    running = true;

    // some code
    //updateScore();
    clearTimeout(intervalID);
    console.log('reset!')
    gameStart();
};
function pauseGame(){
    running = !running;
    if(running){
        console.log('unpaused!')
        nextTick();
    }
};
    <button class="buttons" id="pauseBtn">pause</button>
<button class="buttons" id="resetBtn">reset</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search