Please I need to make the ball bounce and move more smoothly across the screen.Your help would be really appreciated

Question

https://code.sololearn.com/W4ejldM9ZQ3M/?ref=app

Answer 1

https://www.webpagefx.com/blog/web-design/bouncing-a-ball-around-with-html5-and-javascript/

Answer 2

Your actual code hangs out because of your 'callback' function, wich call twice the requestAnimationFrame() function at each call... appart from the two first times:

At first "manual" call (callback()) lastTime is undefined, 'if' statement is not executed and lastTime get the value of millis (still undefined), then animation frame is requested a first time.
When the second call occurs, lastTime is still undefined, 'if' statement is still not executed, lastTime get the value of millis (now not undefined), then another animation frame is requested.
Since third call, lastTime is no more undefined, 'if' statement will be executed, inside wich your 'update' function is called AND animation frame is requested, BUT 'callback' code continue after 'if' statement, and another animation frame is requested, so you have initialized two callback branch at this moment, and you will do twice the 'fourth' call: in fact, 4th and 5th, and each next call will do it twice (after 4th and 5th, 4.1th, 4.2th, 5.1th and 5.2th are pending, and so on, very quickly growing).

You need to remove the requestAnimationFrame() call from inside the 'if' statement:

function callback(millis) {
if (lastTime) {
update((millis-lastTime) /1000);
// requestAnimationFrame(callback);
}
lastTime = millis;
requestAnimationFrame(callback);
}

Anyway, you cannot use 'id' name with spaces ("bounce ball"), and you must use some dash or another else valid char ("bounce_ball")... (middle dash is authorized in id/class name context -- "bounce-ball" -- but could be tricky in JS context, as it's not valid in JS identifier^^)

Answer 3

Thanks guys...visph it's now working thanks alot really appreciate