[Demo] Pong - Collision tests on low framerates

[Symbroson]

Did you ever have the problem that object collisions weren't detected because they were basically jumping over others?

This can be an even bigger issue when making movements framerate dependent, so that the game speed is not dependent on the users device.

Fortunately this issue is relatively easy to fix, as the drawing process usually takes 99% of the time in the core loop.

Just split your rendering code and your physics into two functions like that:

function OnStart() {
    // UI creation
    app.Animate(Render, 50);
}

function Render(t, dt) {
    // drawing stuff
}

function Calculate(dt) {
    // physics

}

You notice there is a Calculate function with a dt parameter. We still going to call that in the render loop, BUT it won't be called once with the current deltatime.
Instead we are calling it multiple times with a maximum deltatime of let's say 4 milliseconds.
You can use even lower values or also higher ones - that depends on how much tolerance you have when detecting collisions etc. Just make sure your game would run without errors on this framerate of (1000/4 = 250 fps)

This loop will be added to the top of the Render function:

// Calculate movements in 4 milliseconds steps
do {
    Calculate(4);
    dt -= 4;
} while(dt > 0);

This method implies that you're actually using the deltatime to adjust your movements according to the framerate.
So instead of

obj.x += obj.dx;

you'd use a velocity value (in units per second) instead:

obj.x += obj.vx * dt / 1000;

You'll notice your game to run much more fluently than before.

I've put together a little demonstration of all that as a basic 2 player Pong game.
You can find it here: https://dspk.justplayer.de/browse/view/69