How to properly restart gameloop/animation?

[eaglehopes]

Hi all,

I adapted a "javascript game code" from tutorial https://spicyyoghurt.com/tutorials/html5-javascript-game-development/create-a-smooth-canvas-animation in my codepen : 

https://codepen.io/eaglehopes/pen/MWMgvjm

My problem was I could not properly restart the animation(i.e. gameloop) where it begins! I am using "R" key from keyboard to restart the amination, but every time I restart, not the positions but the initial velocities of the objects changes so code become undeterministic - changine each time with the same input. 

Can anybody say that where am I doing wrong again? 

Thanks.

[kicken]

Set your old timestamp variable to null when the game is started/restarted.

this.oldTimeStamp = null;

Then in your game loop function, check if it's null and if so store the provided timestamp.

if (this.oldTimeStamp===null){
    this.oldTimeStamp=timeStamp;
}

This way your game always starts out at 0 for seconds passed.  Currently, your first iteration when the page loads is essentially random as it depends on how long it takes for the browser to run the first game loop after starting the page.