Vytvorením týchto zábavných herných projektov môžete urobiť programovanie menej únavným a zároveň zdokonaliť svoje zručnosti.
Fakt, že 98,4 % všetkých webových stránok používa JavaScript, je dôvod, prečo by ste ho ako vývojár mali vedieť. Pri spätnom pohľade vám hra s JavaScriptom nielen pomáha rýchlo sa učiť. Umožňuje vám tiež zvládnuť, ako aplikovať jeho jednoduché až zložité koncepty v rôznych situáciách na pracovisku – či už ste začiatočník alebo opakovač.
Ak sa lepšie naučíte pomocou vizuálnych ukážok, tieto herné návody založené na JavaScripte na YouTube stoja za váš čas.
1. Kartová hra s JavaScriptom
Táto JavaScriptová kartová hra s Gavinom Lonom vám ukáže cestu okolo otáčania kariet s viac ako 600 riadkami kódu JavaScript. Zatiaľ čo hlavným cieľom je naučiť JavaScript, naučíte sa tiež kombinovať dizajnovú silu CSS so štruktúrovaním DOM HTML, aby ste dosiahli odozvu s JavaScriptom.
Konečným cieľom projektu je prehodiť pár kariet a hráč uhádne eso, keď si karty konečne vymenia miesta. Každá karta je obrazom štyroch rôznych kartových rolí. Takže aj keď nebudete navrhovať karty sami, naučíte sa citlivo manipulovať s ich pozíciami, zvyšovať kolá hry, pridávať alebo odstraňovať skóre pri zmene úrovní a ukladať skóre hry do
miestne úložisko prehliadača— všetko pomocou JavaScriptu.Výukový program je postupný a ľahko sa riadi napriek ťažkým nákladom, ktoré budete robiť v zákulisí. Je ideálny pre začiatočníkov a osviežovačov. Aj keď ide o vytvorenie kartovej hry, vystavuje vás väčšine techník zapojenia JavaScriptu v reálnych situáciách. Navyše to odhalí vašu schopnosť premýšľať.
2. 2D Breakout hra s JavaScriptom
Ak sa chcete naučiť ovládať intervaly akcií a dynamicky presúvať prvky DOM pomocou JavaScriptu, Ania Kubów ukazuje, aké zábavné to môže byť s týmto návodom na prelomovú hru pomocou JavaScriptu. Ako plus, video tiež ukazuje, ako hostiť a prezentovať svoj projekt potenciálnym zamestnávateľom.
Premýšľajte o každej možnosti v únikovej hre; pohyblivá plošina s loptou, ktorá tangenciálne naráža na steny, aby rozbila tehly nad ňou. A aj v tomto zakódujete systém odmien. Celkovo možno povedať, že tento návod na prelomovú hru stojí za zváženie, ak chcete niečo vybudovať od základov bez použitia agentov tretích strán alebo zdrojových obrázkov.
Počas zapojenia logiky do funkcií sa video naučí viac o konceptoch tried a objektov JavaScript v jednoduchých krokoch, vrátane osvedčené postupy podmieneného vyhlásenia ako skrinka vypínača.
3. JavaScriptová hra had
Odhaľte nostalgiu hry Snake II od Nokie 3310 vytvorením tejto JavaScriptovej hadej hry s Kyleom. Pravdepodobne ste to už hrali a pravdepodobne si to zahráte ešte mnohokrát za život, pretože si ho zakódujete pomocou vanilkového JavaScriptu.
Toto video vás naučí dynamicky spájať DOM a ukazuje, ako môžete vytvárať a používať vlastné moduly v JavaScripte. Takže to pre vás otvára príležitosť dozvedieť sa o oddeľovaní obáv pomocou princípu neopakujte sa (DRY).
V zákulisí si osvojíte pokročilejšie koncepty JavaScriptu. Úlohy vrátane vytvorenia mriežky hráča, umiestnenia jedla, zostavenia hadieho tela, predĺženia hada, kódovania navigačná logika, vytvorenie schémy odmien a sankcií a ovládanie rýchlosti hada vás vystavia jadru JavaScript.
4. Tic Tac Toe hra s JavaScriptom
Možno sa vaša hra Tic Tac Toe vyostrila, keď ju vytvoríte pomocou JavaScriptu v inom videu s Kyleom. Toto je jednoduché, ale cenné projekt pre začiatočníkov v JavaScripte prežúvajte sa pri riešení zložitých problémov.
Video nekončí iba JavaScriptom. Tiež ukazuje, ako uchopiť dizajn používateľského rozhrania pomocou CSS. Vďaka dôslednosti a odhodlaniu sa v tomto videu môžete naučiť takmer všetky techniky potrebné na začatie vašej cesty vývoja webu.
Počas manipulácie s DOM pomocou JavaScriptu video zaoberá ťažkú prácu okolo kódovania rozhodnutí o víťazstve a remíze, rozhodovaní o ťahoch hráčov a zarovnaní objektov. Funkcie, slučky a podmienky JavaScriptu sú niektoré z pokročilých konceptov, ktoré sa naučíte v tomto výukovom videu Tic tac Toe pre JavaScript.
5. Posuvná logická hra s JavaScriptom
Hádanky môžu byť myšlienkové. Ale vytvoriť si ho pomocou vanilkového JavaScriptu znie ako zábavný spôsob, ako preskúmať svoju kreativitu a naučiť sa základné až zložité koncepty JavaScriptu.
V tomto návode chcete kódovať – ak chcete vidieť, ako používať koncepty JavaScriptu, vrátane podmienených prepínačov a dynamickej manipulácie s pozíciou DOM pomocou vlastných a vstavaných funkcií.
Aj keď lektor umiestňuje JavaScript do značky skriptu v súbore HTML, môžete svoj skript otočiť vo vyhradenom súbore JavaScript a prepojiť ho s DOM vo vašom prípade, aby ste to objasnili. Bez ohľadu na to je najlepšie zamerať sa na základnú logiku a myšlienkový proces, aby ste dosiahli svoj cieľ, vrátane toho, ako aplikovať to, čo sa tu naučíte, na scenáre z reálneho života.
6. Auto závodná hra s JavaScriptom
Vytvorenie automobilovej závodnej hry pomocou vanilkového JavaScriptu nemusí poskytnúť najlepší grafický výstup. Ale zapojenie fungujúcej automobilovej závodnej hry pri sledovaní tohto tutoriálu vás naučí využívať funkčnosť JavaScriptu v akejkoľvek aplikácii.
Tento tutoriál zahŕňa umiestnenie dvoch áut (červeného a modrého) na pretekársku dráhu. Modré auto sa objaví náhodne z ľubovoľného smeru a červené vozidlo, ktoré predstavuje hráča, sa snaží zabrániť kolízii. Hra končí, keď dôjde ku kontaktu medzi oboma autami.
Aj keď je to jednoduchý popis toho, čo v tomto vytvoríte, naučíte sa nejakú pokročilú logiku JavaScriptu pre manipuláciu a štýly DOM. Získate tiež prehľad o operátoroch JavaScriptu pri vytváraní odmien a trestov pre hráčov.
Pri pridávaní funkcií do stopy sa niektoré koncepty, ktoré sa naučíte, zahŕňajú JavaScriptové udalosti, podmienky, anonymné funkcie, JavaScript animácie, intervalové ovládanie a mnohé ďalšie.
7. Hra Mario s JavaScriptom
Tento návod na hru JavaScript Mario je všetko, čo potrebujete na to, aby ste ponorili hlavu do hlbokej JavaScriptovej hry. Pri vytváraní hry Mario s JavaScriptom, ktorý znie komplexne, Chris, váš učiteľ, v tomto videu YouTube ukazuje, že je to viac než možné. Takže možno budete chcieť zachytiť zábavu a preskúmať svoju schopnosť kritického myslenia tým, že budete pokračovať.
Hoci začiatočníci môžu považovať tento tutoriál za trochu pokročilý, je to skvelá snaha pre osvieženie, aby posunuli svoje zručnosti v JavaScripte na ďalšiu úroveň.
Okrem toho, že sa naučíte manipulovať s prvkami, využijete silu čistého JavaScriptu pri vytváraní responzívneho vzoru plátna pre herné rozhranie pomocou objektovo orientované programovanie (OOP). Keďže je prehrávač aktívne pohyblivý, aplikácia ovládania klávesnice JavaScript, spracovanie udalostí, slučky, operátory, podmienky a vstavané a prispôsobené funkcie patria medzi skúsenosti z viacerých projektov, ktoré získate zisk.
8. Zostavte hľadanie mín pomocou JavaScriptu
Chcete preskúmať silu rekurzívnych funkcií a metódy poľa pri násobení prvkov DOM pomocou JavaScriptu? Možno budete chcieť začať s týmto tutoriálom JavaScript Minesweeper od Anie Kubów na Traversy Media.
Zahŕňa to veľkú pozornosť venovanú detailom. Ale je to návod vhodný pre začiatočníkov a jeden z najlepších, ako si omotať ruky okolo systému rozloženia mriežky pomocou JavaScriptu. Konečným cieľom je vytvoriť šablónu mriežky, kde sa hráči vyhýbajú šliapaniu na mínu.
Akokoľvek to znie jednoducho, napíšete veľa programovacej logiky zahŕňajúcej väčšinu základných techník JavaScriptu, aby ste prepojili funkčnosť hry v zákulisí.
9. Pokemon JavaScript Game Tutorial s HTML Canvas
Pokemon je jedným z najkomplexnejších herných projektov, ktoré môžete vytvoriť pomocou JavaScriptu. Ak vás však čakajú dlhé hodiny rigorózneho kódovania s JavaScriptom a ste pripravení vyjsť obnovený s väčšou istotou, radšej skočte do tohto návodu.
Okrem skriptovania a animácie DOM pomocou JavaScriptu vás video naučí, ako presúvať a vykresľovať aktíva vrátane zvuku a obrázkov pomocou JavaScriptu. Je toho veľa, čo tento tutoriál odhaľuje o JavaScripte, čo bude užitočné pri akýchkoľvek problémoch s kódovaním v reálnom živote.
Okrem iných základných manipulačných techník JavaScript tento tutoriál tiež intenzívne používa koncepty OOP; je to cenné, ak sa plánujete neskôr ponoriť do TypeScriptu. Jedným zo zjednodušujúcich faktorov tohto návodu je spôsob, akým lektor načrtáva úlohy.
Je ľahké vycúvať, keď si predstavíte komplexný systém, ktorý vytvoríte, aby to fungovalo. Ale premýšľajte o tom, čo nakoniec získate.
Naučte sa aplikácie JavaScriptu na riešenie problémov
Hry používajú jednu z najcitlivejších a najintuitívnejších logík v programovaní. Preto sa oplatí naučiť sa JavaScript od jeho vytvárania. Aj keď sú tieto návody založené na hrách, odhaľujú vám základné koncepty JavaScriptu použiteľné pri mnohých iných problémoch s kódovaním vrátane vývoja webu a vytvárania mobilných aplikácií. Aj keď máte v pláne neskôr prejsť na rámce, tieto koncepty použijete bez ohľadu na to.
