Szczegółowe omówienie zadania WIELKI ZDERZACZ KULEK:
Link do powyższego omówienie zadania WIELKI ZDERZACZ KULEK: https://youtu.be/wrkLDPqZ1Js?t=1235
Link do treści zadania WIELKI ZDERZACZ KULEK: https://oki.org.pl/wielki-zderzacz-kulek/
Zadanie WIELKI ZDERZACZ KULEK pokazuje jak zrobić prostą animację na stronie www wykorzystując canvas (płótna) i język JavaScript
–
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
Lista zadań z rozwiązaniami: https://oki.org.pl/lista-zadan-materialy.php
Samouczek – przygotowanie do Olimpiad: https://oki.org.pl/tutorial/
Bezpłatne zajęcia OKI: https://oki.org.pl/harmonogram-zajec/
Informacje o zajęciach: https://oki.org.pl/newsletter.php
–
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
Jak uruchomić animację?
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik index_wielki_zderzacz_kulek.html
Zwróć uwagę by był to plik index_wielki_zderzacz_kulek.html a nie index_wielki_zderzacz_kulek.html.txt lub index_wielki_zderzacz_kulek.txt. Wyjaśnienie: https://youtu.be/kYa-2EdIF3Q?t=1658
3. Kliknij dwukrotnie na pliku index_wielki_zderzacz_kulek.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.
–
Alternatywnie
Kliknij na poniższy link prawym klawiszem myszy i wybierz “zapisz jako”.
Zapisz plik w dowolnym katalogu.
https://oki.org.pl/wp-content/uploads/2021/10/index_wielki_zderzacz_kulek.html
Następne dwukrotnie kliknij na zapisanym pliku.
Otworzy się przeglądarka i uruchomi się program który rysuje animację.
–
Kod HTML / JavaScript programu WIELKI ZDERZACZ KULEK, który jest omówiony w powyższym filmie
–
<!DOCTYPE html>
<html>
<head>
<style>
#plansza {
background-color: black;
}
</style>
</head>
<body>
Animacja
<br />
<canvas id="plansza" width="400" height="200">
</canvas>
<script>
let plansza_gry, rysowanie;
let temp;
let niebieska_kulka_srodek_x = 50;
let niebieska_kulka_predkosc_x = 5;
let czerwona_kulka_srodek_x = 350;
let czerwona_kulka_predkosc_x = -2;
plansza_gry = document.getElementById("plansza");
rysowanie = plansza_gry.getContext("2d");
function AnimacjaDwaKolka() {
rysowanie.clearRect(0, 0, 400, 200);
rysowanie.beginPath();
rysowanie.fillStyle = "blue";
rysowanie.arc(niebieska_kulka_srodek_x, 100, 10, 0, 2*Math.PI);
rysowanie.fill();
rysowanie.closePath();
rysowanie.beginPath();
rysowanie.fillStyle = "red";
rysowanie.arc(czerwona_kulka_srodek_x, 100, 10, 0, 2*Math.PI);
rysowanie.fill();
rysowanie.closePath();
niebieska_kulka_srodek_x = niebieska_kulka_srodek_x + niebieska_kulka_predkosc_x;
czerwona_kulka_srodek_x = czerwona_kulka_srodek_x + czerwona_kulka_predkosc_x;
if (niebieska_kulka_srodek_x >= czerwona_kulka_srodek_x) { //niebieska z prawej
temp = niebieska_kulka_predkosc_x;
niebieska_kulka_predkosc_x = czerwona_kulka_predkosc_x;
czerwona_kulka_predkosc_x = temp;
niebieska_kulka_srodek_x = czerwona_kulka_srodek_x - 1;
}
if (niebieska_kulka_srodek_x < 0) {
niebieska_kulka_predkosc_x = Math.abs (niebieska_kulka_predkosc_x);
}
if (czerwona_kulka_srodek_x > 400) {
czerwona_kulka_predkosc_x = -1 * Math.abs (czerwona_kulka_predkosc_x);
}
}
setInterval (AnimacjaDwaKolka, 10);
</script>
</body>
</html>