Patobulinkite savo „JavaScript“ įgūdžius naudodami šiuos 9 smagių žaidimų projekto mokymo vaizdo įrašus

Tai, kad 98,4% visų svetainių naudoja „JavaScript“, turėtumėte tai žinoti kaip kūrėjas. Žvelgiant atgal, žaidimo su „JavaScript“ kūrimas ne tik padeda greitai mokytis. Tai taip pat leidžia išmokti pritaikyti paprastas ir sudėtingas sąvokas įvairiose darbo situacijose – nesvarbu, ar esate pradedantysis, ar besimokantis.

Jei mokysitės geriau naudodami vaizdines demonstracijas, šios „JavaScript“ pagrindu sukurtos žaidimų vadovėliai „YouTube“ yra verti jūsų laiko.

1. Kortų žaidimas su JavaScript

Šis „JavaScript“ kortų žaidimas su Gavinu Lonu parodo, kaip apversti korteles su daugiau nei 600 „JavaScript“ kodo eilučių. Nors pagrindinis dėmesys skiriamas „JavaScript“ mokymuisi, taip pat išmoksite derinti CSS projektavimo galią su HTML DOM struktūrizavimu, kad pasiektumėte „JavaScript“ greitį.

Galutinis projekto tikslas yra apversti kelias kortas, o žaidėjas atspėja Tūzą, kai pagaliau kortos pasikeičia. Kiekviena korta yra keturių skirtingų kortos vaidmenų vaizdas. Taigi, nors patys nekursite kortelių, išmoksite reaguoti manipuliuoti jų pozicijomis, padidinti žaidimo raundus, pridėti arba pašalinti balus keičiantis lygiams ir saugoti žaidimo rezultatus

naršyklės vietinė saugykla– visi naudojant „JavaScript“.

Mokomoji programa yra laipsniška ir ją lengva sekti, nepaisant sunkaus kėlimo, kurį atliksite užkulisiuose. Puikiai tinka pradedantiesiems ir besimokantiems. Nors kalbame apie kortų žaidimo kūrimą, jis atskleidžia daugumą „JavaScript“ laidų technikų realiose situacijose. Be to, tai atskleidžia jūsų gebėjimą mąstyti.

2. 2D Breakout žaidimas su JavaScript

​​​

Jei norite išmokti valdyti veiksmų intervalus ir dinamiškai perkelti DOM elementus naudodami „JavaScript“, Ania Kubów parodo, kaip smagu tai padaryti su šia „JavaScript“ žaidimo pamoka. Be to, vaizdo įraše taip pat parodyta, kaip priglobti ir pristatyti savo projektą potencialiems darbdaviams.

Pagalvokite apie visas išsiveržimo žaidimo galimybes; judanti platforma, kurios rutulys liestiniu smūgiu atsitrenkia į sienas, kad virš jos esančios plytos sulaužytų. Taip pat užkoduosite atlygio sistemą šioje sistemoje. Apskritai, verta apsvarstyti šią „breakout“ žaidimo mokymo programą, jei norite ką nors sukurti nuo pat pradžių nenaudodami trečiųjų šalių agentų ar šaltinių.

Sujungiant logiką funkcijose, vaizdo įraše paprastais veiksmais pateikiama daugiau informacijos apie „JavaScript“ klasę ir objektų sąvokas, įskaitant sąlyginių teiginių geriausia praktika kaip jungiklio korpusas.

3. „JavaScript“ gyvatės žaidimas

Atskleiskite savo Nokia 3310 Snake II žaidimo nostalgiją kurdami šį JavaScript gyvatės žaidimą kartu su Kyle. Tikriausiai žaidėte tai anksčiau ir tikriausiai žaisite dar daug kartų per visą gyvenimą, nes koduosite jį naudodami vanilinį JavaScript.

Mokant dinamiškai sujungti DOM, šiame vaizdo įraše parodyta, kaip galite kurti ir naudoti tinkintus modulius „JavaScript“. Taigi tai atveria jums galimybę sužinoti apie rūpesčių atskyrimą naudojant nekartoti savęs (DRY) principą.

Užkulisiuose įsisavinsite sudėtingesnes „JavaScript“ koncepcijas. Užduotys, įskaitant žaidėjų tinklelio kūrimą, maisto išdėstymą, gyvatės kūno sukūrimą, gyvatės pailginimą, navigacijos logika, kuriant atlygio ir baudų schemą ir kontroliuojant gyvatės greitį, bus atskleista JavaScript.

4. „Tic Tac Toe“ žaidimas su „JavaScript“.

​​​​​

Galbūt jūsų „Tic Tac Toe“ žaidimo eiga paaštrėja, kai kuriate jį naudodami „JavaScript“ kitame vaizdo įraše su Kyle. Tai paprasta, bet vertinga projektas „JavaScript“ pradedantiesiems kramtyti, nes išspręsite sudėtingas problemas.

Vaizdo įrašas nesibaigia tik „JavaScript“. Tai taip pat parodo, kaip sugriebti vartotojo sąsajos dizainą naudojant CSS. Nuosekliai ir įsipareigoję šiame vaizdo įraše galite išmokti beveik visų technikų, kurių reikia norint pradėti savo žiniatinklio kūrimo kelionę.

Manipuliuojant DOM naudojant „JavaScript“, vaizdo įrašas aprėpia pergalių ir burtų sprendimų kodavimą, žaidėjų eilių ir objektų išlygiavimą. „JavaScript“ funkcijos, kilpos ir sąlygos yra keletas pažangių sąvokų, kurias sužinosite šiame „JavaScript Tic tac Toe“ mokymo vaizdo įraše.

5. Skaidrių dėlionė su „JavaScript“.

Dėlionės gali būti mąstymo užduotys. Tačiau jos kūrimas naudojant vanilinį JavaScript skamba kaip smagus būdas tyrinėti savo kūrybiškumą ir išmokti pagrindinių iki sudėtingų JavaScript sąvokų.

Jei norite sužinoti, kaip naudoti „JavaScript“ sąvokas, įskaitant sąlyginius jungiklius ir dinaminį DOM padėties manipuliavimą, naudojant pasirinktines ir integruotas funkcijas, norite koduoti šioje pamokoje.

Nors mokytojas įdeda „JavaScript“ į scenarijaus žymą HTML faile, galite pasukti scenarijų tam skirtame „JavaScript“ faile ir susieti jį su DOM savo atveju, kad būtų aiškumo. Nepaisant to, geriausia sutelkti dėmesį į pagrindinę logiką ir mąstymo procesą, kad pasiektumėte savo tikslą, įskaitant tai, kaip pritaikyti čia išmoktas žinias realesniuose scenarijuose.

6. Automobilių lenktynių žaidimas su JavaScript

Automobilių lenktynių žaidimo kūrimas naudojant vanilinį JavaScript gali nesuteikti geriausios grafinės išvesties. Tačiau sujungę veikiantį automobilių lenktynių žaidimą ir vadovaudamiesi šia pamoka, išmoksite panaudoti JavaScript funkcionalumą didinančią galią bet kurioje programoje.

Ši pamoka apima dviejų automobilių (raudonos ir mėlynos) pastatymą lenktynių trasoje. Mėlynas automobilis pasirodo atsitiktinai iš bet kurios pusės, o raudona transporto priemonė, atstovaujanti žaidėjui, bando išvengti susidūrimo. Žaidimas baigiasi, kai abu automobiliai susiliečia.

Nors tai paprastas aprašymas, ką sukursite šiame, išmoksite šiek tiek pažangios JavaScript logikos, skirtos manipuliuoti ir formuoti DOM. Taip pat gausite įžvalgų apie „JavaScript“ operatorius kurdami žaidėjų apdovanojimus ir nuobaudas.

Pridėdami takelio funkcijų, kai kurios sąvokos, kurias išmoksite, apima „JavaScript“ įvykius, sąlygas, anonimines funkcijas, „JavaScript“ animaciją, intervalų valdymą ir daug daugiau.

7. Mario žaidimas su JavaScript

Ši „JavaScript Mario“ žaidimo pamoka yra viskas, ko jums reikia, kad panardintumėte galvą į „JavaScript“ niūrumą. Nors „Mario“ žaidimo su „JavaScript“ kūrimas skamba sudėtingai, Chrisas, jūsų mokytojas, šiame „YouTube“ vaizdo įraše parodo, kad tai daugiau nei įmanoma. Taigi galbūt norėsite pasimėgauti linksmybėmis ir tyrinėti savo kritinio mąstymo gebėjimus.

Nors pradedantiesiems gali atrodyti, kad mokymo programa yra šiek tiek pažengusi, tai puikus siekis atnaujinti savo „JavaScript“ įgūdžius į kitą lygį.

Išmoksite ne tik manipuliuoti elementais, bet ir panaudosite gryno „JavaScript“ galią kurdami reaguojančią drobės pagrindą žaidimo sąsajai naudodami Objektinis programavimas (OOP). Kadangi grotuvas yra aktyviai judrus, JavaScript klaviatūros valdymas, įvykių tvarkymas, kilpos, operatoriai, sąlygos ir integruotos bei tinkintos funkcijos yra viena iš įvairių projektų patirties įgyti.

8. Sukurkite Minesweeper su „JavaScript“.

Norite ištirti rekursinių funkcijų galią ir masyvo metodai dauginant DOM elementus su JavaScript? Galbūt norėsite pradėti nuo šios Anios Kubów „JavaScript Minesweeper“ mokymo programos „Traversy Media“.

Tai apima daug dėmesio detalėms. Tačiau tai pradedantiesiems skirta pamoka ir viena iš geriausių būdų, kaip apvynioti tinklelio išdėstymo sistemą naudojant „JavaScript“. Galutinis tikslas yra sukurti tinklelio šabloną, kuriame žaidėjai neliptų ant minos.

Kad ir kaip paprastai tai skambėtų, jūs parašysite daug programavimo logikos, apimančios daugumą „JavaScript“ pagrindinių metodų, skirtų žaidimo funkcijoms sujungti užkulisiuose.

9. Pokemon JavaScript žaidimo pamoka su HTML drobe

„Pokemon“ yra vienas sudėtingiausių žaidimų projektų, kuriuos galite sukurti naudodami „JavaScript“. Tačiau, jei laukiate ilgų ir griežtų kodavimo valandų naudodami „JavaScript“ ir esate pasiruošę atsinaujinti su didesniu pasitikėjimu, geriau pereikite prie šios pamokos.

Be DOM scenarijų ir animacijos naudojant „JavaScript“, vaizdo įraše mokoma, kaip perkelti ir pateikti išteklius, įskaitant garsą ir vaizdus, ​​naudojant „JavaScript“. Mokomojoje programoje pateikiama daug dalykų apie „JavaScript“, kurie jums bus naudingi sprendžiant bet kokias realaus gyvenimo kodavimo problemas.

Be kitų pagrindinių „JavaScript“ manipuliavimo metodų, mokymo programoje taip pat plačiai naudojamos OOP sąvokos; tai naudinga, jei vėliau planuojate gilintis į TypeScript. Vienas iš šios pamokos supaprastinančių veiksnių yra tai, kaip dėstytojas apibūdina užduotis.

Nesunku atsitraukti, kai įsivaizduojate sudėtingą sistemą, kurią sukursite, kad tai veiktų. Tačiau pagalvokite apie tai, ką galiausiai laimėsite.

Išmokite „JavaScript“ problemų sprendimo programas

Žaidimai naudoja labiausiai reaguojančią ir intuityviausią programavimo logiką. Taigi verta išmokti „JavaScript“ jį sukūrus. Nors šios pamokos yra pagrįstos žaidimais, jos atskleidžia pagrindines „JavaScript“ koncepcijas, taikomas daugeliui kitų kodavimo problemų, įskaitant žiniatinklio kūrimą ir programų mobiliesiems kūrimą. Net jei vėliau ketinate pereiti prie schemų, šias sąvokas taikysite nepaisant to.