Gra Dino v3 wersja ostateczna – Kod / linki / omówienie – Gra Google Chrome

Gra Dino v3 wersja ostateczna – Kod / linki / omówienie – Gra Google Chrome

Szczegółowe omówienie tworzenia gry Dinoczęść 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

Kolejny 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.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>
Strona www z kodem trzeciej - ostatecznej części gry Dino v3

 

 

 

 

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz