You only need to understand:
- math: the coordinates system (this is taught to children around the age of 9 in most countries)
There are many great free physics engines on the web. I picked the open source Matter.js
This tutorial is intended to show some shortcuts to less experienced coders, since the original documentation could bit a bit intimidating.
We'll start with the template that creates the physical world:
It's based on the minimal usage example, I just reduced it a bit and gift-wrapped it in html for you. The great thing is that you don't even have to understand what this code does - you can learn it later, for now let's concentrate on creating something that actually moves. From here on, you will typically need only two lines of code to add an object (a ball, a box or even a cloth)...
I left several empty lines - we'll fill them up in the next steps and you'll be able to track the changes.
An empty world is just a black void, so let's add a ball:
 creates it,  actually adds it to your world.
Copy the code above into a new file and save it as 'matter.htm'. Go to https://github.com/liabru/matter-js/releases and download the latest stable release (0.10.0 as of this writing) of the file 'matter.js'. Put 'matter.js' in the same folder as 'matter.htm' and open 'matter.htm' in a browser.
Point (0,0) is in the upper-left corner of the screen and the coordinates increase as you go down and right (so the Y axis is inverted compared to what you learned in 3rd grade - this convention is common in many programming languages).
You should see a white circle just falling down from the screen - boring! Let's add a floor:
Please note that it's Static (isStatic: true), which means that gravity won't pull it down.
The floor is a trapezoid and the ball should roll down one of its sides.
Now let's add a car a Newton's cradle (it's that little desk toy with metal balls swinging on strings).
The parameters are: (x-coordinate, y-coordinate, number of balls, size of balls, length of string)