Szczegółowe omówienie tworzenia proste animacji Piłka:
Link do powyższego omówienia tworzenia animacji spadającej piłki: https://youtu.be/m_sSmhvS1RQ?t=1048
Kod / gra – instrukcja pobrania na dole: https://oki.org.pl/wp-content/uploads/spadajaca_pilka_animacja.html
–
Jak się uczyć na podstawie tego zadania? https://youtu.be/QgLyXYmFQeU?t=2019
Pamiętaj by zajrzeć max 1 raz – wtedy się rozwijasz: https://youtu.be/pkLXuuOe_qA?t=3625
Programowanie OD PODSTAW – zajęcia: https://oki.org.pl/programowanie-od-podstaw/
Informacje o zajęciach: https://oki.org.pl/newsletter.php
–
Jak uruchomić / pobrać animację Piłka?
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
1. Kliknij na poniższy link prawym klawiszem myszy i wybierz “zapisz jako”.
https://oki.org.pl/wp-content/uploads/spadajaca_pilka_animacja.html
2. Zapisz plik w dowolnym katalogu.
3. Dwukrotnie kliknij na nazwie pliku.
Otworzy się przeglądarka i uruchomi się program który animuje ruch kaktusa.
4. By zmienić wielkość obiektów, kolory,… -> Kliknij prawym klawiszem na zapisanym pliku i wybierz “Otwórz za pomocą” a następnie wybierze “Notatnik” lub dowolny inny edytor. Rekomenduję użycie Visual Studio Code zamiast notatnika: https://youtu.be/Ck6k19b7FVU?t=994
Alternatywnie
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik spadajaca_pilka_animacja.html
Zwróć uwagę by był to plik spadajaca_pilka_animacja.html a nie spadajaca_pilka_animacja.txt lub spadajaca_pilka_animacja.html.txt. Wyjaśnienie: https://youtu.be/wrkLDPqZ1Js?t=1532
3. Kliknij dwukrotnie na pliku spadajaca_pilka_animacja.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.
–
Strona www z kodem zadania Piłka - animacji spadającej piłki
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="plansza_canvas" width="200px" height="400px">
</canvas>
<script>
let plansza, rysowanie;
let pilka_x, pilka_y, promien_pilki, predkosc_pilki_y;
let przyspieszenie_ziemia, opor_powietrza;
plansza = document.getElementById("plansza_canvas");
rysowanie = plansza.getContext("2d");
//Wartosci poczatkowe zmiennych
pilka_x = 100;
pilka_y = 50;
promien_pilki = 10;
predkosc_pilki_y = 0;
przyspieszenie_ziemia = 0.1;
opor_powietrza = 0.98;
// Kod ktory bedzie wywolywany 100 razy na sekund - co 10 ms w instrukcji
// setInterval(Animacja, 10);
function Animacja() {
//Plansze zamalowujemy na zolto - prostokat
rysowanie.fillStyle = "yellow";
rysowanie.fillRect(0,0, 200,400);
//Rysujemy Ziemie - niebieski prostokat na dole
rysowanie.fillStyle = "blue";
rysowanie.fillRect(0,350, 200,20);
//Rysujemy pilke - kolo
rysowanie.fillStyle = "red";
rysowanie.beginPath();
rysowanie.arc(pilka_x, pilka_y, promien_pilki, 0, 2 * Math.PI);
rysowanie.fill();
//Mechanika ruchu
pilka_y = pilka_y + predkosc_pilki_y; //przesuwamy pilke przy kazdym ruchu
predkosc_pilki_y = predkosc_pilki_y + przyspieszenie_ziemia; //predkosc zmienia sie o grawitacje
predkosc_pilki_y = predkosc_pilki_y * opor_powietrza; //predkosc zwalnia o opor powierdza, mnozymy predkosc razy ulamek
//jesli brzeg pilki dotknie podlogi to zawarcamy - predkosc zmienia sie na przeciwna.
if ( (pilka_y+10) >= 350)
predkosc_pilki_y = -1*predkosc_pilki_y;
}
//Uruchamiamy funkcje Animacja 100 razy na sekunde - co 10 ms
setInterval(Animacja, 10);
</script>
</body>
</html>