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

Szczegółowe omówienie drugiej części tworzenia gry Najeźdźcy z kosmosu v2:

Link do powyższego omówienia drugiej części tworzenia gry Najeźdźcy z kosmosu v2:
https://youtu.be/kYa-2EdIF3Q?t=1538

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


Zajęcia są kontynuacją pierwszej części pisania gry: https://youtu.be/A6A7TbdO-18?t=922
Zadanie: https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v2/
Rozwiązanie: https://oki.org.pl/najezdzcy-z-kosmosu-v1/


Druga część tworzenia gry Najeźdźcy z kosmosu składa się z poniższych elementów.
Pod każdą sekcją jest plik html. z efektem działań tej części. By pobrać plik html dla danej sekcji, kliknij na nim prawym klawiszem myszy i wybierz opcje “Zapisz jako”.

Wstęp:
Tworzymy pusty plik index.html i sprawdzamy czy ma rozszerzenie *.html?
https://youtu.be/kYa-2EdIF3Q?t=1658

5. Omówienie tego co zrobiliśmy na poprzednich zajęciach:
https://youtu.be/kYa-2EdIF3Q?t=1815
Efekt – plik html do pobrania: index_05_rysujemy_prostokaty
Link do pełnego omówienia poprzednich zajęć z kodami poszczególnych sekcji: https://oki.org.pl/najezdzcy-z-kosmosu-v1/

6. Porządkujemy
a. Procedura rysująca statek
b. Debugowanie – Wypisywanie zmiennych na stronie html
https://youtu.be/kYa-2EdIF3Q?t=2282
Efekt – plik html do pobrania: index_06_funkcja_statek_debugowanie
Prezentacja z kodem: kod_06_funkcja_statek_debugowanie

7. Porządkujemy pocisk
a. Procedura rysująca pocisk
https://youtu.be/kYa-2EdIF3Q?t=3688
Efekt – plik html do pobrania: index_07_funkcja_rysowanie_pocisk
Prezentacja z kodem: kod_07_funkcja_rysowanie_pocisku

8. Animacja pocisku
https://youtu.be/kYa-2EdIF3Q?t=4928
Efekt – plik html do pobrania: index_08_animacja_pocisku
Prezentacja z kodem: kod_08_animacja_pocisku

8a. Animacja pocisku -> Statek obrazkiem z pliku
https://youtu.be/kYa-2EdIF3Q?t=5717
Efekt – plik html do pobrania: index_08a_statek_obrazkiem_z_pliku
Obrazek statku w pliku: https://oki.org.pl/wp-content/uploads/2021/04/obronca.png
Zarówno plik html jak również obrazek muszą być w tym samym katalogu: https://youtu.be/kYa-2EdIF3Q?t=5795
Prezentacja z kodem: kod_08a_animacja_statek_obrazkiem_z_pliku


Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć – statek obrońcy jest w nim prostokątem – jak w punkcie 8 powyżej.
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 drugiej części – 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;
    }
 </style>
</head>
 
<body>
 
<div class="tekst_typ_1">
Najeźdźcy z kosmosu!
</div>
 
<canvas id="plansza" width="400px" height="200px">
</canvas>

<div id="debug1">
</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 pocisk_lewy_gorny_x;
 var pocisk_lewy_gorny_y; 
 var pocisk_rozmiar_x;
 var pocisk_rozmiar_y;
 var pocisk_predkosc_y;


 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; 

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

 function RysujPocisk() {
    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;
 }
 
 function Animacja() {
    rysowanie.clearRect(0, 0, plansza_gry.width, plansza_gry.height);    
    RysujStatek();
    RysujPocisk();
 }

 UstawWartosciPoczatkowe();
 uchwyt_animacji = setInterval(Animacja, 10);   
</script>
 
</body>
 
</html>
Kod drugiej części – Najeźdźcy z kosmosu (statek obrońcy prostokątem)

Liczba komentarzy: 1

Dodaj komentarz