How do i reverse the trajectory of the 2d box inside the canvas using JavaScript?

Question

Im trying to make it so when collision is detected it reverses direction. I try to google it and found that most of the tutorials are doing something completely different (using different methods that dont work for me).

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

Answer 1

3 things on the collision detector:
1. It only checks if x or y is the exact value to hit the border. But their increments are usually higher than 1, so it's x and y hardly ever have this value. Prefer to check if it hits or passes.
2. It only checks bottom and right borders. It should check all of them.
3. When it detects collision, there's no code to change direction. You need to store x and y directions, then use them to control motion and change them in collisions.