Bramkarz – Tworzymy grę w przeglądarce – Pełne omówienie

Bramkarz – Tworzymy grę w przeglądarce – Pełne omówienie

Szczegółowe omówienie tworzenia gry Bramkarz:

Link do powyższego omówienia tworzenia gry Bramkarz:
https://youtu.be/omWVdLg5iT8?t=936


Gra bramkarz pokazuje jak tworzyć gry:
* w przeglądarce (html)
* przy pomocy elementu canvas
* przy pomocy języka programowania JavaScript


Poszczególne fragmenty:
1. Rysowanie koła / piłki:
https://youtu.be/omWVdLg5iT8?t=4140


Na czym polega gra bramkarz?
https://youtu.be/omWVdLg5iT8?t=935
Wyrzucaną piłeczkę mamy złapać w  paletką


Poniżej znajdziesz kod gry – Bramkarz
index

Zapisz plik na swój komputer – Kliknij na plik prawym klawiszem i wybierz “Zapisz jako”.
Po ściągnięciu pliku:
* Otwórz plik w notatniku by zobaczyć kod
* Kliknij na plik dwukrotnie by uruchomić grę

<!DOCTYPE html>
<html lang="pl">

<head>
 <meta charset="utf-8" />
 <meta name="author" content = "OKI - Olimpijskie Koło Informatyczne" />
 <meta name="description" content="Najprostsza gra - Bramkarz" />
 <title>Gra Bramkarz</title>
 <style>
#plansza {
 margin: 10px;
 border: 3px solid green;
 background-color: grey;
}
.opis {
 color: blue;
 font-weight: bold;
}
 </style>
</head>

<body>
Zagraj w grę!
	
<div class="opis">
Instrukcja:
<br /> * Ruszaj rakietką.
<br /> * Staraj się złapac piłkę.
</div>

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

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

<p>
<h1 id="punkty">
Wynik: 0
</h1>
<h2 id="info">
Daj z siebie wszystko!
</h2>
</p>


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

 var pilka_srodek_x = plansza_gry.width - 30;
 var pilka_srodek_y = plansza_gry.height / 2;
 var pilka_promien = 10;
 var pilka_predkosc_x = 1;
 var pilka_predkosc_y = 1;
 var przyspieszenie = 0;

 var paletka_lewy_gorny_x = 10;
 var paletka_lewy_gorny_y = plansza_gry.height/2 - 20;
 var paletka_rozmiar_x = 10;
 var paletka_rozmiar_y = 40;
 var paletka_predkosc_y = 2;
 
 var czy_klawisz_gora_wcisniety = false;
 var czy_klawisz_dol_wcisniety = false;

 setInterval(Animacja, 10);
 StartGry(); 

 document.addEventListener("keydown", UstawWcisnietyKlawisz, false);
 document.addEventListener("keyup", UstawPodniesionyKlawisz, false);

 function GenerujLosowaPredkosc() {
    var random_value  = Math.random();
    random_value = 5 + Math.random() * 5;
    random_value = random_value / 10;
	return random_value;
 }
 
 function UstawPilke() {
    pilka_srodek_x = plansza_gry.width - 30;
    pilka_srodek_y = plansza_gry.height / 2;
 }

 function UstawLosowePredkosci() {
	pilka_predkosc_x = GenerujLosowaPredkosc();
	pilka_predkosc_y = GenerujLosowaPredkosc();
	var random_value  = Math.random();
    if ( random_value < 0.5 ) 
       pilka_predkosc_y = -1 * pilka_predkosc_y;
 }

 function StartGry() {
    wynik = 0;
    document.getElementById("punkty").innerHTML = "Wynik: " + wynik;
	document.getElementById("info").innerHTML = "Daj z siebie wszystko!"; 
	UstawPilke();
	UstawLosowePredkosci()
	przyspieszenie = 0;
 }
 function RysujPilke() {
    rysowanie.beginPath();
    rysowanie.arc(pilka_srodek_x, pilka_srodek_y, pilka_promien, 0, Math.PI*2);
    rysowanie.fillStyle = "blue";
    rysowanie.fill();
    rysowanie.strokeStyle = "black";
    rysowanie.stroke(); 
    rysowanie.closePath();
 }
 function RysujPaletke() {
    rysowanie.beginPath();
    rysowanie.fillStyle = "darkgreen";
    rysowanie.rect(paletka_lewy_gorny_x, paletka_lewy_gorny_y, 
	               paletka_rozmiar_x, paletka_rozmiar_y);
    rysowanie.fill();
    rysowanie.closePath();
 }

 function Animacja() {
    rysowanie.clearRect(0, 0, plansza_gry.width, plansza_gry.height);
    RysujPaletke();
	RysujPilke();

    if ( pilka_srodek_x-pilka_promien > paletka_lewy_gorny_x + paletka_rozmiar_x) { 
	   pilka_srodek_x -= pilka_predkosc_x;
	   pilka_srodek_y += pilka_predkosc_y;
	   if (pilka_srodek_y+pilka_promien > plansza_gry.height)
          pilka_predkosc_y = -1 * pilka_predkosc_y; 
	   if (pilka_srodek_y-pilka_promien < 0)
          pilka_predkosc_y = -1 * pilka_predkosc_y; 
       if (czy_klawisz_gora_wcisniety == true) {
          paletka_lewy_gorny_y -=  paletka_predkosc_y;
		  if (paletka_lewy_gorny_y < 0)
		     paletka_lewy_gorny_y = 0;
       }
       if (czy_klawisz_dol_wcisniety == true) {
          paletka_lewy_gorny_y +=  paletka_predkosc_y;
		  if (paletka_lewy_gorny_y+paletka_rozmiar_y > plansza_gry.height)
		     paletka_lewy_gorny_y = plansza_gry.height - paletka_rozmiar_y;
       }
	   return;
    }
    if (pilka_srodek_y-pilka_promien <= paletka_lewy_gorny_y+paletka_rozmiar_y)
	   if (pilka_srodek_y+pilka_promien >= paletka_lewy_gorny_y) {
	      ++wynik;
	      document.getElementById("punkty").innerHTML = "Wynik: " + wynik;
          UstawPilke();
		  UstawLosowePredkosci();
          przyspieszenie = przyspieszenie + 0.2;
          pilka_predkosc_x = pilka_predkosc_x + przyspieszenie*1.5;
		  if (pilka_predkosc_y > 0)
              pilka_predkosc_y = pilka_predkosc_y + przyspieszenie;
		  else
              pilka_predkosc_y = pilka_predkosc_y - przyspieszenie;
		  return;
    }
	document.getElementById("info").innerHTML = "Koniec gry! <br \>Spróbuj jeszcze raz!"; 
 }

 function UstawWcisnietyKlawisz(zdarzenie) {
    if (zdarzenie.key == "ArrowUp") {
        czy_klawisz_gora_wcisniety = true;
    }
    if (zdarzenie.key == "ArrowDown") {
        czy_klawisz_dol_wcisniety = true;
    }
 }
 function UstawPodniesionyKlawisz(zdarzenie) {
    if (zdarzenie.key == "ArrowUp") {
        czy_klawisz_gora_wcisniety = false;
    }
    if (zdarzenie.key == "ArrowDown") {
        czy_klawisz_dol_wcisniety = false;
    }
 } 

</script

</body>

</html>
Kod gry – Bramkarz

Liczba komentarzy: 1

Dodaj komentarz