Z gradnjo teh zabavnih projektov iger lahko naredite programiranje manj dolgočasno in hkrati izpopolnite svoje veščine.
Dejstvo, da 98,4 % vseh spletnih mest uporablja JavaScript, je razlog, zakaj bi ga kot razvijalec morali poznati. Če pogledamo nazaj, izdelava igre z JavaScriptom ne pomaga samo pri hitrem učenju. Prav tako vam omogoča, da obvladate uporabo njegovih preprostih do zapletenih konceptov v različnih situacijah na delovnem mestu – ne glede na to, ali ste začetnik ali osvežitev znanja.
Če se z vizualnimi predstavitvami učite bolje, so te vadnice za igre na podlagi JavaScripta na YouTubu vredne vašega časa.
1. Igra s kartami z JavaScriptom
Ta igra s kartami JavaScript z Gavinom Lonom vam pokaže pot okoli obračanja kart z več kot 600 vrsticami kode JavaScript. Medtem ko je glavni poudarek na poučevanju JavaScripta, se boste naučili tudi kombinirati oblikovalsko moč CSS s strukturiranjem DOM HTML, da dosežete odzivnost z JavaScriptom.
Končni cilj projekta je obrniti nekaj kart in igralec ugane asa, ko se karte končno zamenjajo. Vsaka karta je slika štirih različnih vlog kart. Torej, čeprav kart ne boste oblikovali sami, se boste naučili odzivno manipulirati z njihovimi položaji, povečevati kroge igre, dodajati ali odstranjevati rezultate, ko se stopnje spreminjajo, in shranjevati rezultate iger v
lokalni pomnilnik brskalnika— vse z uporabo JavaScripta.Vadnica poteka postopoma in ji je enostavno slediti kljub težkemu delu, ki ga boste opravljali v zakulisju. Popoln je za začetnike in osvežitve. Čeprav gre za sestavljanje igre s kartami, vas izpostavi večini tehnik povezovanja JavaScripta v resničnih situacijah. Poleg tega razkrije vašo sposobnost razmišljanja.
2. Igra 2D Breakout z JavaScriptom
Če se želite naučiti nadzorovati intervale dejanj in dinamično premikati elemente DOM z uporabo JavaScripta, Ania Kubów pokaže, kako zabavno postane to s to vadnico za prodorne igre z uporabo JavaScripta. Poleg tega video prikazuje tudi, kako gostiti in predstaviti svoj projekt potencialnim delodajalcem.
Razmislite o vsaki možnosti v igri za preboj; premikajoča se ploščad z žogico, ki tangencialno udarja ob stene in razbija opeke nad njo. In tudi v tem boste kodirali sistem nagrajevanja. Na splošno je vredno razmisliti o tej vadnici za prodorno igro, če želite zgraditi nekaj od začetka brez uporabe agentov tretjih oseb ali pridobljenih slik.
Medtem ko povezujete svojo logiko znotraj funkcij, videoposnetek v preprostih korakih uči več o razredih in konceptih objektov JavaScript, vključno z najboljše prakse pogojne izjave kot stikalo.
3. Igra JavaScript Snake
Razvozlajte nostalgijo po igri Snake II za svojo Nokio 3310, tako da s Kylom zgradite to igro kača JavaScript. Verjetno ste to že igrali in verjetno ga boste igrali še velikokrat v življenju, saj boste enega kodirali z uporabo vanilla JavaScript.
Medtem ko vas uči dinamičnega povezovanja DOM-a, ta video prikazuje, kako lahko zgradite in uporabite module po meri v JavaScriptu. Tako vam odpira priložnost, da se naučite o ločevanju skrbi z uporabo načela ne ponavljaj se (DRY).
V zakulisju boste obvladali naprednejše koncepte JavaScript. Naloge, vključno z ustvarjanjem mreže igralcev, postavitvijo hrane, sestavljanjem telesa kače, podaljšanjem kače, kodiranjem navigacijska logika, ustvarjanje sheme nagrajevanja in kazni ter nadzor hitrosti kače vas bodo izpostavili jedru JavaScript.
4. Igra Tic Tac Toe z JavaScriptom
Morda se bo vaše igranje Tic Tac Toe izostrilo, ko ga boste zgradili z JavaScriptom v drugem videu s Kylom. To je preprosto, a dragoceno projekt za začetnike JavaScripta za žvečenje, saj boste reševali zapletene probleme.
Video se ne konča samo z JavaScriptom. Prav tako prikazuje, kako z uporabo CSS prevzeti oblikovanje uporabniškega vmesnika. Z doslednostjo in predanostjo se lahko v tem videu naučite skoraj vseh tehnik, ki so potrebne za začetek vaše poti spletnega razvoja.
Medtem ko manipulirate z DOM z JavaScriptom, videoposnetek ovije težko delo okoli kodiranja odločitev o zmagi in žrebu, odločanja o potezah igralcev in poravnave predmetov. Funkcije, zanke in pogoji JavaScripta so nekateri izmed naprednih konceptov, ki se jih boste naučili v tem videu z vadnico JavaScript Tic tac Toe.
5. Slide puzzle igra z JavaScriptom
Uganke so lahko miselne. Toda izdelava enega z vanilijevim JavaScriptom zveni kot zabaven način za raziskovanje vaše ustvarjalnosti in učenje osnovnih do kompleksnih konceptov JavaScript.
V tej vadnici želite kodirati – če želite videti, kako uporabljati koncepte JavaScript, vključno s pogojnimi stikali in dinamično manipulacijo položaja DOM z uporabo funkcij po meri in vgrajenih funkcij.
Čeprav mentor postavi JavaScript znotraj oznake skripta v datoteki HTML, lahko zavrtite svoj skript v namenski datoteki JavaScript in ga zaradi jasnosti povežete z DOM v vašem primeru. Ne glede na to je najbolje, da se osredotočite na osnovno logiko in miselni proces, da dosežete svoj cilj, vključno s tem, kako to, kar se naučite, uporabiti v bolj resničnih scenarijih.
6. Igra avtomobilskih dirk z JavaScriptom
Izdelava avtomobilske dirkalne igre z uporabo vanilije JavaScript morda ne bo dala najboljšega grafičnega rezultata. Toda povezovanje delujoče dirkalne igre z avtomobili, medtem ko sledite tej vadnici, vas bo naučilo izkoristiti moč JavaScripta, ki daje funkcionalnost, v kateri koli aplikaciji.
Ta vadnica vključuje postavitev dveh avtomobilov (rdečega in modrega) na dirkališče. Modri avto se pojavi naključno iz katere koli smeri, rdeče vozilo, ki predstavlja igralca, pa se poskuša izogniti trčenju. Igra se konča, ko pride do stika med obema avtomobiloma.
Čeprav je to preprost opis tega, kar boste zgradili v tem, se boste naučili nekaj napredne logike JavaScript za manipulacijo in oblikovanje DOM. Dobili boste tudi vpogled v operaterje JavaScript med ustvarjanjem nagrad in kazni za igralce.
Med dodajanjem funkcionalnosti v skladbo boste nekateri koncepti, ki se jih boste naučili, vključevali dogodke JavaScript, pogoje, anonimne funkcije, animacijo JavaScript, nadzor intervalov in še veliko več.
7. Igra Mario z JavaScriptom
Ta vadnica o igri JavaScript Mario je vse, kar potrebujete, da se poglobite v potankosti JavaScripta. Medtem ko se izdelava igre Mario z JavaScriptom sliši zapleteno, Chris, vaš mentor, v tem YouTubovem videoposnetku pokaže, da je to več kot mogoče. Zato boste morda želeli ujeti zabavo in raziskati svojo sposobnost kritičnega razmišljanja, tako da nadaljujete.
Čeprav se bo začetnikom vadnica morda zdela nekoliko naprednejša, je odlična naloga za osvežitve, da svoje veščine JavaScripta dvignejo na višjo raven.
Poleg učenja o manipulaciji elementov boste uporabili moč čistega JavaScripta pri izdelavi odzivnega okvirnega platna za vmesnik igre z uporabo objektno orientirano programiranje (OOP). Ker je igralec aktivno gibljiv, uporaba nadzora tipkovnice JavaScript, obravnavanje dogodkov, zanke, operaterji, pogoji ter vgrajene funkcije in funkcije po meri so med projektnimi izkušnjami, ki jih boste dobiček.
8. Zgradite Minolovca z JavaScriptom
Želite raziskati moč rekurzivnih funkcij in matrične metode pri množenju elementov DOM z JavaScriptom? Morda boste želeli začeti s to vadnico JavaScript Minesweeper avtorice Anie Kubów na Traversy Media.
Vključuje veliko pozornosti do podrobnosti. Ampak to je začetnikom prijazna vadnica in ena najboljših, da se lotite sistema postavitve mreže z uporabo JavaScripta. Končni cilj je ustvariti mrežno predlogo, kjer se igralci izognejo stopitvi na mino.
Kakor preprosto se sliši, boste napisali veliko programske logike, ki bo vključevala večino osnovnih tehnik JavaScripta za povezovanje funkcionalnosti igre v ozadju.
9. Vadnica za igro Pokemon JavaScript s platnom HTML
Pokemon je eden najbolj zapletenih projektov iger, ki jih lahko zgradite z uporabo JavaScripta. Če pa vas čakajo dolge ure strogega kodiranja z JavaScriptom in ste pripravljeni izstopiti prenovljeni z več samozavesti, raje skočite na to vadnico.
Poleg skriptiranja DOM in animacije z JavaScriptom vas videoposnetek nauči premikati in upodabljati sredstva, vključno z zvokom in slikami, z uporabo JavaScripta. Vadnica razkriva marsikaj o JavaScriptu, kar se vam bo zdelo koristno pri kakršnih koli težavah s kodiranjem v resničnem življenju.
Poleg drugih osnovnih manipulativnih tehnik JavaScripta vadnica močno uporablja tudi koncepte OOP; to je dragoceno, če se nameravate pozneje poglobiti v TypeScript. Eden od dejavnikov poenostavitve te vadnice je, kako mentor opiše naloge.
Enostavno se je umakniti, ko si predstavljate zapleten sistem, ki ga boste ustvarili, da bo to delovalo. Toda pomislite, kaj boste na koncu pridobili.
Naučite se aplikacij JavaScripta za reševanje težav
Igre uporabljajo nekaj najbolj odzivne in intuitivne logike programiranja. Zato se je vredno naučiti JavaScripta pri izdelavi. Čeprav te vadnice temeljijo na igrah, vas razkrijejo z osnovnimi koncepti JavaScripta, ki se uporabljajo za številne druge težave s kodiranjem, vključno s spletnim razvojem in ustvarjanjem mobilnih aplikacij. Tudi če nameravate pozneje uporabiti okvire, boste te koncepte uporabili ne glede na to.
