Täiustage oma JavaScripti oskusi nende 9 lõbusa mänguprojekti õppevideo abil

Asjaolu, et 98,4% kõigist veebisaitidest kasutab JavaScripti, on põhjus, miks peaksite seda arendajana teadma. Tagantjärele mõeldes ei aita JavaScriptiga mängu tegemine mitte ainult kiiresti õppida. Samuti võimaldab see teil õppida, kuidas rakendada selle lihtsaid ja keerukaid kontseptsioone erinevates tööolukordades – olenemata sellest, kas olete algaja või värskendaja.

Kui õpite visuaalsete demonstratsioonide abil paremini, on need YouTube'i JavaScript-põhised mänguõpetused teie aega väärt.

1. Kaardimäng JavaScriptiga

See JavaScripti kaardimäng koos Gavin Loniga näitab teile, kuidas pöörata rohkem kui 600 JavaScripti koodireaga kaarte. Kuigi põhirõhk on JavaScripti õpetamisel, õpite ka ühendama CSS-i disainivõime HTML-i DOM-i struktureerimisega, et saavutada JavaScripti reageerimisvõime.

Projekti lõppeesmärk on paar kaarti ümber pöörata ja mängija arvab ära ässa, kui kaardid lõpuks kohti vahetavad. Iga kaart kujutab endast nelja erineva kaardirolli kujutist. Ehkki te ei kujunda kaarte ise, õpite nende positsioone reageerivalt manipuleerima, mänguringe suurendama, tasemete muutumisel punkte lisama või eemaldama ning mängutulemusi mänguskoori salvestama.

brauseri kohalik salvestusruum- kõik kasutavad JavaScripti.

Õpetus on järkjärguline ja seda on lihtne jälgida, hoolimata raskest tõstmisest, mida te lava taga teete. See sobib suurepäraselt algajatele ja värskendajatele. Kuigi tegemist on kaardimängu loomisega, tutvustab see teile enamikku JavaScripti juhtmestiku tehnikaid päriselus. Lisaks harutab see lahti teie läbimõtlemisvõime.

2. 2D Breakout mäng JavaScriptiga

​​​

Kui soovite õppida toimingute intervalle juhtima ja DOM-i elemente dünaamiliselt JavaScripti abil teisaldama, näitab Ania Kubów selle JavaScripti kasutava väljamurdmismängu õpetusega, kui lõbus see on. Plussina näitab video ka, kuidas oma projekti potentsiaalsetele tööandjatele võõrustada ja tutvustada.

Mõelge läbimurdemängus igale võimalusele; liikuv platvorm, mille pall lööb tangentsiaalselt seinu, et purustada selle kohal olevad tellised. Samuti kodeerite sellesse preemiasüsteemi. Üldiselt tasub seda läbimurdemängu õpetust kaaluda, kui soovite midagi algusest peale üles ehitada ilma kolmandate osapoolte agente või allika pilte kasutamata.

Funktsioonide loogika ühendamisel õpetab video lihtsate sammude abil lisateavet JavaScripti klasside ja objektide kontseptsioonide kohta tingimusliku avalduse parimad tavad nagu lüliti korpus.

3. JavaScript Snake mäng

Lahendage oma Nokia 3310 Snake II mängunostalgia, ehitades koos Kyle'iga selle JavaScripti maomängu. Tõenäoliselt olete seda varem mänginud ja mängite seda tõenäoliselt veel mitu korda elu jooksul, kuna kodeerite selle vanilje JavaScripti abil.

Õpetades teid DOM-i dünaamiliselt ühendama, näitab see video, kuidas saate JavaScriptis kohandatud mooduleid luua ja kasutada. Seega avab see teile võimaluse õppida murede eraldamist, kasutades põhimõtet ära korda ennast (KUIV).

Kulisside taga õpite keerukamaid JavaScripti kontseptsioone. Ülesanded, sealhulgas mängijate ruudustiku loomine, toidu paigutus, mao keha ehitamine, mao pikendamine, mao kodeerimine navigeerimisloogika, preemia- ja karistusskeemi loomine ning mao kiiruse kontrollimine, paljastab teid JavaScript.

4. Tic Tac Toe mäng JavaScriptiga

​​​​​

Võib-olla muutub teie Tic Tac Toe mänguviis teravamaks, kui loote mängu JavaScriptiga teises Kyle'iga videos. See on lihtne, kuid väärtuslik projekt JavaScripti algajatele näksima, kui lahendad keerulisi probleeme.

Video ei lõpe ainult JavaScriptiga. Samuti näitab see, kuidas CSS-i abil oma kasutajaliidese kujundust haarata. Järjepidevuse ja pühendumusega saate sellest videost õppida peaaegu kõiki veebiarenduse teekonna alustamiseks vajalikke tehnikaid.

DOM-i JavaScriptiga manipuleerimisel keskendub video võidu- ja viigiotsuste kodeerimisele, mängijate käigu otsustamisele ja objektide joondamisele. JavaScripti funktsioonid, tsüklid ja tingimused on mõned täpsemad kontseptsioonid, mida saate sellest JavaScripti Tic tac Toe õppevideost õppida.

5. Slide Pusle mäng JavaScriptiga

Mõistatused võivad olla mõtlemapanevad. Kuid selle loomine vanilje JavaScriptiga kõlab lõbusa viisina oma loovuse avastamiseks ja põhiliste ja keeruliste JavaScripti kontseptsioonide õppimiseks.

Soovite selles õpetuses koodida – kui soovite näha, kuidas kasutada JavaScripti kontseptsioone, sealhulgas tingimuslüliteid ja dünaamilist DOM-i positsioonide manipuleerimist kohandatud ja sisseehitatud funktsioonide abil.

Kuigi juhendaja asetab JavaScripti HTML-faili skriptimärgendi sisse, saate skripti keerutada spetsiaalses JavaScripti failis ja linkida selle selguse huvides DOM-iga. Sellest hoolimata on eesmärgi saavutamiseks kõige parem keskenduda põhiloogikale ja mõtteprotsessile, sealhulgas sellele, kuidas siin õpitut rakendada reaalsemates stsenaariumides.

6. Võidusõidumäng JavaScriptiga

Võidusõidumängu ehitamine vanilje JavaScripti abil ei pruugi anda parimat graafilist väljundit. Kuid töötava võidusõiduauto juhtmestiku ühendamine seda õpetust järgides õpetab teid kasutama JavaScripti funktsionaalsust suurendavat jõudu mis tahes rakenduses.

See õpetus hõlmab kahe auto (punase ja sinise) paigutamist võidusõidurajale. Sinine auto ilmub juhuslikult igast suunast ja mängijat esindav punane sõiduk püüab kokkupõrget vältida. Mäng lõpeb, kui mõlema auto vahel on kontakt.

Kuigi see on lihtne kirjeldus selle kohta, mida te selles ehitate, saate teada JavaScripti täiustatud loogikat DOM-i manipuleerimiseks ja kujundamiseks. Samuti saate mängijate preemiaid ja karistusi luues ülevaate JavaScripti operaatoritest.

Kui lisate rajale funktsioone, on mõned mõisted, mida õpite, hõlmavad JavaScripti sündmusi, tingimusi, anonüümseid funktsioone, JavaScripti animatsiooni, intervallide juhtimist ja palju muud.

7. Mario mäng JavaScriptiga

See JavaScripti Mario mänguõpetus on kõik, mida vajate, et sukelduda JavaScripti nigelasse. Kuigi Mario mängu loomine JavaScriptiga kõlab keeruliselt, näitab teie juhendaja Chris selles YouTube'i videos, et see on rohkem kui võimalik. Nii et võiksite lõbutseda ja uurida oma kriitilise mõtlemise võimet, tehes seda edasi.

Kuigi algajatele võib tunduda, et õpetus on veidi arenenud, on see suurepärane püüdlus värskendajatele, et viia oma JavaScripti oskused järgmisele tasemele.

Lisaks elementidega manipuleerimise tundmaõppimisele saate kasutada puhta JavaScripti jõudu mänguliidese jaoks tundliku lõuendi katlaplaadi loomisel, kasutades objektorienteeritud programmeerimine (OOP). Kuna mängija on aktiivselt liikuv, saab kasutada JavaScripti klaviatuuri juhtimist, sündmuste käsitlemist, silmuseid, operaatorid, tingimused ning sisseehitatud ja kohandatud funktsioonid on ühed projektiülesed kogemused, mida saate kasutada kasu.

8. Ehitage JavaScripti abil miinipilduja

Tahad uurida rekursiivsete funktsioonide jõudu ja massiivi meetodid DOM-i elementide korrutamisel JavaScriptiga? Võib-olla soovite alustada selle JavaScripti miinipilduja õpetusega, mille on koostanud Ania Kubów saidil Traversy Media.

See hõlmab suurt tähelepanu detailidele. Kuid see on algajasõbralik õpetus ja üks parimaid võimalusi ruudustiku paigutussüsteemi ümber keerutamiseks JavaScripti abil. Lõppeesmärk on luua ruudustiku mall, kus mängijad väldivad miinile astumist.

Nii lihtsalt kui see ka ei kõla, kirjutate palju programmeerimisloogikat, mis hõlmab enamikku JavaScripti põhitehnikaid, et mängu funktsionaalsust kulisside taga juhtida.

9. Pokemoni JavaScripti mänguõpetus HTML-lõuendiga

Pokemon on üks keerukamaid mänguprojekte, mida saate JavaScripti abil luua. Kui aga ootate JavaScriptiga pikki ja rangeid kodeerimistunde ja olete valmis uuenenud enesekindlamalt välja tulema, lugege parem see õpetus.

Lisaks JavaScriptiga DOM-i skriptimisele ja animatsioonile õpetatakse videos, kuidas varasid, sealhulgas heli ja pilte, JavaScripti abil teisaldada ja renderdada. Õpetus paljastab JavaScripti kohta palju, mis on väärtuslik kõigi reaalsete kodeerimisprobleemide korral.

Lisaks muudele põhilistele JavaScripti manipuleerimistehnikatele kasutab õpetus suuresti ka OOP-ide kontseptsioone; see on väärtuslik, kui kavatsete hiljem TypeScripti süveneda. Üks selle õpetuse lihtsustav tegur on see, kuidas juhendaja ülesandeid visandab.

Lihtne on taganeda, kui kujutate ette keerulist süsteemi, mille selle toimimiseks loote. Kuid mõelge sellele, mida te lõpuks võidate.

Õppige JavaScripti probleemide lahendamise rakendusi

Mängud kasutavad programmeerimisel kõige tundlikumat ja intuitiivsemat loogikat. Seega tasub JavaScripti loomisel õppida. Kuigi need õpetused on mängupõhised, tutvustavad need teile JavaScripti põhikontseptsioone, mis on kohaldatavad paljude muude kodeerimisprobleemide puhul, sealhulgas veebiarendus ja mobiilirakenduste loomine. Isegi kui kavatsete hiljem raamistike poole pöörduda, rakendate neid kontseptsioone sellest hoolimata.