Gra Dino v2 – Kod / linki / omówienie – Gra Google Chrome

Gra Dino v2 – Kod / linki / omówienie – Gra Google Chrome

Szczegółowe omówienie tworzenia gry Dinoczęść 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>
Strona www z kodem drugiej części gry Dino v2

 

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz