Szczegółowe omówienie tworzenia gry Dino – część 2:
Link do powyższego omówienia tworzenia gry Dino – część 2: https://youtu.be/VM_9vPIp3M4?t=2644
Kod / gra – instrukcja pobrania na dole: https://oki.org.pl/wp-content/uploads/2022/04/index_dino_czesc2.html
Skrócone omówienie tworzenia pierwszej części gry Dino: https://youtu.be/VM_9vPIp3M4?t=7375
Dino część 2 – treść zadania: https://oki.org.pl/dino-zadanie-v2
Dino część 1: https://oki.org.pl/dino-zadanie-v1 Rozwiązanie: https://oki.org.pl/dino-v1
W drugiej części pisania gry Dino:
* Nauczyliśmy się programowania obiektowego: https://youtu.be/VM_9vPIp3M4?t=5366
* Stworzyliśmy klasę kaktusa: https://youtu.be/VM_9vPIp3M4?t=4913
* Stworzyliśmy Dino jako klasę: https://youtu.be/VM_9vPIp3M4?t=5872
* Dodaliśmy reakcję na klawisze: https://youtu.be/VM_9vPIp3M4?t=6449
* Zamodelowaliśmy grawitację: https://youtu.be/VM_9vPIp3M4?t=7311
Jaka jest wartość naszej lekcji? https://youtu.be/VM_9vPIp3M4?t=9003
Możemy prosto modyfikować nasz kod: https://youtu.be/VM_9vPIp3M4?t=6020
Kolejny etapy tworzenia naszego kodu:
1. Plik index.html z dotychczasowym kodem: https://youtu.be/VM_9vPIp3M4?t=2763
2. Korzystamy ze zmiennych planszy: https://youtu.be/VM_9vPIp3M4?t=3075
3. Kaktus jako klasa (programowanie obiektowe): https://youtu.be/VM_9vPIp3M4?t=3602
4. Klasa Dino: https://youtu.be/VM_9vPIp3M4?t=5443
5. Reagujemy na klawisze – Dino skacze: https://youtu.be/VM_9vPIp3M4?t=6060
6. Dodajemy grawitację: https://youtu.be/VM_9vPIp3M4?t=6768
8. Zatrzymujemy Dino na poziomie Ziemi: https://youtu.be/VM_9vPIp3M4?t=7081
–
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/
Zajęcia: https://oki.org.pl/harmonogram-zajec/
Informacje o zajęciach: https://oki.org.pl/newsletter.php
–
Jak uruchomić / pobrać grę Dino – część 2?
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/2022/04/index_dino_czesc2.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 index_dino_czesc2.html
Zwróć uwagę by był to plik index_dino_czesc2.html a nie index_dino_czesc2.html.html.txt lub index_dino_czesc2.html.txt. Wyjaśnienie: https://youtu.be/wrkLDPqZ1Js?t=1532
3. Kliknij dwukrotnie na pliku index_dino_czesc2.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.
–
Strona www z kodem drugiej części gry Dino v2
<!DOCTYPE html>
<!--
Gra Dino v. 2.4 by OKI - Olimpijskie Kolo Informatyczne
Kod / omowienie / linki: https://oki.org.pl/dino-v1
Kod / omowienie / linki: https://oki.org.pl/dino-v2
Wersje: 1.0 - Strona www z tekstem / 1.1 - canvas (plotno) / 1.2 - ziemia / 1.3 - funkcje plansza/ziemia / 1.4 - kaktus / 1.5 - Animacja!
Wersje: 2.0 - Wykorzystanie zmiennych planszy / 2.1 - Klasa klasa_kaktus / 2.2 - Klasa klasa_dino / 2.3 - Dino idzie do gory / 2.4 - Skok
-->
<html>
<head>
</head>
<body>
<div>
<strong>Gra Dino v2.4 by CodeMonster</strong>
<br />Skacz Dino nad kaktusami - <strong>klawisz 'g' lub strzalka do gory</strong>
</div>
<canvas id="plansza_canvas" width="600px" height="200px">
</canvas>
<script>
let plansza, rysowanie;
plansza = document.getElementById("plansza_canvas");
rysowanie = plansza.getContext("2d");
//wszystko co sie tyczy kaktusa - rysowanie, ruch - klasa kaktus
class klasa_kaktus {
constructor() {
this.UstawKaktus();
}
UstawKaktus() {
this.kaktus_x = plansza.width + 40; //wsp. lewego gornego rogu
this.kaktus_y = 150; //wsp. lewego gornego rogu
this.kaktus_szerokosc_x = 10;
this.kaktus_wysokosc_y = 20;
this.kaktus_predkosc_x = 1;
}
RysujKaktus() {
//Rysujemy zielony prostokat - kaktus
rysowanie.fillStyle = "rgb(36,170,0)";
rysowanie.fillRect(this.kaktus_x,this.kaktus_y, this.kaktus_szerokosc_x,this.kaktus_wysokosc_y);
//przesuwamy kaktus w lewo
this.kaktus_x = this.kaktus_x - this.kaktus_predkosc_x;
//jesli kaktus przebije lewa sciane, ustawiamy go w poczatkowym polozeniu
if ( this.kaktus_x < 0 )
this.UstawKaktus();
}
}
//wszystko co sie tyczy Dino - rysowanie, ruch - klasa Dino
class klasa_dino {
constructor() {
this.UstawDino();
}
UstawDino() {
this.dino_x = 60;
this.dino_y = 120;
this.dino_szerokosc_x = 30;
this.dino_wysokosc_y = 50;
this.czy_dino_skacze = false; //poczatkowo dino nie skacze
this.grawitacja = 0.1; //jak szybko maleje predkosc dino przy podskoku (grawitacja)
}
RysujDino() {
//Rysujemy Dino - niebieski prostokat
rysowanie.fillStyle = "rgb(0,0,255)";
rysowanie.fillRect(this.dino_x,this.dino_y, this.dino_szerokosc_x,this.dino_wysokosc_y);
//Jesli Dino skacze to zmienia się jego wspolrzedna y
//Zmniejszamy takze predkosc o grawitacje
if (this.czy_dino_skacze == true) {
this.dino_y = this.dino_y - this.predkosc;
this.predkosc = this.predkosc - this.grawitacja;
}
//Jesli Dino przy opadaniu przebije ziemie, to koniec skoku, ustawiamy go w domyslnym miejscu
if (this.dino_y+this.dino_wysokosc_y >= 170)
this.UstawDino();
}
//Metoda wywolywana gdy nacisnieto klawisz 'g' lub strzalak do gory
//Skok mozliwy tylko gdy Dino w spoczynku
//Jesli Dino byl w spoczynku to ustawiamy ze skacze i nadajemy mu poczaktkowa predkosc do gory
DinoSkacz() {
if ( this.czy_dino_skacze == false ) {
this.czy_dino_skacze = true;
this.predkosc = 4;
}
}
}
function RysujPlansze() {
rysowanie.fillStyle = "rgb(249,218,255)";
rysowanie.fillRect(0,0, plansza.width,plansza.height);
}
function RysujZiemie() {
rysowanie.fillStyle = "rgb(69,0,33)";
rysowanie.fillRect(0,170, plansza.width,5);
}
//funkcja która rysuje plansze, ziemie, kaktusa, Dino
function Gra() {
RysujPlansze();
RysujZiemie();
kaktus1.RysujKaktus();
dino.RysujDino();
}
//jesli wcisnietym klawiszem jest 'g' lub 'strzalka do gory' to kazemy Dino skakac
//Wywolujemy metode DinoSkacz naszego dino, naszej zmiennej dino
function UstawWcisnietyKlawisz(zdarzenie) {
if ( (zdarzenie.key=='g') || (zdarzenie.key=='ArrowUp') ) {
dino.DinoSkacz();
}
}
//nasluchujemy czy wcisniety klawisz
//jesli tak to wywolujemy funkcje UstawWcisnietyKlawisz
document.addEventListener("keydown", UstawWcisnietyKlawisz, false);
//tworzymy zmienne (instancje / obiekty) klas klasa_dino, klasa_klatus
//rysują prostokąty które reprezentują Dino i kaktusa
//obsługują ruch i zdarzenia związane z Dino i kaktusem
let kaktus1, dino;
kaktus1 = new klasa_kaktus();
dino = new klasa_dino();
//co 10ms, czyli 100 razy na sekunde wywolujemy funkcje Gra()
setInterval(Gra, 10);
</script>
</body>
</html>