Sestavením těchto zábavných herních projektů můžete udělat programování méně únavným a zároveň zdokonalit své dovednosti.

Skutečnost, že 98,4 % všech webových stránek používá JavaScript, je důvodem, proč byste jej jako vývojáři měli znát. Při zpětném pohledu vám tvorba hry s JavaScriptem nejen pomáhá rychle se učit. Umožňuje vám také zvládnout, jak aplikovat jeho jednoduché na složité koncepty v různých situacích na pracovišti – ať už jste začátečník nebo opakovač.

Pokud se naučíte lépe pomocí vizuálních ukázek, tyto výukové programy her založené na JavaScriptu na YouTube stojí za váš čas.

1. Karetní Hra S JavaScriptem

Tato JavaScriptová karetní hra s Gavinem Lonem vám ukáže cestu kolem obracení karet s více než 600 řádky kódu JavaScript. Zatímco hlavním cílem je výuka JavaScriptu, naučíte se také kombinovat možnosti návrhu CSS se strukturováním DOM HTML, abyste dosáhli citlivosti s JavaScriptem.

Konečným cílem projektu je otočit pár karet a hráč uhodne eso, když si karty konečně vymění místa. Každá karta je obrazem čtyř různých karetních rolí. Takže i když si karty nebudete navrhovat sami, naučíte se citlivě manipulovat s jejich pozicemi, zvyšovat herní kola, přidávat nebo odebírat skóre, jak se mění úrovně, a ukládat skóre hry do

instagram viewer
místní úložiště prohlížeče— vše pomocí JavaScriptu.

Výukový program je postupný a snadno sledovatelný navzdory těžkému zvedání, které budete dělat za scénou. Je ideální pro začátečníky a osvěžovače. Ačkoli se jedná o vytváření karetní hry, vystavuje vás většině technik zapojení JavaScriptu v reálných situacích. Navíc to odhalí vaši schopnost přemýšlet.

2. 2D Breakout hra s JavaScriptem

​​​

Chcete-li se naučit ovládat intervaly akcí a dynamicky přesouvat prvky DOM pomocí JavaScriptu, Ania Kubów ukazuje, jak zábavné to může být s tímto výukovým programem pro přelomovou hru pomocí JavaScriptu. Jako plus video také ukazuje, jak hostit a předvést svůj projekt potenciálním zaměstnavatelům.

Přemýšlejte o každé možnosti v únikové hře; pohyblivá plošina s míčem, který tečně naráží na stěny, aby rozbil cihly nad ní. A v tomto také zakódujete systém odměn. Celkově lze říci, že tento tutoriál o breakout hře stojí za zvážení, pokud chcete něco postavit od základu bez použití agentů třetích stran nebo zdrojových obrázků.

Během zapojení vaší logiky do funkcí se video naučí více o konceptech tříd a objektů JavaScriptu v jednoduchých krocích, včetně osvědčené postupy podmíněného prohlášení jako skříň spínače.

3. JavaScriptová hra had

Odhalte nostalgii hry Snake II ve své Nokii 3310 vytvořením této JavaScriptové hadí hry s Kylem. Pravděpodobně jste to někdy hráli a pravděpodobně si to zahrajete ještě mnohokrát za život, protože jeden budete kódovat pomocí vanilkového JavaScriptu.

Zatímco vás toto video učí dynamicky propojovat DOM dohromady, ukazuje, jak můžete vytvářet a používat vlastní moduly v JavaScriptu. Takže to pro vás otevírá příležitost dozvědět se o oddělování obav pomocí principu neopakujte se (DRY).

V zákulisí si osvojíte pokročilejší koncepty JavaScriptu. Úkoly, včetně vytvoření hráčské mřížky, umístění jídla, stavění hadího těla, prodlužování hada, kódování logika navigace, vytváření systému odměn a trestů a ovládání rychlosti hada vás vystaví jádru JavaScript.

4. Tic Tac Toe hra s JavaScriptem

​​​​​

Možná se vaše hra Tic Tac Toe vyostřuje, když ji vytvoříte pomocí JavaScriptu v jiném videu s Kylem. To je jednoduché, ale cenné projekt pro začátečníky v JavaScriptu žvýkejte, jak budete řešit složité problémy.

Video nekončí pouze JavaScriptem. Také ukazuje, jak uchopit návrh uživatelského rozhraní pomocí CSS. Díky důslednosti a odhodlání se v tomto videu můžete naučit téměř všechny techniky potřebné k zahájení vaší cesty vývoje webu.

Zatímco manipuluje s DOM pomocí JavaScriptu, video zabaluje těžká břemena kolem kódování rozhodnutí o vítězství a remíze, rozhodování o tazích hráčů a zarovnání objektů. Funkce, smyčky a podmínky JavaScriptu jsou některé z pokročilých konceptů, které se naučíte v tomto výukovém videu JavaScript Tic tac Toe.

5. Slide Puzzle Hra S JavaScriptem

Hádanky mohou být myšlenkové. Ale vytvořit si jeden s vanilkovým JavaScriptem zní jako zábavný způsob, jak prozkoumat svou kreativitu a naučit se základní až složité koncepty JavaScriptu.

V tomto kurzu chcete kódovat – pokud chcete vidět, jak používat koncepty JavaScriptu, včetně podmíněných přepínačů a dynamické manipulace s pozicí DOM pomocí vlastních a vestavěných funkcí.

Přestože lektor umístí JavaScript do značky skriptu v souboru HTML, můžete svůj skript otočit ve vyhrazeném souboru JavaScript a pro přehlednost jej propojit s DOM ve vašem případě. Bez ohledu na to je nejlepší zaměřit se na základní logiku a myšlenkový proces, abyste dosáhli svého cíle, včetně toho, jak aplikovat to, co se zde naučíte, na reálnější scénáře.

6. Automobilová závodní hra s JavaScriptem

Vytváření automobilové závodní hry pomocí vanilkového JavaScriptu nemusí poskytovat nejlepší grafický výstup. Ale zapojení fungující automobilové závodní hry při sledování tohoto tutoriálu vás naučí využívat funkcionalitu JavaScriptu v jakékoli aplikaci.

Tento tutoriál zahrnuje umístění dvou aut (červeného a modrého) na závodní dráhu. Modré auto se objeví náhodně z libovolného směru a červené vozidlo, které představuje hráče, se snaží zabránit srážce. Hra končí, jakmile dojde ke kontaktu mezi oběma auty.

I když je to jednoduchý popis toho, co v tomto vytvoříte, naučíte se některé pokročilé logice JavaScriptu pro manipulaci a stylování DOM. Při vytváření odměn a trestů pro hráče také získáte přehled o operátorech JavaScriptu.

Při přidávání funkcí do stopy se některé pojmy, které se naučíte, zahrnují události JavaScriptu, podmínky, anonymní funkce, animace JavaScriptu, ovládání intervalů a mnoho dalších.

7. Hra Mario s JavaScriptem

Tento výukový program hry JavaScript Mario je vše, co potřebujete, abyste ponořili hlavu do hlouposti JavaScriptu. Zatímco děláte hru Mario s JavaScriptem složitě, Chris, váš učitel, v tomto videu na YouTube ukazuje, že je to víc než možné. Takže možná budete chtít zachytit zábavu a prozkoumat svou schopnost kritického myšlení tím, že budete pokračovat.

I když začátečníkům může připadat výukový program trochu pokročilý, je to skvělý pokus o opakování, jak posunout jejich dovednosti v JavaScriptu na další úroveň.

Kromě toho, že se naučíte manipulovat s prvky, využijete sílu čistého JavaScriptu při vytváření responzivního plátna pro herní rozhraní pomocí objektově orientované programování (OOP). Vzhledem k tomu, že je přehrávač aktivně pohyblivý, aplikace ovládání pomocí klávesnice JavaScript, zpracování událostí, smyčky, operátory, podmínky a vestavěné a vlastní funkce patří mezi zkušenosti napříč projekty, které získáte získat.

8. Sestavte hledání min pomocí JavaScriptu

Chcete prozkoumat sílu rekurzivních funkcí a metody pole při násobení prvků DOM pomocí JavaScriptu? Možná budete chtít začít s tímto výukovým programem JavaScript Minesweeper od Ania Kubów na Traversy Media.

Zahrnuje hodně pozornosti k detailům. Ale je to výukový program vhodný pro začátečníky a jeden z nejlepších, jak si omotat ruce kolem systému rozložení mřížky pomocí JavaScriptu. Konečným cílem je vytvořit šablonu mřížky, kde se hráči vyhýbají šlápnutí na minu.

Jakkoli to zní jednoduše, napíšete spoustu programátorské logiky zahrnující většinu technik jádra JavaScriptu, abyste zajistili funkčnost hry v zákulisí.

9. Výuka hry Pokemon JavaScript s HTML Canvasem

Pokemon je jedním z nejsložitějších herních projektů, které můžete vytvořit pomocí JavaScriptu. Pokud však čekáte dlouhé hodiny přísného kódování s JavaScriptem a jste připraveni vyjít obnoveni s větší jistotou, raději skočte do tohoto tutoriálu.

Kromě skriptování a animace DOM pomocí JavaScriptu vás video naučí, jak přesouvat a vykreslovat položky, včetně zvuku a obrázků, pomocí JavaScriptu. Je toho hodně, co tento tutoriál o JavaScriptu odhaluje, a shledáte to jako cenné při jakýchkoli skutečných problémech s kódováním.

Kromě jiných základních manipulačních technik JavaScriptu tento tutoriál také intenzivně využívá koncepty OOPs; to je cenné, pokud se plánujete později ponořit do TypeScriptu. Jedním ze zjednodušujících faktorů tohoto tutoriálu je způsob, jakým lektor nastíní úkoly.

Je snadné vycouvat, když si představíte složitý systém, který vytvoříte, aby to fungovalo. Ale přemýšlejte o tom, co nakonec získáte.

Naučte se aplikace JavaScriptu pro řešení problémů

Hry používají v programování jedny z nejcitlivějších a nejintuitivnějších logik. Takže stojí za to naučit se JavaScript od jeho vytvoření. I když jsou tyto výukové programy založené na hrách, vystaví vám základní koncepty JavaScriptu použitelné pro mnoho dalších problémů s kódováním, včetně vývoje webu a vytváření mobilních aplikací. I když plánujete později přejít na rámce, budete tyto koncepty bez ohledu na to používat.