🎮 Misja 2 z 2

Misja: Twórca Gier

Zagraj w grę napisaną przez uczniów INF.03 w JavaScript. Potem dowiedz się jak działa — i zrób własną wersję!

Zagraj teraz → Jak to działa?
zanim zaczniesz pisać kod — zagraj

INF.03 Runner — unikaj przeszkód

Użyj Spacji lub kliknij/dotknij ekran żeby skakać. Na telefonie — tap. Wybierz poziom trudności poniżej.

😌 Łatwy
😐 Normalny
😤 Trudny
🎮 INF.03 Runner
0
Wynik
0
Rekord
❤❤❤
Życia
–
Poziom
Spacja / klik = skok  |  ↓ = kucnięcie  |  Można skakać 2x pod rząd!
zakulisowo

Jak ta gra naprawdę działa

Ta gra to ~120 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 i "padding" żeby nie było niesprawiedliwe.
4
Zdarzenia klawiatury i dotyku
addEventListener('keydown') i 'touchstart' — Twoja gra słucha co robisz i reaguje w czasie rzeczywistym na każde urządzenie.
5
Twoja wersja — zhakuj zasady
Zmień prędkość, kształty, kolory, dodaj power-upy, własne postacie. Kod który zobaczysz poniżej możesz modyfikować do woli.
// Pętla gry — 60 razy na sekundę
function gameLoop() {
  ctx.clearRect(0, 0, W, H);
  // Grawitacja — fizyka w 3 liniach
  player.vy += gravity;
  player.y += player.vy;
  if (player.y > ground) { player.y = ground; player.vy = 0; }
  // Kolizja — uczciwy padding 8px
  if (collides(player, obs, 8)) lives--;
  // Stopniowe przyspieszenie
  speed = baseSpeed + score / 600;
  requestAnimationFrame(gameLoop);
}

// Skok z double-jump!
function jump() {
  if (jumpsLeft > 0) {
    player.vy = jumpForce;
    jumpsLeft--; // double-jump!
  }
}

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.

Dołącz do INF.03 → ← Misja HTML