Programozni tanulni nem csak szöveges és videós tananyagokból lehet, hanem kifejezetten erre a célra fejlesztett  játékokból is. Ez egy izgalmas, hatékony és szórakoztató módja a gyarolásnak, ebben a cikkben pedig összeszedtük neked a legjobb programozós játékokat. 

Az itt szereplő oldalak nagy része angolul van, de ha rendelkezel egy alapszintű angoltudással, akkor nyugodtan látogass el ezekre az oldalakra. Amit nem értesz, ahhoz használj fordítóprogramokat és szótárakat. Így játék közben nem csak a programozói készségeid fognak fejlődni, de észrevétlenül fejlődik az angolod is. 

 

 

Programozói gondolkodáshoz szükséges alapvető készségek és logika fejlesztése

LightBot

A LightBot fejleszti az algoritmikus gondolkodást, miközben egyre bonyolódó pályákon kell végigvezetnünk kis robotunkat. Nem szükséges hozzá programozói előismeret, mindenki számára hasznos és szórakoztató gyakorlási lehetőség. Az utasítások kész blokkokban érhetők el, amiket csak a megfelelő sorrendbe kell rendeznünk és kellő számban ismételnünk – tehát nem kell programkódot írni, csupán építőelemeket összerakni. 

  • Ennyibe kerül:
  • Mit tudsz vele gyakorolni: algoritmikus gondolkodás, programozói logika

Programozós játékok, melyekkel könnyedén tanulhatsz

 

Cube Composer

20 különböző szinten gyakorolhatsz logikai feladatokat, amik segítenek a programozói gondolkodásmód kialakításában. Teljesen kezdők számára is ideális játék, az előzőhöz hasonlóan itt is kész utasítások vannak, amik közül el kell döntened, hogy melyiket használod, és milyen sorrendben. 

  • Ennyibe kerül: ingyenes
  • Mit tudsz vele fejleszteni: algoritmikus gondolkodás, programozói logika

 

Programozós játékok, ahol többféle programnyelv közül is választhatsz

CodeCombat 

Ha CodeCombattal játszol, igazi játékélményben lesz részed. Az itt megszerzett tudás nem egy az egyben adaptálható a való élet programozási kihívásaira, cserébe viszont észre sem veszed, hogy tanulsz és fejlődnek a készségeid. 

A játékban a role play game-ekhez hasonlóan saját karaktered van, amihez egyre több kiegészítőt és képességet érhetsz el, ahogy haladsz előre a szintek teljesítésében. Karaktered haladási útvonalát, az akadályok kikerülését és a feladatokat programozással oldod meg. 

  • Ennyibe kerül: ingyenes
  • Választható programozási nyelvek: 
    • Python
    • JavaScript
    • kísérleti verzióban CoffeScript és C++
  • Az oldal nyelve: a játék instrukcióit a CodeCombat közösség tagjai önkéntesként fordítják a saját nyelvükre, így folyamatosan bővül a nyelvek tárháza és egyre több szint érhető el többek közt magyarul is. 

Programozós játékok, ahol többféle programnyelv közül is választhatsz

 

CodinGame 

Haladó szintű programozós játék, különböző feladatokon keresztül fejleszthetjük tovább a készségeinket, megismerkedhetünk haladó koncepciókkal. Multiplayer módban, barátokkal, kollégákkal, csoporttársakkal játszhatunk együtt. Folyamatosan új kihívások és versenyek várnak, de a cél mégsem a vetélkedés, hanem a készségek fejlesztése. 

A CodinGame felhasználói valódi közösséget alkotnak, kérdéseinkre egyszerűen kaphatunk választ a többi játékostól. 

  • Ennyibe kerül: ingyenes
  • Több, mint 25 féle programozási nyelven játszható feladatok, köztük a legnépszerűbbek is megtalálhatók, mint a C#, C++, Go, Java, JavaScript, Kotlin, Objective-C, Perl, PHP, Python, Ruby, Scala, Swift, TypeScript.
  • Az oldal nyelve: angol

 

CheckiO

Programozói kihívások és küldetések középhaladóknak. A megoldásait bárki közzéteheti, így sokat tanulhatunk nem csak a feladatokból, de mások megoldásaiból is. Sőt, nem csak az eredményeket lehet megosztani, de új küldetéseket és feladványokat is kreálhat bárki. 

Nagy előnye az oldalnak, hogy összefoglaló leckékben átismétli a programozás alapfogalmait, kezdők számára ugyan nehezen emészthető formában, de azok, akik már programoztak korábban, szuper írásbeli anyagot kapnak, hogy könnyen felvegyék a fonalat a játékban. 

A játékvilág újabb és újabb helyszínek felfedezése során például puzzle-ök, kincskereső rejtvények várják a felhasználókat. 

  • Ennyibe kerül: ingyenes
  • Választható programozási nyelvek:
    • Python 
    • TypeScript
  • Az oldal nyelve: angol

 

HTML, CSS és JavaScript gyakorlás

Codepip

A Codepip oldalán sokféle webfejlesztős játékot találsz, a weboldalkészítéshez szükséges nyelveket, vagy azokon belüli részegységeket tudod gyakorolni velük. 

  • Mennyibe kerül? 
    • Ingyenes csomag: ezzel néhány ingyenes CSS játékhoz férsz hozzá 
    • Pro csomag: hozzáférsz az összes játékhoz, nyomon tudod követni a fejlődésed és az elért eredményeidet. 
      • Havi előfizetés $6
      • Éves előfizetés: $49
      • Korlátlan hozzáférés: $99
  • Milyen programozós játékok vannak az oldalon? 
    • Számos különböző HTML és CSS játékot találsz a Codepipen, és újakat is folyamatosan fejlesztenek. 
    • Ha JavaScriptet szeretnél gyakorolni, ahhoz is találsz (egyelőre csak egy) játékot. 
  • Az oldal nyelve: angol 

 

 

HTML

CodePip: Nester

Ebben a játékban kódrészletek egymásba ágyazását tudod gyakorolni, így hierarchikus szerkezetű HTML kódot tudsz írni. Mire a szintek végére érsz, gyorsan és pontosan fogsz tudni HTML-t írni és olvasni. 

 

 

CodePip: Sourcery

A Sourcery a játékban az Emmet nevű code editor bővítménnyel ismerkedhetsz meg. Ezzel a bővítménnyel villámgyorsan tudsz HTML kódot írni, billentyűkombinációk és rövidítések használatával. Nagyon hasznos a gyors és pontos HTML kódolásban, de XML-hez is tudod használni.

 

 

CSS

CodePip: Cascade

A Codepip Cascade-on belül sok sok mikrojátékot találsz, amikkel különböző CSS feature-öket tudsz gyakorolni, például: flexbox, grid, transform, direction, filter, counter, nth-child, calc és így tovább. 

 

 

CodePip: CSS Surgeon

Ebben a játékban egy páciens létfontosságú szerveit kell visszapakolni a helyükre CSS transform segítségével. A transform feature lehetővé teszi, hogy egy weboldalon az elemeket mozgassuk, forgassuk, méretezzük. Ezt gyakorolhatjuk játékosan a CSS Surgeonben.

 

 

Ingyenes játék: CodePip: Grid Garden

Veteményeskertünk gondozásához nem kell előfizetnünk az oldalon, ingyenesen gyakorolhatjuk a CSS grid használatát, miközben sorokba és oszlopokba ültetett répák locsolásáról gondoskodunk. A Grid szintén a weboldalak elrendezésében játszik szerepet, nagyon hasznos eszköz, érdemes játékosan gyakorolni.

 

 

További népszerű ingyenes CSS programozós játékok

CSS Diner

Szuper játék a CSS selectorok gyakorlására. Ki lehet választani elemeket, osztályokat… mi van még? Igazság szerint sokkal több módja lehetséges az elemek kiválasztásának, mint ahogy talán gondolnád. A CSS Diner ezeket tanítja meg neked, miközben ki kell választanod ételeket az egyre sokasodó tányérokon.

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: CSS selectorok
  • Az oldal nyelve: angol

 

Flexbox Froggy

A méltán népszerű, magyarul is elérhető Flexbox Froggyval a CSS flexboxot, azaz a pozicionálás egyik módját gyakorolhatod. Összesen 24, fokozatosan nehezedő szint van a játékban, a cél pedig, hogy eljuttasd a békákat a megfelelő tavirózsa-levélre flexbox feature-ök segítségével. 

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: pozicionálás flexbox-szal
  • Az oldal nyelve: magyar

 

Flexbox Defense 

Ebben a játékban szintén a flexboxot tudod gyakorolni, CSS segítségével kell megállítanod az ellenséget és védened a tornyaidat. 

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: flexbox

 

Programozós játékok, amiknek a scriptjéből tanulhatsz sokat

Ezekkel a játékokkal nem aközben tanulsz programozni, miközben játszod őket, hanem akkor, amikor átnézed a kódjukat, amiket megtalálsz a játék fölött codepenben. 

CSS Only Carnival

Ez a játék csak HTML-en és CSS-en alapszik, egyáltalán nincs szükség hozzá JavaScriptre. Izgalmas átnézni a kódot, hogyan áll össze a játék, amit ki is próbálhatsz. 

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: HTML és CSS kód olvasása

 

CSS Tic-Tac-Toe 

Ezen az oldalon egy egyszerű amőbát találsz, annál érdekesebb viszont, hogyan lehet lekódolni egy ilyen játékot. Az előzőhöz hasonlóan itt is csak HTML-re és CSS-re épül az egész program és szintén át tudod nézni a játék kódját. 

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: HTML és CSS kód olvasása

 

Egyéb, a weboldalkészítéshez részben kapcsolódó készségek 

Érdekes és kihívást jelentő programozós játékok, amikkel nem biztos, hogy a leghasznosabb készségeket tudod gyakorolni, amivel egy webfejlesztő rendelkezhet, de cserébe nagyon szórakoztató. 

HEX Invaders

Ebben a játékban nem kell programoznod, de a weboldalkészítésben használt színkódokat kell értelmezned. Ha nem ismered a HTML színkódok rendszerét, olvasd el róla korábbi cikkünket. 

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: 
    • mennyit tartalmaz egy adott árnyalat az egyes alapszínekből 
    • színkódolás a webfejlesztésben

 

Pixactly

Egyszerűen a megadott paramétereknek megfelelő nagyságú alakzatokat kell rajzolni. Arányérzék és pontos becslés szükséges hozzá

  • Ennyibe kerül: ingyenes 
  • Ezt tudod vele gyakorolni: méretezés, pixelek, arányok

 

+1: Dungeons and Developers

Ezen az oldalon nem játékot találsz, hanem egy interaktív ábrát, ahol nyomon követheted, hol tartasz a webfejlesztővé válás útján és mit érdemes még megtanulnod. Társasjáték- és fantasy-rajongóknak kötelező!

  • Ennyibe kerül: ingyenes
  • Térkép a webfejlesztővé váláshoz. (Gyakorolni nem tudsz rajta, de látványos formában követheted, hogy hol tartasz)

 

JavaScript 

Screeps 

A Screeps egy MMO RTS (massively multiplayer online real-time strategy) játék lelkes programozóknak. Az egységeidet mozgató, döntéseiket meghatározó AI-t JavaScript segítségével fejleszted, közben elmerülhetsz a kolónia életének izgalmas történetében. 

Ebben a játékban valódi programozási feladatok kreatív alkalmazásán keresztül szórakozva gyakorlod a JavaScriptet és észrevétlenül fejlődnek a képességeid a kódolás terén. 

A Screeps Slack csatornája kifejezetten aktív, így egy támogató programozói közösség tagjaival is beszélgethet, aki belevág ebbe a stratégiai játékba. 

  • Ennyibe kerül: 14,99 €
  • Ezt tudod vele fejleszteni: AI programozás JavaScriptben 

 

Elevator Saga 

Ebben a játékban lifteket kell irányítanod és embereket eljuttatni egyik emeletről a másikra, JavaScriptet használva. 

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: JavaScript programozás 

 

Code Crunchers

JavaScript matek: aritmetikai operátorok és matematikai módszerek, mint a  Math.pow() vagy a Math.trunc(). Ehhez a játékhoz matematikai jártasság szükséges, de ha a JavaScriptben nem vagy profi, az nem gond. 

  • Ennyibe kerül: a Codepip előfizetés része (havi 6$, éves 49$, ld. feljebb), ezért cserébe HTML és CSS programozós játékokkal is tudsz játszani
  • Ezt tudod vele gyakorolni: aritmetikai operátorok és matematikai módszerek a JavaScriptben

 

Java

Robocode

Egy régi klasszikus, de a Java programozó készségek fejlesztésében még mindig aktuális. 

Ez a játék nem böngészőben fut, le kell tölteni, ezután kezdődhet a tankjaid programozása. Ebben a játékban ugyanis tankok harcolnak egymás ellen, amiket előre kell programozni, hogyan viselkedjenek a harctéren és hogyan reagáljanak az eseményekre. 

  • Ennyibe kerül: ingyenes
  • Ezt tudod vele gyakorolni: Java és .NET programozás
  • Az oldal nyelve: angol

 

A CodeBerry Programozóiskola “Programozási oktatóanyagok” sorozatában olyan kiegészítő tananyagokat találsz az egyes programnyelvekhez, melyek segítségével gyorsan és egyszerűen sajátíthatod el a programozás alapjait.

Programozási oktatóanyagok: