zanim zaczniesz pisać kod — zagraj
Cyber Runner — unikaj przeszkód
Użyj Spacji żeby skakać (Double Jump!). Shift = dash (przyspieszenie). Przetrwaj jak najdłużej!
CYBER RUNNER
SKOK: SPACJA (Double Jump!)
DASH: SHIFT (Przyspieszenie)
Spacja = skok (2x) | Shift = dash | Unikaj czerwonych bloków!
zakulisowo
Jak ta gra naprawdę działa
Ta gra to ~100 linii JavaScript. Nauczysz się wszystkich tych konceptów w INF.03 — od pierwszych tygodni nauki.
1
Canvas — płótno do rysowania
Element <canvas> to jak biała kartka w przeglądarce. JavaScript rysuje na niej grę klatkę po klatce — 60 razy na sekundę.
2
requestAnimationFrame — pętla gry
Zamiast while(true), używamy wbudowanej funkcji przeglądarki. Odświeża obraz z częstotliwością monitora — płynnie i wydajnie.
3
Kolizje — matematyka w grze
Sprawdzamy czy współrzędne gracza i przeszkody się nakładają. To czysta algebra — warunek if z czterema nierównościami.
4
Zdarzenia klawiatury
addEventListener('keydown') — Twoja gra słucha co robisz i reaguje w czasie rzeczywistym. Spacja = skok, Shift = dash.
5
Twoja wersja — zhakuj zasady
Zmień prędkość, kształty, kolory, dodaj power-upy. Kod który zobaczysz poniżej możesz modyfikować do woli.
// Pętla gry — 60 razy na sekundę
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// Grawitacja i skok
player.dy += player.gravity;
player.y += player.dy;
if (player.y + player.h > ground) {
player.y = ground - player.h;
player.dy = 0;
player.jumps = 0;
}
// Skok z double-jump!
if (player.jumps < player.maxJumps) {
player.dy = player.jumpForce;
player.jumps++;
}
// Kolizja
if (player.x < obs.x + obs.w &&
player.x + player.w > obs.x &&
player.y < obs.y + obs.h &&
player.y + player.h > obs.y) {
endGame();
}
Zrób własną wersję tej gry 🎮
W INF.03 rozbudujesz ten projekt — dodasz poziomy, wyniki online, własne grafiki i postacie. Pokażesz na Discordzie.