Javascript animacja

Odpowiedz Nowy wątek
2019-06-01 13:34
0

Witam. Szukam funkcji która pozwoliłaby na przesuwanie kwadratu tak jak jest to widoczne na zdjęciu.
screenshot-20190601133157.png
To jest moja pierwsza animacja w JavaScript. Proszę o wskazówki.

Pozostało 580 znaków

2019-06-01 13:41
1

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[...]ename=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


Pozostało 580 znaków

2019-06-01 15:11
1
  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ć.

Witam. Zastanawiam się jeszcze jakimi funkcjami zdefiniować kierunek i prędkość ruchu. Znalazłem coś takiego: https://www.w3schools.com/how[...]?filename=tryhow_js_animate_3. Ale nie dałem rady, wykorzystując ten kod, zmienić kierunku ruchu czyli np. 100px w prawo i potem 100px w dół. - Piotr Duda 2019-06-01 17:10
Wyślij mi zdjęcia Twoich rysunków które wykonałeś na kartce (dodaj do załącznika postu) - Markuz 2019-06-01 19:02
W tej chwili jestem poza domem. Wyśle jak tylko będe mógł. - Piotr Duda 2019-06-01 19:17

Pozostało 580 znaków

2019-06-02 15:20
0

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.
screenshot-20190602151729.png
screenshot-20190602151954.png

Pozostało 580 znaków

2019-06-02 18:37
m31
2

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

Dzięki wielkie. Czy mógłbyś mi wytłumaczyć jeszcze jak działa ten skrypt? - Piotr Duda 2019-06-02 18:51

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0