1

I have this bouncing/colliding balls animation and currently I'm debugging collision detection. To be more precise, I'm trying to prevent balls from intersecting during the collision.

I wanted to stop the animation the moment balls collide and I can do that, but if I also want to draw the collision of the balls before stopping the execution, I need to draw them first.

firstBall.move();
secondBall.move();
Ball.detectCollisions(balls); // execution stops here before the balls are drawn
firstBall.draw();
secondBall.draw();

So, I draw them inside the collision function. At the end of the function, I draw the balls and then stop the execution with debugger.

Ball.detectCollisions = function () {
    var debug = false;
    balls.forEach(function(ball) {
        ball.detectWallCollision();
    });
    for (var i = 0; i < balls.length; i++) {
        for (var j = i + 1; j < balls.length; j++) {
            if (balls[i].collidingWith(balls[j])) {
                // balls[i].resoveCollision(balls[j]);
                balls[i].xray = true;
                balls[j].xray = true;
                debug = true;
            }
        }
    }
    if (debug) {
        balls.forEach(function(ball) {
            ball.draw();
        });
        debugger;
        // haltGodDammit();
    }
};

But this doesn't work. Execution stops before the colliding balls are drawn.

enter image description here

I came across with Bart's answer and used his suggestion, called a function that doesn't exist (which caused ReferenceError and stopped the execution), instead of using debugger and it worked. The balls are drawn before the stopping of execution.

enter image description here

Why didn't debugger work? What am I missing?

Community
  • 1
  • 1
akinuri
  • 10,690
  • 10
  • 65
  • 102
  • I think http://stackoverflow.com/questions/20708266/javascript-canvas-function-not-working-without-an-alert would help you, and try calling toDataURL to check bitmap insize canvas. – defghi1977 Feb 04 '17 at 09:41
  • Canvas is double buffered. All renders to the canvas remain hidden from view until current execution is over. `debugger` does not exit the current execution, an error immediately exits execution to the next catch or to the system. The error method will only work if you don't catch the error. Or you can use `setTimeout(()=>{debugger;},0); return;` as long as the calling function also returns and so on. – Blindman67 Feb 04 '17 at 16:51

0 Answers0