WIELKI ZDERZACZ KULEK – Animacja – Rozwiązanie zadania

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>
Kod HTML / JavaScript programu WIELKI ZDERZACZ KULEK, który jest omówiony w powyższym filmie

 

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz