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>