Szczegółowe omówienie tworzenia gry Dino – część 3:
Link do powyższego omówienia tworzenia gry Dino – część 3: https://youtu.be/e0t_EzkQ-0c?t=1167
Kod / gra – instrukcja pobrania na dole: https://oki.org.pl/wp-content/uploads/2022/04/index_dino_czesc3.html
Skrócone omówienie tworzenia trzeciej części gry Dino:
Dino część 3 zadanie: https://oki.org.pl/dino-zadanie-v3
Dino część 2 zadanie: https://oki.org.pl/dino-zadanie-v2 Rozwiązanie: https://oki.org.pl/dino-v2
Dino część 1 zadanie: https://oki.org.pl/dino-zadanie-v1 Rozwiązanie: https://oki.org.pl/dino-v1
Kolejne etapy tworzenia naszego kodu:
Otwieramy plik index.html i wpisujemy kod z poprzednich zajęć: https://youtu.be/e0t_EzkQ-0c?t=1231
Omówienie dotychczasowego kodu: https://youtu.be/e0t_EzkQ-0c?t=1511
Dodajemy informacje o wyniku i liczbie żyć: https://youtu.be/e0t_EzkQ-0c?t=1962
Dodajemy guzik Start: https://youtu.be/e0t_EzkQ-0c?t=3016
Podsumowanie guzika Start: https://youtu.be/e0t_EzkQ-0c?t=3960
Dodajemy silnik graficzny – kolizję – tracenie żyć: https://youtu.be/e0t_EzkQ-0c?t=4091
–
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ęść 3 – wersja ostateczna?
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_czesc3.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_czesc3.html
Zwróć uwagę by był to plik index_dino_czesc3.html a nie index_dino_czesc3.html.txt lub index_dino_czesc3.html.txt. Wyjaśnienie: https://youtu.be/wrkLDPqZ1Js?t=1532
3. Kliknij dwukrotnie na pliku index_dino_czesc3.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.
–
Strona www z kodem trzeciej - ostatecznej części gry Dino v3
<!DOCTYPE html>
<!--
Gra Dino v. 3.3 by OKI - Olimpijskie Kolo Informatyczne
Kod / omowienie / linki: https://oki.org.pl/dino-v1
Kod / omowienie / linki: https://oki.org.pl/dino-v2
Kod / omowienie / linki: https://oki.org.pl/dino-v3
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!
2.0 - Wykorzystanie zmiennych planszy / 2.1 - Klasa klasa_kaktus / 2.2 - Klasa klasa_dino / 2.3 - Dino idzie do gory / 2.4 - Skok
3.0 - Wynik gracza / liczba zyc / 3.1 - Guzik Start / 3.2 - Kolizja / 3.3 - Dwa kaktusy
-->
<html>
<head>
</head>
<body>
<div>
<strong>Gra Dino v3.3 by CodeMonster</strong>
<br />Skacz Dino nad kaktusami - <strong>klawisz 'g' lub strzalka do gory</strong>
<div id="baner_start">
<h1>Nacisnij START i graj!</h1>
</div>
<canvas id="plansza_canvas" width="600px" height="200px">
</canvas>
<div>
<button id="przycisk_start" onclick="StartGry()">
START!
</button>
</div>
<div id="napis_wynik">
Wynik: <strong>0</strong>
</div>
<div id="napis_liczba_zyc">
Liczba zyc: <strong>3</strong>
</div>
<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;
this.kolor = "rgb(36,170,0)";
}
RysujKaktus() {
//Rysujemy zielony prostokat - kaktus
rysowanie.fillStyle = this.kolor;
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;
}
//Sprawdzamy czy kaktus ma kolizję z Dino
//każda zmienna która będzie stoworzna na podstawie tej klasy sprawdzi to oddzielnie
CzyKolizja() {
if ( dino.ZwrocPrawy_X() < this.ZwrocLewy_X() )
return false; //jeśli Dino jest z lewej strony naszego kaktusa to NIE ma kolizji
if ( dino.ZwrocLewy_X() > this.ZwrocPrawy_X() )
return false; //jeśli Dino jest z prawej strony naszego kaktusa to NIE ma kolizji
if ( dino.ZwrocDolny_Y() < this.ZwrocGorny_Y() )
return false; //jeśli Dino jest ponad naszym kaktusem to NIE ma kolizji
if ( dino.ZwrocGorny_Y() > this.ZwrocDolny_Y() )
return false; //jeśli Dino jest pod naszym kaktusa to NIE ma kolizji
return true; //w każdym innym przypadku jest kolizja
}
//kazda zmienna naszej klasy moze miec inny kolor
UstawKolor(nowy_kolor) {
this.kolor = nowy_kolor;
}
ZwrocLewy_X() {
return this.kaktus_x;
}
ZwrocPrawy_X() {
return this.kaktus_x + this.kaktus_szerokosc_x;
}
ZwrocGorny_Y() {
return this.kaktus_y
}
ZwrocDolny_Y() {
return this.kaktus_y + this.kaktus_wysokosc_y;
}
UstawPrawy_X(nowy_x) {
this.kaktus_x = nowy_x-this.kaktus_szerokosc_x;
}
//Ustawiamy wspolrzedna x naszego kaktusa w losowej odleglosci (od 100 doo 500 punktow)
//z prawej strony drugiego kaktusa
//Math.random() zwraca liczbę od 0 do 1
UstawLosowyPrawy_X(x_drugiego_kaktusa) {
let losowy_przedzial;
losowy_przedzial = 100 + Math.random() * 400; //losowa liczba od 100 do 500
this.kaktus_x = x_drugiego_kaktusa + losowy_przedzial;
//jesli kaktus pojawi sie z prawej strony pozostalego kaktusa ale od razu gdzies na ekranie
//to jednak pokazujemy z prawej strony poza ekranem by do nas za chwile przyszedl - wylonil
//sie z ekranu
if (this.kaktus_x < plansza.width)
this.kaktus_x = plansza.width+losowy_przedzial;
}
}
//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;
}
}
ZwrocLewy_X() {
return this.dino_x;
}
ZwrocPrawy_X() {
return this.dino_x + this.dino_szerokosc_x;
}
ZwrocGorny_Y() {
return this.dino_y
}
ZwrocDolny_Y() {
return this.dino_y + this.dino_wysokosc_y;
}
}
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 aktualizuje wynik przy kazdym odswiezeniu ekranu
//powinna być oddzielna klasą
//liczba klatek przechowuje liczbę odswiezen ekranu / plotna canvas
//inaczej liczbe wywolan funkcji Gra - u nas Gra jest wywolywana 100 razy na sekunde
function AktualizujWynik() {
++liczba_klatek;
//wynik gracza to ile czasu Dino zyje
//jestli Dino przezyje 10 klatek to otrzymuje 1 punkt
if ( (liczba_klatek%10) == 0 ) // reszta z dzielenia przez 10
++wynik_gracza;
//aktualizujemy wynik gracza w polu<dvi></div> o nazwie "napis_wynik"
document.getElementById("napis_wynik").innerHTML = "Wynik: <strong>" + wynik_gracza + "</strong>";
//sprawdzamy cz krorus z dwoch kaktusow stwierdzil kolizje z Dino
if ( (kaktus1.CzyKolizja()==true) || (kaktus2.CzyKolizja()==true) ) {
//Jesli ktorys z dwoch kaktusow stwierdzil kolizje to zmniejszamy liczbe zyc
--liczba_zyc;
//Aktualizujemy napis z liczba zyc na ekranie
document.getElementById("napis_liczba_zyc").innerHTML = "Liczba zyc: <strong>" + liczba_zyc + "</strong>";
//Jak jest kolizja to tez pojawia sie dodatkowe okienko z napisem "Auuuuuuu"
alert("Auuuuuuuuuuuuuuuuu!!!");
//Jesli ta kolizja spowodowala, ze zyc jest zeto to konczymy gre
//czyli konczymy nasza animacje, wywolywanie odswiezania canvas co 10 ms
//robi to funkcja clearInterval(uchwyt_animacji)
//dodatkowo dajemy najwiekszy napis - banner - ze koniec gry
if (liczba_zyc <= 0) {
document.getElementById("baner_start").innerHTML = "<h1>Oj... Dino nie przeszedl pustyni... Sprobuj jeszcze raz!<h/1>";
clearInterval(uchwyt_animacji);
}
}
//Jesli jest kolizja kaktusa i Dino to przenosimy kaktus na lewo strone Dino
//by nie od razu drugiej kolizji
if ( kaktus1.CzyKolizja()==true )
kaktus1.UstawPrawy_X ( dino.ZwrocLewy_X()-1 );
if ( kaktus2.CzyKolizja()==true )
kaktus2.UstawPrawy_X ( dino.ZwrocLewy_X()-1 );
}
//funkcja która rysuje plansze, ziemie, kaktusa, Dino
function Gra() {
RysujPlansze();
RysujZiemie();
kaktus1.RysujKaktus();
//Jesli kaktus1 wyjdzie z lewej strony ekranu to ustawiamy go losowa z prawej strony kaktus2
if ( kaktus1.kaktus_x < 0 )
kaktus1.UstawLosowyPrawy_X( kaktus2.ZwrocLewy_X() );
kaktus2.RysujKaktus();
//Jesli kaktus2 wyjdzie z lewej strony ekranu to ustawiamy go losowa z prawej strony kaktus1
if ( kaktus2.kaktus_x < 0 )
kaktus2.UstawLosowyPrawy_X( kaktus1.ZwrocLewy_X() );
dino.RysujDino();
AktualizujWynik();
}
//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);
let liczba_klatek, wynik_gracz, liczba_zyc;
let uchwyt_animacji;
//tworzymy zmienne (instancje / obiekty) klas klasa_dino, klasa_klatus
//dla klasa_kaktus tworzymy dwie zmienne - 2 kaktusy
//rysują prostokąty które reprezentują Dino i dwa kaktusy
//obsługują ruch i zdarzenia związane z Dino i kazdym kaktusem
let kaktus1, kaktus2, dino;
kaktus1 = new klasa_kaktus();
kaktus2 = new klasa_kaktus();
dino = new klasa_dino();
//funkcja ktora jest wywolywana gdy uruchamiamy gre
//wywolywana jest przy nacisnieciu guzika Start
//nasz program zaczyna cos robic gdy bedzie wywolana ta funkcja czyli gdy ktos nacisnie guzik Start
function StartGry() {
//zdejmujemy focus z guzika Start
document.getElementById("przycisk_start").blur();
//Gra sie toczy - zmieniamy napis banera
document.getElementById("baner_start").innerHTML = "<h1>Uwazaj prosze na Dino....<h/1>";
//Ustawiamy poczatkowa liczbe zyc, wynik
liczba_klatek = wynik_gracza = 0;
liczba_zyc = 3;
//Parametry poczatkowe Dino i kaktusow
dino.UstawDino();
kaktus1.UstawKaktus();
kaktus2.UstawKaktus();
//kaktus2 losowo z prawej strony kaktus1
kaktus2.UstawLosowyPrawy_X( kaktus1.ZwrocLewy_X() );
//kaktus2 ma ciemniejszy zielony kolor niz kaktus1
kaktus2.UstawKolor ( "rgb(16,90,0)" );
//Uruchamiamy animację - odświezanie canvas co 10ms - 100 razy na sekunde
//jesli wczensiej byla animacja uruchomiona to ja usuwamy
//od tego momentu zaczyna sie nasza gra
clearInterval(uchwyt_animacji);
uchwyt_animacji = setInterval(Gra, 10);
}
</script>
</body>
</html>