Bevezető — Miért így tanulunk?
Ez a kurzus nem elvont elméleti fogalmakkal kezd. Ehelyett valódi, az interneten is futó játékokat — a Froggy Rush-t, a Teknős Versenyt és a Castle Siege-t — bontjuk szét darabjaira, és közben tanulunk minden fogalmat, ami éppen szükséges.
Minden lecke egy konkrét problémát old meg az egyik játékban. Soha nem tanulunk olyat, amire nincs azonnal látható és érthető felhasználása.
A kurzus elvégzéséhez semmilyen előzetes programozási ismeret nem szükséges. Egyetlen eszköz kell: egy szövegszerkesztő (pl. VS Code, Notepad++) és egy böngésző (Chrome, Firefox).
HTML (tartalomszerkezet) + CSS (megjelenés) + JavaScript (programlogika). Nincs Python, nincs C, nincs szerver — minden a böngészőben fut, azonnal látható eredménnyel.
A mi célunk játékot csinálni, amit bárki kipróbálhat a telefonján — ehhez a böngésző a legjobb platform. A Python és C más területekre való (adattudomány, rendszerprogramozás), ezek egy másik kurzus témái lennének.
Mit fogsz tudni a kurzus végén?
- Weboldalt felépíteni nulláról
- Szöveget, képet, linkeket elhelyezni
- Stílusokat, színeket, méreteket beállítani
- Canvas elemet létrehozni
- Mobilon is jól néz ki (reszponzív)
- Változókkal, tömbökkel dolgozni
- Feltételeket és ciklusokat írni
- Függvényeket tervezni és hívni
- Objektumokat és osztályokat használni
- Eseményeket kezelni (klikk, billentyű, érintés)
- Alakzatokat és képeket rajzolni
- Animációs hurkot (game loop) írni
- Ütközésdetektálást megvalósítani
- Mozgást és fizikát szimulálni
- Mentési rendszert készíteni
- Hangokat lejátszani és kezelni
- AI ellenfeleket programozni
- Netlify-ra deployolni
- Mobilos irányítást hozzáadni
Szükséges eszközök
| Eszköz | Mihez kell | Hol szerezhető |
|---|---|---|
| VS Code | Kód írása, szintaxis kiemelés | code.visualstudio.com (ingyenes) |
| Chrome / Firefox | Játék futtatása, hibakeresés (F12) | Már megvan |
| Notepad++ | Alternatív szövegszerkesztő | notepad-plus-plus.org (ingyenes) |
| Netlify | Játék feltöltése online (5. fázis) | netlify.com (ingyenes csomag) |
Nyiss egy új fájlt, mentsd index.html névvel, írd bele: <h1>Helló!</h1> — majd dupla kattintással nyisd meg böngészőben. Ez a programozás.
A kurzus felépítése — 50 lecke, 5 fázis
HTML & CSS alapok — Leckék 1–10
A weboldal vázát és kinézetét hozzuk létre. A Castle Siege HTML felépítésén keresztül tanuljuk meg a dokumentumstruktúrát.
JavaScript alapok — Leckék 11–20
A programlogika. Változóktól az objektumokig, a Froggy Rush pályageneráló kódján szemléltetjük.
Canvas API & Animáció — Leckék 21–30
Rajzolás, mozgás, ütközés — a játékgrafika alapjai. A teknős és a béka megrajzolásán tanuljuk.
Teljes játékok elemzése — Leckék 31–45
A három kész játék minden sorát megértjük: játékállapot, fizika, AI ellenfél, pályagenerálás.
Haladó funkciók & Publikálás — Leckék 46–50
localStorage, hangkezelés, mobilos D-pad, Netlify deploy. A játék felkerül az internetre.
1. Fázis — HTML & CSS alapok
Az első fázisban azt tanuljuk meg, hogyan épül fel egy weboldal — és ezen keresztül azt is, hogyan néz ki a Castle Siege játék HTML kerete belülről.
<!-- Minden weboldal így kezdődik --> <!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Castle Siege</title> <style> /* CSS ide kerül */ </style> </head> <body> <canvas id="c"></canvas> <!-- a játék vászna --> <script> // JavaScript ide kerül </script> </body> </html>
A HTML dokumentum felépítése
DOCTYPE, html, head, body — mit jelent minden tag, és miért kell. A Castle Siege keretét nézzük meg.
HTMLSzöveg, címsorok, bekezdések
h1–h6, p, strong, em, br — szöveges tartalom megformázása. A játék pontszám kijelzőjét elemezzük.
HTMLLinkek, képek, listák
a, img, ul, ol, li — navigáció és tartalom. A honlap játéklistájának HTML-je.
HTMLdiv, span, id, class
A HTML "dobozai" — hogyan szervezzük csoportokba az elemeket. A Castle Siege HUD paneljeinek felépítése.
HTMLGombok és input elemek
button, input, select — a felhasználói felület interaktív elemei. A sebességváltó gombok és mentési mező.
HTMLCSS — Szín, betűtípus, méret
color, background, font-family, font-size — az első stílusok. A játékfelület sötét témájának megértése.
CSSCSS — Dobozmodell (box model)
margin, padding, border, width, height — miért nem ott van valami, ahol vártad. A panel-elemek méretezése.
CSSCSS — Flexbox elrendezés
display:flex, gap, align-items — a modern webfelületek elrendezési rendszere. A HUD gombok sorba rendezése.
CSSCSS — Reszponzív design
@media, max-width, viewport — hogy néz ki mobilon. A játékok mobilos adaptációja.
CSS🏆 Projektzáró: Játéklista oldal
Készítünk egy saját honlapot, ahol a három játék linkként szerepel — mint egy igazi játékportál.
Projekt2. Fázis — JavaScript alapok
A JavaScript az, ami életre kelti a weboldalt. Ebben a fázisban a Froggy Rush és a Galactic Conquest kódjából tanulunk — mindig látjuk, hogy az adott fogalom mire jó a játékban.
// Változók — adatot tárolnak let lives = 3; // szám let playerName = "Zoli"; // szöveg let isJumping = false; // logikai // Objektum — összetartozó adatok együtt const player = { x: 170, // vízszintes pozíció y: 406, // függőleges pozíció lives: 3, // életek száma energy: 100 // energia szint }; // Tömb — több elem egy listában const eggs = [ { x: 120, y: -200 }, { x: 260, y: -450 }, { x: 180, y: -700 } ];
Változók: let, const, var
Miben különböznek? Mikor melyiket használjuk? A játékos életeit és pontjait tároljuk velük.
JavaScriptFeltételek: if, else, switch
A program dönt — ha elfogyott az energia, élet vész. A Castle Siege ütközésdetektálásának logikája.
JavaScriptCiklusok: for, while, forEach
Ismételni kell — minden ellenséget, minden tojást végig kell nézni. A tömb-iteráció a játékban.
JavaScriptFüggvények — újrafelhasználható kód
function, paraméterek, visszatérési érték. A drawTurtle() függvény belseje — minden hívásra más teknőst rajzol.
JavaScriptTömbök és tömbkezelés
push, pop, filter, map, find — az ellenségek, tojások, tornyok mind tömbökben élnek.
JavaScriptObjektumok és tulajdonságok
A játékállapot egy nagy objektum. Hogyan tervezzük meg? Miért jobb mint sok külön változó?
JavaScriptEseménykezelés — billentyűzet
addEventListener, keydown, keyup — hogyan érzékeli a program a nyomógombokat. A WASD irányítás kódja.
JavaScriptEseménykezelés — egér és érintés
click, touchstart, touchend — mobilos és asztali egér kezelés. A D-pad gombjai és a canvas kattintás.
JavaScriptMath és véletlenszerűség
Math.random(), Math.floor(), Math.sin() — hogyan helyezzük véletlenszerűen a tojásokat és köveket.
JavaScript🏆 Projektzáró: Mini kvíz játék
Tisztán JavaScript-tel (canvas nélkül) egy egyszerű kérdés-felelet játékot készítünk.
Projekt3. Fázis — Canvas API & Animáció
A Canvas az a "rajztábla" amire a játékot rajzoljuk. Ebben a fázisban megtanuljuk hogyan rajzolunk alakzatokat, karaktereket — és hogyan animáljuk őket.
// A canvas elem és rajzolási kontextus megszerzése const canvas = document.getElementById('gc'); const ctx = canvas.getContext('2d'); // A game loop — 60-szor fut le másodpercenként function loop() { update(); // 1. frissíti a játékállapotot draw(); // 2. kirajzolja az aktuális képkockát requestAnimationFrame(loop); // 3. hívja magát újra } // Rajzolás a canvasra function draw() { ctx.clearRect(0, 0, W, H); // töröl ctx.fillStyle = '#4aaa22'; // szín beállítás ctx.fillRect(100, 200, 50, 30); // téglalapot rajzol }
Canvas alapok — az első vonal
getContext, fillRect, strokeRect, clearRect — az első lépések. Rajzolunk egy utat és egy kastélyt.
CanvasKörök, ívek, görbék
arc(), beginPath(), closePath() — a teknős testét és fejét ezekkel rajzoljuk.
CanvasSzínek, átlátszóság, gradiensek
rgba(), createLinearGradient(), createRadialGradient() — a vizuális mélység titka.
CanvasA game loop — requestAnimationFrame
Miért 60fps? Hogyan számoljuk az időt? A mozgás sebessége és a DT (deltatime) fogalma.
AnimációKoordinátarendszer és transzformációk
translate(), rotate(), scale(), save(), restore() — hogyan rajzoljuk a teknőst mindig a saját tengelye körül.
CanvasSzöveg rajzolása
fillText(), font, textAlign — a pontszám, a nevek, a visszajelzések megjelenítése a canvason.
CanvasÜtközésdetektálás — kör és téglalap
Math.hypot() távolság-számítás és téglalap-átfedés vizsgálat. A tojásgyűjtés és a kő-ütközés kódja.
FizikaScroll és kamerakövetés
Hogyan görget a pálya? World-space vs screen-space — a Teknős Verseny koordinátarendszere.
AnimációSprite animáció — lábdobogás, ugrás
Math.sin() alapú ciklikus mozgás — hogyan lépeget a teknős és a béka anélkül, hogy képfájlok kellenének.
Animáció🏆 Projektzáró: Mozgó karakter
Saját karaktert rajzolunk canvasra, irányítjuk billentyűzettel, és animáljuk a mozgást.
Projekt4. Fázis — A három játék boncolása
Ebben a fázisban a három komplett játékot bontjuk szét és értjük meg részenként. Minden leckében egy-egy konkrét mechanizmust nézünk meg belülről.
Pályagenerálás procedurálisan
Hogyan helyezzük el a tojásokat, köveket, sirályokat véletlenszerűen de igazságosan elosztva? Az evenSpread() függvény.
Froggy RushFelszínek és sebesség — strategy pattern
A SURFACES objektum: hogyan tároljuk egyhelyen az összes felszíntulajdonságot, és hogyan olvassuk ki dinamikusan.
Froggy RushUgrás fizikája — Math.sin() parabola
Hogyan számítjuk a béka ívét sin() függvénnyel? A jumpT timer és jumpH magasság összefüggése.
Froggy RushTöbbszintű játék — State Machine
play, dead, levelup, gameover — az állapotgép fogalma. Hogyan váltja a játék az állapotait?
Froggy RushNehézségi szintek — DIFF_CFG objektum
Hogyan változtatjuk meg az egész játék viselkedését egyetlen DIFF változóval?
Froggy RushAI ellenfél — célkeresés és navigáció
A teknős AI hogyan dönt: melyik tojás a legközelebbi? Hogyan kerüli a sirályokat? A súlyozásos értékelés.
Teknős VersenyErőforrás-menedzsment — Energia rendszer
Energia fogyás felszínenként, töltés gyűjtéssel — a döntéshozatal és a kompromisszumok játékmechanikája.
Teknős VersenyKamera és world-space koordináták
Miért van az objektumok y koordinátája néha pozitív, néha negatív? Screen-space vs world-space átváltás.
Teknős VersenyKarakter rajzolása rétegekbe
Árnyék → lábak → test → fej → szemek → szájvonal — a helyes rajzolási sorrend és a save/restore használata.
Teknős VersenyTower Defense architektúra
Hogyan épül fel az egész Castle Siege? A hős, tornyok, ellenségek, lövedékek — mind adat a G objektumban.
Castle SiegeDinamikus pályagenerálás — genLevel()
50 különböző pálya egyetlen függvényből. Hogyan skálázzuk a nehézséget matematikával?
Castle SiegeLövedék előrejelzés — lead prediction
A torony nem oda lő ahol az ellenség VAN, hanem ahol LESZ. A mozgássebesség és útidő számítás.
Castle Siege🏆 Projektzáró: Saját mini játék
A tanuló tervez és épít egy saját, egyszerű játékot a megszerzett tudással. Önálló fejlesztés.
Saját Projekt5. Fázis — Haladó funkciók & Publikálás
localStorage — mentés a böngészőben
Hogyan menti a Castle Siege a pálya előrehaladást? JSON.stringify, JSON.parse, localStorage.setItem.
AdatTop 10 ranglista implementálása
Tömbök rendezése, slice() — hogyan tartjuk karban a legjobb eredmények listáját névvel és ponttal.
AdatWeb Audio API — zene és hangeffektek
new Audio(), play(), base64 beágyazás — miért kell így és miért nem tölthet be külön fájlt Androidon.
HangMobilos D-pad és touch kezelés
touchstart, touchend, pointer events — hogyan csináltuk a Froggy Rush és a Castle Siege mobilos irányítását.
Mobil🏆 Deploy — Netlify feltöltés
Hogyan kerül fel a játék az internetre? Netlify fiók, drag-and-drop deploy, egyedi URL. A kurzus lezárása.
DeployA kurzus elvégzése után a tanuló képes lesz önállóan tervezni és megvalósítani egyszerű böngészős játékokat HTML és JavaScript segítségével, és azokat az interneten publikálni — mindössze egy szövegszerkesztővel és egy böngészővel.
Összefoglaló táblázat
| Fázis | Témakör | Leckék | Becsült idő | Példajáték |
|---|---|---|---|---|
| 1. HTML & CSS | Weboldal szerkezete, stílusok, reszponzív design | 1–10 | ~5 hét | Castle Siege (HUD) |
| 2. JavaScript | Változók, feltételek, ciklusok, függvények, tömbök, objektumok | 11–20 | ~6 hét | Froggy Rush (logika) |
| 3. Canvas | Rajzolás, animáció, ütközés, fizika, kamera | 21–30 | ~6 hét | Teknős Verseny (grafika) |
| 4. Játékok | Teljes játékok boncolása, AI, state machine, pályagenerálás | 31–45 | ~8 hét | Mind a három játék |
| 5. Haladó | Mentés, hangok, mobilos UI, deploy | 46–50 | ~3 hét | Teljes implementáció |
| Összesen | 50 lecke | ~6 hónap | 3 saját játék online | |
Ez a dokumentum az 1. lecke anyagának bevezető része. A következő fájlokban az egyes leckék részletes magyarázatát, kód-példáit és feladatait találod — mindig a fenti játékok konkrét soraihoz kapcsolva.