projekt 01 / 06 — javascript · canvas · game-dev

moja_pierwsza_gra.js

// JavaScript · Canvas API · requestAnimationFrame

Napisz własną grę od zera. Canvas API, pętla animacji, grawitacja, kolizje — brzmi skomplikowanie, ale to dosłownie ~100 linii JS. Gra działa poniżej. Zmień parametry suwakami i obserwuj efekt na żywo.

JavaScriptCanvas APIrequestAnimationFrameCollision DetectionGame Loop
live demo — modyfikuj parametry na żywo

Zagraj i zmień zasady gry

Przesuń suwak — gra zmienia się natychmiast. Tak wygląda programowanie: modyfikujesz parametr, widzisz efekt. Spacja lub klik = skok. Możesz skakać dwa razy!

🎮 runner.js — edytowalny
0
wynik
0
rekord
❤❤❤
życia
Spacja / klik = skok (2x!)  |  suwaki działają w trakcie gry
Prędkość: 4
Grawitacja: 0.55
Skok: -13
anatomia gry

Jak to działa w środku

1
Canvas — płótno przeglądarki
Element <canvas> to biała kartka w HTML. Przez JS rysujesz na niej co chcesz — prostokąty, okręgi, tekst. ctx.fillRect(), ctx.arc() to Twoje pędzle.
2
requestAnimationFrame — pętla 60 FPS
Zamiast setInterval, przeglądarka sama wywołuje Twoją funkcję 60 razy na sekundę — zsynchronizowaną z odświeżaniem monitora. Płynna animacja bez marnowania CPU.
3
Grawitacja — fizyka w 2 liniach
player.vy += gravity — prędkość pionowa rośnie. player.y += player.vy — pozycja się zmienia. Zmiana wartości gravity na suwaków powyżej to właśnie ta zmienna.
4
Kolizja — algebra prostokątów
Cztery warunki if sprawdzają czy dwa prostokąty się nakładają. Dodajemy "padding" 7px — żeby nie karać gracza za piksel różnicy.
5
addEventListener — gra Cię słucha
keydown nasłuchuje klawiatury, touchstart — dotyku. Jedna funkcja, działa na PC i telefonie. Twoja gra jest multiplatformowa od pierwszej linii.
// Pętla gry — serce każdej gry JavaScript function loop(timestamp) { ctx.clearRect(0, 0, W, H); // wyczyść canvas // Grawitacja (zmień cfg.grv suwakiem powyżej) player.vy += cfg.grv; player.y += player.vy; if (player.y >= GROUND) { player.y = GROUND; player.vy = 0; jumpsLeft = 2; } // Kolizja z paddingiem 7px (uczciwa!) if (px+7 < ox+ow && px+pw-7 > ox && py+7 < oy+oh && py+ph-7 > oy) { lives--; } requestAnimationFrame(loop); // następna klatka } // Double jump! document.addEventListener('keydown', e => { if (e.code === 'Space' && jumpsLeft > 0) { player.vy = cfg.jmp; jumpsLeft--; } });

$ rozbuduj tę grę w INF.03

Multiplayer, własne grafiki, wyniki online — to następny poziom.

$ dołącz do INF.03 następny projekt →