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>
Super ^^
SUPER