Javascript animacja

Witam. Szukam funkcji która pozwoliłaby na przesuwanie kwadratu tak jak jest to widoczne na zdjęciu.

To jest moja pierwsza animacja w JavaScript. Proszę o wskazówki.

Jeśli twoim celem jest po prostu uzyskanie animacji, to sugeruję skorzystać z CSS i klatek kluczowych:
https://www.w3schools.com/css/css3_animations.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_delay

Jeśli natomiast ma to być konkretnie w JS (bo np. tak mówi zadanie), to patrz:
https://www.w3schools.com/jsref/prop_style_top.asp
https://www.w3schools.com/jsref/met_win_setinterval.asp

1. Narysuj sobie oś X i Y (tak jak w szkole na matematyce) - dla lepszego zrozumienia problemu, najlepiej na kartce.
2. Ustaw pozycję startową kwadratu oraz wielkość obszaru w którym kwadrat ma się animować (szerokość, wysokość).
3. Ustaw prędkość kwadratu na osi X oraz na osi Y.
4. Napisz funkcję która będzie się wykonywać co jakiś czas (np. za pomocą setInterval) która to będzie:
   4.1. Sprawdzać czy kwadrat nie dotyka bocznej ściany.
   4.2. Jeżeli dotyka, musisz zmieniać prędkość na osi X lub Y (np. prędkość X = 3, Y = 0 będzie poruszać kwadratem w prawo, jeżeli trafi na ścianę tj. X kwadratu + prędkość kwadratu > szerokość obszaru, wtedy odwracasz prędkość na osi X, czyli prędkość X = -3, podobnie dla Y tylko sprawdzasz wysokość obszaru).
   4.3. Do X kwadratu dodajesz prędkość kwadratu na osi X, do Y kwadratu dodajesz jego prędkość na osi Y.
   4.4. Rysujesz kwadrat w odpowiedniej pozycji.

Coś takiego powinno śmigać.

Obliczyłem odległości i sprawdziłem je w css, kwadrat porusza się według założeń. Próbuje przenieść to do javascript.

Jakoś tak:
https://jsfiddle.net/xtrjhdnc/3/