Ball Bouncing off Walls - Pause & Resume

Question

I am working on this JavaScript code to get a ball to bounce off the walls and pause & resume on click. I have gotten the ball to pause and would like feedback on potential options to enable resume using a boolean. setTimer() & stopTimer() are predefined functions.

var ball;
var dx = 4;
var dy = 4;
var isPaused = false;


/* This program has a ball bounce around the screen. */
function start(){
    ball = new Circle(20);
    ball.setPosition(100, 100);
    add(ball);

    setTimer(draw, 20);
    if(isPaused == true){
        mouseClickMethod(resume);
    }
}

function draw(){
    checkWalls();
    ball.move(dx, dy);
    mouseClickMethod(pause);
}

function checkWalls(){
    // Bounce off right wall
    if(ball.getX() + ball.getRadius() > getWidth()){
        dx = -dx;
    }

    // Bounce off left wall
    if(ball.getX() - ball.getRadius() < 0){
        dx = -dx;
    }

    // Bounce off bottom wall
    if(ball.getY() + ball.getRadius() > getHeight()){
        dy = -dy;
    }

    // Bounce off top wall
    if(ball.getY() - ball.getRadius() < 0){
        dy = -dy;
    }
}

function pause(e){
    var isPaused = true;
    if(isPaused == true){
        stopTimer(draw);
    }
}

function resume(e){
    var isPaused = false;
    if(isPaused == false){
        setTimer(draw, 20);
    }
}

so why do you have a function parameter for pause() and resume() if you're not going to use it? — Ousmane D., Mar 01 '17 at 02:37
If you want to do timings related to animations, you might want to look into requestAnimationFrame instead of using setTimeout https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame — derp, Mar 01 '17 at 02:42
This is all the code I have for this project. I'm writing it as an assignment within an online sandbox. On starting the code the ball is already bouncing. On first click the ball pauses. That works already. Upon second click the ball should start moving again. That is currently not working. I assume both pause and resume functions should be called by mouseClickMethod() and they should share a common variable isPaused. I've set it up to the best of my ability but am stuck. — user67762, Mar 01 '17 at 02:43
You are setting the isPaused variable inside the function when it is set as global! So that means, that dont share a common variable! — Keerthana Prabhakaran, Mar 01 '17 at 02:47
See [Pausing CSS animation with javascript and also jumping to a specific place in the animation](http://stackoverflow.com/questions/22080548/pausing-css-animation-with-javascript-and-also-jumping-to-a-specific-place-in-th/) — guest271314, Mar 01 '17 at 02:52
So instead of isPaused being declared false globally should it just be declared as var isPaused; ? Doesn't isPaused have to be global for both pause() and resume() functions to see it. Forgive me if this is a confusing question. I'm new to coding. The first function that is called after the ball is drawn is the setTimer() function which moves the ball until the screen is clicked-that's handled by mouseClickMethod() which pauses the ball. That much works. I'm having issue with resuming from pause to continue moving the ball. Thanks for your help! — user67762, Mar 01 '17 at 02:57
Your checks inside the pause() and resume() functions are also currently pointless - if you set the variable isPaused to true why do you need to then check if it is true? — Jonathan Holland, Mar 01 '17 at 03:14

score 0 · Answer 1 · answered Mar 01 '17 at 03:07

Just figured it out. This get's the job done.

var ball;
var dx = 4;
var dy = 4;
var isPaused;


/* This program has a ball bounce around the screen. */
function start(){
    ball = new Circle(20);
    ball.setPosition(100, 100);
    add(ball);

    setTimer(draw, 20);
}

function draw(){
    checkWalls();
    ball.move(dx, dy);
    mouseClickMethod(pause);
}

function checkWalls(){
    // Bounce off right wall
    if(ball.getX() + ball.getRadius() > getWidth()){
        dx = -dx;
    }

    // Bounce off left wall
    if(ball.getX() - ball.getRadius() < 0){
        dx = -dx;
    }

    // Bounce off bottom wall
    if(ball.getY() + ball.getRadius() > getHeight()){
        dy = -dy;
    }

    // Bounce off top wall
    if(ball.getY() - ball.getRadius() < 0){
        dy = -dy;
    }
}

function pause(){
    isPaused = true;
    if(isPaused == true){
        stopTimer(draw);
    }
    mouseClickMethod(resume);
}

function resume(){
    isPaused = false;
    if(isPaused == false){
        setTimer(draw, 20);
    }
}

I just had to follow the last bit of code I knew was working-that was the mouseClickMethod(pause). So within the pause() function I added the same bit to look for mouseClickMethod(resume) which switched the boolean back to enable motion again in the resume() function. Works great! isPaused is a global variable but is defined independently by pause() and resume() functions. It finally works. Thanks for the comments! — user67762, Mar 01 '17 at 03:11
As per my comment on your original post, what happens if you simply remove the isPaused variable completely from resume and pause? (i.e. no if condition and no variable assignation) — Jonathan Holland, Mar 01 '17 at 03:17

score 0 · Answer 2 · answered Mar 10 '21 at 01:39

Here is how I did it. It works for you people just looking for a quick answer, apologies for the unconventional naming, I hate spelling.

var ball;
var dx = 4;
var dy = 4;
var move = true;
/* This program has a ball bounce around the screen. */
function start(){
    ball = new Circle(20);
    ball.setPosition(100, 100);
    add(ball);
    mouseClickMethod(stp);
    setTimer(draw, 20);
}

function draw(){
    if(move){
        checkWalls();
        ball.move(dx, dy);
    
    }

}

function checkWalls(){
    // Bounce off right wall
    if(ball.getX() + ball.getRadius() > getWidth()){
        dx = -dx;
    }

    // Bounce off left wall
    if(ball.getX() - ball.getRadius() < 0){
        dx = -dx;
    }

    // Bounce off bottom wall
    if(ball.getY() + ball.getRadius() > getHeight()){
        dy = -dy;
    }

    // Bounce off top wall
    if(ball.getY() - ball.getRadius() < 0){
        dy = -dy;
    }
}
function stp(){
    if(move){
         move = false;
    }else{
        move = true;
    }
}

score 0 · Answer 3 · answered Apr 04 '21 at 16:47

var isPaused = false;

/* This program has a ball bounce around the screen. */
function start(){
    ball = new Circle(20);
    ball.setPosition(100, 100);
    add(ball);
    mouseClickMethod(pause);
    setTimer(draw, 20);
}
function pause(e){
    isPaused = !isPaused;
    if(isPaused == true){
        stopTimer(draw);
    }else{
        setTimer(draw, 20);
    }
}

score -1 · Answer 4 · answered Jan 28 '21 at 18:01

-1

Three or so years later, those codes as it does not work right, hints the first one speeds up each click, the second one does not even work overall.

answered Jan 28 '21 at 18:01

Eric

1

1

Hi, this is not a useful answer. Please make sure your answer is clear and complete and that it actually solves the problem originally asked. – ba_ul Jan 28 '21 at 18:23

Ball Bouncing off Walls - Pause & Resume

4 Answers4