Szczegółowe omówienie trzeciej części tworzenia gry Najeźdźcy z kosmosu v3:
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>