Najeźdźcy z kosmosu v3 – Tworzymy grę

Szczegółowe omówienie trzeciej części tworzenia gry Najeźdźcy z kosmosu v3:
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

Link do powyższego omówienia trzeciej części tworzenia gry Najeźdźcy z kosmosu v3:
https://youtu.be/9ja9sZV_2Vs?t=1257

Link do treści zadania:
https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v3

–
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

–
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
Jak uruchomić grę?
1. Skopiuj cały kod i umieść kod przy pomocy notatnika w pliku index.html
Zwróć uwagę by był to plik index.html a nie index.html.txt lub index.txt: https://youtu.be/kYa-2EdIF3Q?t=1658
2. Kliknij dwukrotnie na pliku index.html

–
Kod 3-ciej części gry Najeźdźcy z kosmosu (statek obrońcy prostokątem)

–

<!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>
 
<canvas id="plansza" width="400px" height="200px">
</canvas>

<div>
<button onclick="StartGry()">
START!
</button>
</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 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 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;


 function UstawWartosciPoczatkowe() {
    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;	
   
   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; 
	pocisk_predkosc_y = 1;
	czy_pocisk_istnieje = true;
 } 
 
 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
	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();
//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 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 pocisku
    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();
	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;
    }
 }

 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();
    RysujPocisk();
 }

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

</body>
 
</html>

Kod 3-ciej części gry Najeźdźcy z kosmosu (statek obrońcy prostokątem)

OKI

OLIMPIJSKIE KOŁO INFORMATYCZNE

Najeźdźcy z kosmosu v3 – Tworzymy grę

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz Anuluj pisanie odpowiedzi