Élesítse JavaScript-készségeit ezzel a 9 szórakoztató játékprojekt oktatóvideóval

Fejlesztőként tudnia kell, hogy az összes webhely 98,4%-a JavaScriptet használ. Utólag visszagondolva, a JavaScript használatával való játék nem csak segít a gyors tanulásban. Azt is lehetővé teszi, hogy elsajátítsa, hogyan alkalmazza egyszerű és összetett fogalmait különböző munkahelyi helyzetekben – akár kezdő, akár pályakezdő.

Ha jobban tanulsz a vizuális bemutatókkal, ezek a JavaScript-alapú játékoktatóanyagok a YouTube-on megérik az idejét.

1. Kártyajáték JavaScripttel

Ez a JavaScript kártyajáték Gavin Lonnal megmutatja az utat a több mint 600 soros JavaScript kóddal rendelkező kártyák forgatásához. Míg a fő hangsúly a JavaScript tanításán van, azt is megtanulja, hogyan kombinálhatja a CSS tervezési erejét a HTML DOM-struktúrájával, hogy a JavaScripttel reagálóképességet érjen el.

A projekt végcélja néhány kártya felforgatása, és a játékos kitalálja az ászt, amikor a kártyák végül helyet cserélnek. Minden kártya négy különböző kártyaszerep képe. Tehát bár nem saját maga fogja megtervezni a kártyákat, megtanulhatja, hogyan lehet reagálóan manipulálni a pozícióikat, növelni a játékköröket, hozzáadni vagy eltávolítani pontszámokat a szintek változásával, és eltárolni a játékeredményeket a

a böngésző helyi tárhelye– mindez JavaScriptet használ.

Az oktatóanyag lépésenkénti és könnyen követhető, annak ellenére, hogy a színfalak mögött nehéz emelni. Kezdőknek és frissítőknek tökéletes. Noha ez egy kártyajáték felépítéséről szól, valós helyzetekben megismerheti a JavaScript legtöbb huzalozási technikáját. Ráadásul feltárja az átgondolási képességedet.

2. 2D Breakout játék JavaScripttel

​​​

Ha szeretné megtanulni a műveleti időközök vezérlését és a DOM-elemek dinamikus mozgatását JavaScript használatával, Ania Kubów megmutatja, milyen szórakoztató ez a JavaScriptet használó kitörési játék oktatóanyaga. A videó pluszként azt is bemutatja, hogyan lehet otthont adni és bemutatni projektjét a potenciális munkaadóknak.

Gondolj minden lehetőségre egy kitörési játékban; egy mozgó platform, amelyen egy golyó érinti a falakat, hogy téglákat törjön fel felette. És ebben is kódolni fogod a jutalmazási rendszert. Összességében érdemes megfontolni ezt a kitörési játék oktatóanyagot, ha az alapoktól szeretne valamit felépíteni harmadik féltől származó ügynökök vagy forrásból származó képek használata nélkül.

Miközben a logikát a függvényeken belül csatlakoztatja, a videó egyszerű lépésekkel többet tanít a JavaScript osztályokról és objektumfogalmakról feltételes nyilatkozatok legjobb gyakorlatai mint a kapcsolótok.

3. JavaScript Snake játék

Fejlessze fel Nokia 3310 Snake II játéknosztalgiáját, és készítse el ezt a JavaScript kígyójátékot Kyle-lal. Valószínűleg már játszottál ezzel, és valószínűleg még sokszor fogod játszani az életed során, mivel egyet a vanília JavaScript használatával fogsz kódolni.

Miközben megtanítja a DOM dinamikus összekapcsolását, ez a videó bemutatja, hogyan hozhat létre és használhat egyéni modulokat JavaScriptben. Lehetőséget nyit tehát arra, hogy megtanulja az aggodalmak szétválasztását a ne ismételje meg magát (SZÁRAZ) elv segítségével.

A színfalak mögött fejlettebb JavaScript-fogalmakat sajátíthat el. Feladatok, beleértve a játékos háló létrehozását, étel elhelyezést, a kígyótest felépítését, a kígyó meghosszabbítását, a kódolást a navigációs logika, a jutalom- és büntetés-séma létrehozása, valamint a kígyó sebességének szabályozása, kiszolgáltatja Önt JavaScript.

4. Tic Tac Toe játék JavaScripttel

​​​​​

Lehet, hogy a Tic Tac Toe játékmeneted kiéleződik, ahogy JavaScripttel építesz egyet egy másik videóban Kyle-al. Ez egy egyszerű, de értékes projekt JavaScript kezdőknek rágcsálni, miközben bonyolult problémákat old meg.

A videó nem csak JavaScript-el ér véget. Azt is bemutatja, hogyan lehet megragadni a felhasználói felület kialakítását CSS segítségével. Következetes és elkötelezettség mellett ebben a videóban szinte minden technikát elsajátíthat, amely a webfejlesztési út elindításához szükséges.

Miközben a DOM-ot JavaScripttel manipulálják, a videó a nyerési és döntetlen döntések kódolása, a játékosok körének eldöntése és az objektumok igazítása köré fonódik. A JavaScript-függvények, -hurkok és -feltételek azok a speciális fogalmak, amelyeket ebből a JavaScript Tic tac Toe oktatóvideóból tanulhat meg.

5. Dia kirakós játék JavaScripttel

A rejtvények gondolati feladatok is lehetnek. A vaníliás JavaScript használatával azonban egy szórakoztató módszernek tűnik a kreativitás felfedezésére és az alapvető és az összetett JavaScript-fogalmak elsajátítására.

Ebben az oktatóanyagban szeretne kódolni – ha szeretné látni, hogyan használhatja a JavaScript-fogalmakat, beleértve a feltételes kapcsolókat és a dinamikus DOM-pozíció-manipulációt egyéni és beépített függvényekkel.

Bár az oktató a JavaScriptet a HTML-fájlban található szkriptcímkén belül helyezi el, a szkriptet egy dedikált JavaScript-fájlban is megforgathatja, és az egyértelműség kedvéért a DOM-hoz kapcsolhatja. Ettől függetlenül a legjobb, ha az alapvető logikára és gondolkodási folyamatra összpontosít a cél elérése érdekében, beleértve azt is, hogyan alkalmazhatja az itt tanultakat a valós élethelyzetekben.

6. Autóverseny játék JavaScripttel

Előfordulhat, hogy egy autóverseny-játék építése vanília JavaScript használatával nem a legjobb grafikus teljesítményt nyújtja. De egy működő autóverseny-játék bekötése, miközben követi ezt az oktatóanyagot, megtanítja Önnek, hogy bármilyen alkalmazásban kihasználja a JavaScript funkcionalitását átitató erejét.

Ez az oktatóanyag két autó (egy piros és egy kék) versenypályára helyezését tartalmazza. A kék autó véletlenszerűen jelenik meg bármely irányból, és a játékost jelképező piros jármű megpróbálja elkerülni az ütközést. A játék akkor ér véget, amikor a két autó érintkezik.

Noha ez egy egyszerű leírása annak, amit ebben a részben fel fog építeni, megtanulhat néhány speciális JavaScript logikát a DOM-kezeléshez és -stílushoz. Betekintést nyerhet a JavaScript-operátorokba is, miközben játékos jutalmakat és büntetéseket hoz létre.

Miközben funkciókat ad hozzá a pályához, néhány fogalom, amelyet megtanulhat, többek között JavaScript-események, feltételek, névtelen függvények, JavaScript-animáció, intervallumvezérlés és még sok más.

7. Mario játék JavaScripttel

Ez a JavaScript Mario játék oktatóanyaga mindössze annyi, amire szüksége van ahhoz, hogy belemerítse a fejét a JavaScript finomságába. Miközben egy JavaScript-alapú Mario-játék bonyolultnak hangzik, Chris, az oktatód megmutatja, hogy ez több a lehetségesnél ebben a YouTube-videóban. Érdemes tehát elkapkodnia a mókát, és felfedezni a kritikai gondolkodási képességét, ha együtt építkezik.

Bár a kezdők kissé haladónak találják az oktatóanyagot, ez egy zseniális küldetés a frissítők számára, hogy JavaScript-készségeiket a következő szintre emeljék.

Az elemek manipulációinak megismerése mellett a tiszta JavaScript erejét is felhasználhatja egy érzékeny vászon kazán elkészítéséhez a játék felületéhez. objektumorientált programozás (OOP). Mivel a lejátszó aktívan mozgékony, a JavaScript billentyűzet vezérlés alkalmazása, eseménykezelés, hurkok, operátorok, feltételek, valamint beépített és egyéni funkciók a projekteken átívelő élmények közé tartoznak nyereség.

8. Építsen Aknakeresőt JavaScripttel

Szeretné felfedezni a rekurzív függvények erejét és tömb módszerek a DOM elemek JavaScripttel való szorzásában? Érdemes lehet kezdeni ezzel a JavaScript Aknakereső oktatóanyaggal, amelyet Ania Kubów készített a Traversy Media oldalán.

Ez nagy figyelmet igényel a részletekre. De ez egy kezdőbarát oktatóanyag, és az egyik legjobb megoldás arra, hogy a rácsos elrendezési rendszer köré csavarja a kezét JavaScript használatával. A végső cél egy olyan rácssablon létrehozása, ahol a játékosok ne lépjenek aknára.

Bármilyen egyszerűnek is hangzik, rengeteg programozási logikát fog írni a legtöbb JavaScript alaptechnikával, hogy a játék funkcióit a színfalak mögé kapcsolja.

9. Pokémon JavaScript játék bemutatója HTML vászonnal

A Pokemon az egyik legösszetettebb játékprojekt, amelyet JavaScript segítségével építhetsz. Ha azonban hosszú, szigorú kódolási órák előtt áll a JavaScript használatával, és készen áll a megújult, magabiztosabb megjelenésre, jobb, ha belevág ebbe az oktatóanyagba.

A DOM-szkriptek és a JavaScript használatával történő animáció mellett a videó megtanítja Önnek, hogyan mozgassa és jelenítse meg az eszközöket, beleértve a hangot és a képeket, JavaScript használatával. Az oktatóanyag sok mindenről leleplez a JavaScriptről, ami értékesnek bizonyul minden valós kódolási probléma esetén.

A többi alapvető JavaScript-manipulációs technikán kívül az oktatóanyag az OOPs fogalmait is erősen használja; ez értékes, ha később tervezi, hogy elmélyedjen a TypeScriptben. Ennek az oktatóanyagnak az egyik leegyszerűsítő tényezője, hogy az oktató hogyan vázolja fel a feladatokat.

Könnyű meghátrálni, ha elképzeli, milyen összetett rendszert fog létrehozni, hogy ez működjön. De gondold át, mit nyerhetsz a végén.

Ismerje meg a JavaScript problémamegoldó alkalmazásait

A játékok a legérzékenyebb és legintuitívabb logikát használják a programozásban. Érdemes tehát megtanulni a JavaScriptet az elkészítése során. Bár ezek az oktatóanyagok játékalapúak, megismerkedhetsz a JavaScript alapelveivel, amelyek számos más kódolási problémára alkalmazhatók, beleértve a webfejlesztést és a mobilalkalmazások létrehozását. Még akkor is, ha később a keretrendszerekhez kíván fordulni, ettől függetlenül alkalmazni fogja ezeket a fogalmakat.