How To Make Two <divs> collide (not go past each other) When One <div> Is Controlled By You

How To Make Two <divs> collide (not go past each other) When One <div> Is Controlled By You

Click Here -->  https://jsfiddle.net/AlexHepworth720/x7msxm5t/ <-- To View My Code!'

Use SWAD to move the ball, and Arrow Keys to navigate the page! ( click on the page to be able to control the ball)

S - Down
W - Up
A - Left
D - Right


How do I make the Red Ball (the one you control) collide/ not move past the walls/<divs> (the green boxes)?

I don't want any special effect, I just don't want the Ball to be able to move past them. How do I do this? Please make it correspond with my code.

I would also like to understand what exactly needs to be done and how it's being done.

Thanks!