Najeźdźcy z kosmosu v4 (calosc) – Tworzymy grę

Szczegółowe omówienie czwartej, ostatniej części tworzenia gry Najeźdźcy z kosmosu v4:

Link do powyższego omówienia czwartej, ostatniej części tworzenia gry Najeźdźcy z kosmosu v4: https://youtu.be/f9ngAqrQm1k?t=1041
Link do treści zadania: https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v4

Sprawdzenie czy pocisk trafił najeźdźcę: https://youtu.be/f9ngAqrQm1k?t=4136

–
Zajęcia są kontynuacją poprzednich części:
Najeźdźcy z kosmosu v1
Omówienie: https://youtu.be/A6A7TbdO-18?t=922
Zadanie: https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v1
Rozwiązanie: https://oki.org.pl/najezdzcy-z-kosmosu-v1/
–
Najeźdźcy z kosmosu v2
Omówienie: https://youtu.be/kYa-2EdIF3Q?t=1538
Zadanie: https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v2/
Rozwiązanie: https://oki.org.pl/najezdzcy-z-kosmosu-v2
–
Najeźdźcy z kosmosu v3
Omówienie: https://youtu.be/9ja9sZV_2Vs?t=1257
Zadanie: https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v3
Rozwiązanie: https://oki.org.pl/najezdzcy-z-kosmosu-v3

–
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
Jak uruchomić grę?
1. Pobierz pliki wszystkie pliki do tego samego katalogu
a. Plik z kodem index_14_najezdcy_final.html: index_14_najezdcy_final
b. Plik z obrazkiem statku obrońcy: https://oki.org.pl/wp-content/uploads/2021/05/statek.png
c. Plik z obrazkiem pocisku: https://oki.org.pl/wp-content/uploads/2021/05/pocisk.png
d. Plik z obrazkiem statku najeźdźcy: https://oki.org.pl/wp-content/uploads/2021/05/najezdzca.png
2. Kliknij dwukrotnie na pliku index.html
Pamiętaj! Wszystkie pliki muszą być w tym samym katalogu!

–
Kod czwartej, ostatniej części tworzenia gry Najeźdźcy z kosmosu

–

<!DOCTYPE html>
<html lang="pl">
 
<head>
 <meta charset="utf-8" />
 <meta name="author" content = "OKI - Olimpijskie Koło Informatyczne" />
 <title>Najeźdźcy z kosmosu</title>
 <style>
    #plansza {
       margin: 10px;
       border: 3px solid grey;
       background-color: black;
    }
    .tekst_typ_1 {
       color: blue;
	   font-size: 150%;
       font-weight: bold;
    }
    .tekst_typ_2 {
       margin-top: 10px;
    }
</style>
</head>
 
<body>
 
<div class="tekst_typ_1">
Najeźdźcy z kosmosu!
</div>

<div class="tekst_typ_2">
Instrukcja:
<br / > * Strzałki lewo / prawo - ruch statkiem
<br / > * Klawisz 'f' - fire!
</div>

 
<canvas id="plansza" width="400px" height="200px">
</canvas>

<div>
<button onclick="StartGry()">
START!
</button>
</div>

<div id="nasz_wynik" class="tekst_typ_1">
</div>
<div id="ile_zyc" class="tekst_typ_1">
</div>
<div id="info_o_grze" class="tekst_typ_1">
</div>


<div id="debug1" class="tekst_typ_2">
</div> 
 
<script type="text/javascript">
 var plansza_gry = document.getElementById("plansza");
 var rysowanie = plansza_gry.getContext("2d");

 var uchwyt_animacji;

 var wynik;
 var pozostale_zycia;

 var statek_lewy_gorny_x;
 var statek_lewy_gorny_y; 
 var statek_rozmiar_x;
 var statek_rozmiar_y;
 var statek_predkosc_x;
 var czy_lewa_strzalka_wcisnieta;
 var czy_prawa_strzalka_wcisnieta;
 var statek_rysunek;

 var najezdzca_rozmiar_x;
 var najezdzca_rozmiar_y;
 var najezdzca_lewy_gorny_x;
 var najezdzca_lewy_gorny_y;
 var najezdzca_predkosc;
 var najezdzca_rysunek;
 
 var pocisk_lewy_gorny_x;
 var pocisk_lewy_gorny_y; 
 var pocisk_rozmiar_x;
 var pocisk_rozmiar_y;
 var pocisk_predkosc_y;
 var czy_pocisk_istnieje;
 var pocisk_rysunek;
 
 function GenerujLosowyXNajezdxcy() {
    var random_value  = Math.random(); //0-1
	var mozliwe_x = plansza_gry.width - najezdzca_rozmiar_x; //mnozymy razy 340
	random_value = random_value * mozliwe_x; //0 do 340
    random_value = Math.floor (random_value); //liczba całowita
	return random_value;
 }

 function Pocisk_UstawWartosciPoczatkowe() {
    pocisk_rozmiar_x = 5;
    pocisk_rozmiar_y = 20;
    pocisk_lewy_gorny_x = statek_lewy_gorny_x + statek_rozmiar_x/2;
    pocisk_lewy_gorny_y = statek_lewy_gorny_y - pocisk_rozmiar_y; 
 }

 function Najezdca_UstawWartosciPoczatkowe() {
    najezdzca_rozmiar_x = 60;
    najezdzca_rozmiar_y = 20;
    najezdzca_lewy_gorny_x = GenerujLosowyXNajezdxcy();
    najezdzca_lewy_gorny_y = -najezdzca_rozmiar_y;
 }

 function UstawWartosciPoczatkowe() {
    statek_rysunek= new Image();   
    statek_rysunek.src = "statek.png"; 
    statek_rozmiar_x = 40;
    statek_rozmiar_y = 10;
    statek_lewy_gorny_x = plansza_gry.width/2 - statek_rozmiar_x/2;
    statek_lewy_gorny_y = plansza_gry.height-20; 
    statek_predkosc_x = 4;
    czy_lewa_strzalka_wcisnieta = false;
    czy_prawa_strzalka_wcisnieta = false;	

    najezdzca_rysunek = new Image();   
    najezdzca_rysunek.src = "najezdzca.png"; 
    Najezdca_UstawWartosciPoczatkowe();
    najezdzca_predkosc = 0.2;

    pocisk_rysunek = new Image();   
    pocisk_rysunek.src = "pocisk.png";   
	pocisk_predkosc_y = 1;
	czy_pocisk_istnieje = false;
    najezdzca_przyspieszenie = 0.2;
 
    wynik = 0;
	pozostale_zycia = 3;
    document.getElementById("nasz_wynik").innerHTML = "Wynik: " + wynik;
    document.getElementById("ile_zyc").innerHTML = "Liczba żyć: " + pozostale_zycia;
    document.getElementById("info_o_grze").innerHTML = "Walcz!";
 } 

 function UruchomPocisk() {
    czy_pocisk_istnieje = true;
	Pocisk_UstawWartosciPoczatkowe();
 } 
 
 function RysujStatek() {
//debugowanie
    var tekst = "";
    tekst = "DEBUG info!";
    tekst = tekst + "<br />statek_lewy_gorny_x: " + statek_lewy_gorny_x;
    tekst = tekst + "<br /> statek_lewy_gorny_y: " + statek_lewy_gorny_y;
    tekst = tekst +  "<br /> statek_rozmiar_x: " + statek_rozmiar_x;
    tekst = tekst +  "<br /> statek_rozmiar_y: " + statek_rozmiar_y;
	document.getElementById("debug1").innerHTML = tekst;   
/*
//rysowanie jako prostokat
	rysowanie.beginPath();
    rysowanie.fillStyle = "blue";
    rysowanie.rect(statek_lewy_gorny_x, statek_lewy_gorny_y, 
                   statek_rozmiar_x, statek_rozmiar_y); 
    rysowanie.fill();
    rysowanie.closePath();
*/
//rysowanie jako obrazek
    rysowanie.drawImage(statek_rysunek, statek_lewy_gorny_x, statek_lewy_gorny_y, 
	                    statek_rozmiar_x, statek_rozmiar_y);
						
//Jesli klawisz lewy wcisniety - przesuwamy statek w lewo do 0 max
	if ( czy_lewa_strzalka_wcisnieta == true) 
	   statek_lewy_gorny_x = statek_lewy_gorny_x - statek_predkosc_x;
	if ( statek_lewy_gorny_x  < 0 ) 
	   statek_lewy_gorny_x = 0;
	if ( czy_prawa_strzalka_wcisnieta == true) 
	   statek_lewy_gorny_x = statek_lewy_gorny_x + statek_predkosc_x;
	if ( statek_lewy_gorny_x+statek_rozmiar_x  > plansza_gry.width ) 
	   statek_lewy_gorny_x = plansza_gry.width-statek_rozmiar_x;
} 

 function RysujNajezdzce() {
/*
//rysowanie jako prostokat
    rysowanie.beginPath();
    rysowanie.fillStyle = "red";
    rysowanie.rect(najezdzca_lewy_gorny_x, najezdzca_lewy_gorny_y, 
                najezdzca_rozmiar_x, najezdzca_rozmiar_y);
    rysowanie.fill();
    rysowanie.closePath();
*/
//rysowanie jako obrazek
    rysowanie.drawImage(najezdzca_rysunek, najezdzca_lewy_gorny_x, najezdzca_lewy_gorny_y, 
                        najezdzca_rozmiar_x, najezdzca_rozmiar_y) ;
						
    najezdzca_lewy_gorny_y = najezdzca_lewy_gorny_y + najezdzca_predkosc;

	if ( najezdzca_lewy_gorny_y+najezdzca_rozmiar_y > plansza_gry.height) {
       Najezdca_UstawWartosciPoczatkowe();
	   return;
	}
//czy zestrzelony
	if ( (pocisk_lewy_gorny_x>najezdzca_lewy_gorny_x) && 
	     (pocisk_lewy_gorny_x<najezdzca_lewy_gorny_x+najezdzca_rozmiar_x) ) {
	   if ( pocisk_lewy_gorny_y < najezdzca_lewy_gorny_y+najezdzca_rozmiar_y ) {
	      if ( czy_pocisk_istnieje==true  ) {
	         Najezdca_UstawWartosciPoczatkowe();
		     czy_pocisk_istnieje = false;
		     ++wynik;
 	         document.getElementById("nasz_wynik").innerHTML = "Wynik: " + wynik;
			 najezdzca_predkosc = najezdzca_predkosc + najezdzca_przyspieszenie;
			 return;
          }
	   }
    }
//czy uderzył w nas najzdzca?
	if ( statek_lewy_gorny_x > najezdzca_lewy_gorny_x+najezdzca_rozmiar_x )
	   return;
	if ( statek_lewy_gorny_x+statek_rozmiar_x < najezdzca_lewy_gorny_x )
	   return;
	if ( najezdzca_lewy_gorny_y+najezdzca_rozmiar_y < statek_lewy_gorny_y )
	   return;
//jesli jestesmy tu to najezdzca w nas uderzył!
     Najezdca_UstawWartosciPoczatkowe();
    --pozostale_zycia;
    document.getElementById("ile_zyc").innerHTML = "Liczba żyć: " + pozostale_zycia;
	if ( pozostale_zycia <= 0 ) {
	   clearInterval(uchwyt_animacji);
       document.getElementById("info_o_grze").innerHTML = "Koniec - Spróbuj się poprawić!";
	}
 }

 function RysujPocisk() { 

//info o pozycji y pocisku na canvas
    rysowanie.fillStyle = "white";
    var tekst = "pocisk_lewy_gorny_y: " + pocisk_lewy_gorny_y;
	rysowanie.fillText(tekst, 10, 10);
//jeśli pocisk wyszedl oza plansze albo nie wystrzelony - nie rysujemy!
	if (czy_pocisk_istnieje == false)
	   return;
/*
//rysowanie jako kreska
    rysowanie.beginPath();
    rysowanie.strokeStyle = 'white';
    rysowanie.lineWidth = pocisk_rozmiar_x;
    rysowanie.moveTo(pocisk_lewy_gorny_x, pocisk_lewy_gorny_y);
    rysowanie.lineTo(pocisk_lewy_gorny_x, pocisk_lewy_gorny_y+pocisk_rozmiar_y);
    rysowanie.stroke(); 
    rysowanie.closePath();
*/
//rysowanie jako obrazek
    rysowanie.drawImage(pocisk_rysunek, pocisk_lewy_gorny_x, pocisk_lewy_gorny_y, 
                        pocisk_rozmiar_x, pocisk_rozmiar_y) ;	
						
	pocisk_lewy_gorny_y = pocisk_lewy_gorny_y - pocisk_predkosc_y;
	if ((pocisk_lewy_gorny_y+pocisk_rozmiar_y) < 0)
	   czy_pocisk_istnieje = false;  
 }

 function UstawWcisnietyKlawisz(zdarzenie) {
    if (zdarzenie.key == "ArrowLeft") {
        czy_lewa_strzalka_wcisnieta = true;
    }
    if (zdarzenie.key == "ArrowRight") {
        czy_prawa_strzalka_wcisnieta = true;
    }
    if (zdarzenie.key == "f") {
        if (czy_pocisk_istnieje == false) {
		   UruchomPocisk();
        }
    }
 }

 function UstawPodniesionyKlawisz(zdarzenie) {
    if (zdarzenie.key == "ArrowLeft") {
        czy_lewa_strzalka_wcisnieta = false;
    }
    if (zdarzenie.key == "ArrowRight") {
        czy_prawa_strzalka_wcisnieta = false;
    }
 } 

 document.addEventListener("keydown", UstawWcisnietyKlawisz, false);
 document.addEventListener("keyup", UstawPodniesionyKlawisz, false);
 
 function Animacja() {
    rysowanie.clearRect(0, 0, plansza_gry.width, plansza_gry.height);    
	RysujStatek();
	RysujNajezdzce();
    RysujPocisk();
 }

 function StartGry() {
    UstawWartosciPoczatkowe();
	clearInterval(uchwyt_animacji);
    uchwyt_animacji = setInterval(Animacja, 10);
 }
</script>
 

</body>
 
</html>

Kod czwartej, ostatniej części tworzenia gry Najeźdźcy z kosmosu

OKI

OLIMPIJSKIE KOŁO INFORMATYCZNE

Najeźdźcy z kosmosu v4 (calosc) – Tworzymy grę

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz Anuluj pisanie odpowiedzi