Izgradnjom ovih zabavnih igara možete učiniti programiranje manje zamornim i istovremeno usavršiti svoje vještine.
Činjenica da 98,4% svih web stranica koristi JavaScript je razlog zašto biste to trebali znati kao programer. Retrospektivno, izrada igre s JavaScriptom ne samo da vam pomaže da brzo učite. Također vam omogućuje da svladate kako primijeniti njegove jednostavne do složenih koncepata u različitim situacijama na poslu - bilo da ste početnik ili osvježite znanje.
Ako bolje učite uz vizualne demonstracije, ovi vodiči za igre temeljene na JavaScriptu na YouTubeu vrijede vašeg vremena.
1. Kartaška igra s JavaScriptom
Ova kartaška igra s JavaScriptom s Gavinom Lonom pokazuje vam kako preokretati karte s više od 600 redaka JavaScript koda. Dok je glavni fokus podučavanje JavaScripta, također ćete naučiti kombinirati dizajnersku moć CSS-a s HTML-ovim DOM strukturiranjem kako biste postigli brzi odziv s JavaScriptom.
Krajnji cilj projekta je bacanje nekoliko karata, a igrač pogađa asa kada karte konačno zamijene mjesta. Svaka karta je slika četiri različite uloge karata. Dakle, iako nećete sami dizajnirati karte, naučit ćete manipulirati njihovim položajima, povećavati runde igre, dodavati ili uklanjati rezultate kako se razine mijenjaju i pohranjivati rezultate igara u
lokalna pohrana preglednika—svi koriste JavaScript.Udžbenik je postupan i jednostavan za praćenje unatoč teškom radu koji ćete raditi iza scene. Savršen je za početnike i osvježene. Iako se radi o izradi kartaške igre, ona vas izlaže većini JavaScriptovih tehnika povezivanja u stvarnim situacijama. Osim toga, razotkriva vašu sposobnost razmišljanja.
2. 2D Breakout igra s JavaScriptom
Ako želite naučiti kontrolirati intervale radnji i dinamički premještati DOM elemente pomoću JavaScripta, Ania Kubów pokazuje koliko to postaje zabavno s ovim vodičem za probojnu igru pomoću JavaScripta. Kao plus, video također pokazuje kako ugostiti i prikazati svoj projekt potencijalnim poslodavcima.
Razmislite o svakoj mogućnosti u igri izbijanja; pokretna platforma s loptom koja tangencijalno udara u zidove i razbija cigle iznad nje. I u ovom ćete kodirati sustav nagrađivanja. Općenito, vrijedi razmisliti o ovom vodiču za naprednu igru ako želite nešto izgraditi iz temelja bez upotrebe agenata treće strane ili izvornih slika.
Dok spajate svoju logiku unutar funkcija, video podučava više o konceptima JavaScript klasa i objekata u jednostavnim koracima, uključujući najbolje prakse uvjetne izjave poput kućišta prekidača.
3. JavaScript igra zmija
Razotkrijte nostalgiju za igrom Snake II svoje Nokie 3310 izgradnjom ove JavaScript igrice zmije s Kyleom. Vjerojatno ste ovo već igrali i vjerojatno ćete to igrati još mnogo puta u životu budući da ćete kodirati jednu koristeći vanilla JavaScript.
Dok vas uči dinamičkom povezivanju DOM-a, ovaj videozapis pokazuje kako možete izgraditi i koristiti prilagođene module u JavaScriptu. Dakle, otvara vam se prilika da naučite o odvajanju briga pomoću načela ne ponavljaj se (DRY).
Iza kulisa ćete savladati naprednije koncepte JavaScripta. Zadaci, uključujući izradu mreže igrača, postavljanje hrane, izgradnju tijela zmije, izduživanje zmije, kodiranje navigacijska logika, stvaranje sheme nagrada i kazni te kontroliranje brzine zmije, izložit će vas srži JavaScript.
4. Igra Tic Tac Toe s JavaScriptom
Možda se vaš Tic Tac Toe način igranja izoštri dok gradite jedan s JavaScriptom u drugom videu s Kyleom. Ovo je jednostavno, ali vrijedno projekt za početnike u JavaScriptu žvakati dok ćete rješavati složene probleme.
Video ne završava samo s JavaScriptom. Također pokazuje kako iskoristiti dizajn korisničkog sučelja koristeći CSS. Uz dosljednost i predanost, u ovom videu možete naučiti gotovo sve tehnike potrebne za početak vašeg web razvojnog putovanja.
Dok manipulira DOM-om s JavaScriptom, video zaokružuje težak posao oko kodiranja odluka o pobjedi i remiju, odlučivanja o potezima igrača i poravnanja objekata. JavaScript funkcije, petlje i uvjeti neki su od naprednih koncepata koje ćete naučiti u ovom video vodiču za JavaScript Tic tac Toe.
5. Slajd Puzzle Igra s JavaScriptom
Zagonetke mogu zahtijevati razmišljanje. Ali izrada jednog s vanilla JavaScriptom zvuči kao zabavan način da istražite svoju kreativnost i naučite osnovne do složene JavaScript koncepte.
Želite kodirati u ovom vodiču—ako želite vidjeti kako koristiti koncepte JavaScripta, uključujući uvjetne prekidače i dinamičku manipulaciju DOM položajem pomoću prilagođenih i ugrađenih funkcija.
Iako mentor postavlja JavaScript unutar oznake skripte u HTML datoteci, možete vrtjeti svoju skriptu u namjenskoj JavaScript datoteci i povezati je s DOM-om u vašem slučaju radi jasnoće. Bez obzira na to, najbolje je usredotočiti se na temeljnu logiku i misaoni proces kako biste postigli svoj cilj, uključujući kako primijeniti ono što ovdje naučite na scenarije iz stvarnog života.
6. Igra utrke automobila s JavaScriptom
Izrada igre utrkivanja automobila pomoću vanilla JavaScripta možda neće dati najbolji grafički izlaz. Ali spajanje funkcionalne igre utrkivanja automobila uz praćenje ovog vodiča naučit će vas kako iskoristiti snagu JavaScripta koja prožima funkcionalnost u bilo kojoj aplikaciji.
Ovaj vodič uključuje postavljanje dva automobila (crvenog i plavog) na trkaću stazu. Plavi automobil pojavljuje se nasumično iz bilo kojeg smjera, a crveno vozilo, koje predstavlja igrača, pokušava izbjeći sudar. Igra završava kada dođe do kontakta između oba automobila.
Iako je to jednostavan opis onoga što ćete izgraditi u ovom, naučit ćete nešto napredne JavaScript logike za DOM manipulaciju i stiliziranje. Također ćete dobiti uvid u JavaScript operatore dok kreirate nagrade i kazne za igrače.
Dok dodajete funkcionalnosti stazi, neki koncepti koje ćete naučiti uključuju JavaScript događaje, uvjete, anonimne funkcije, JavaScript animaciju, kontrolu intervala i još mnogo toga.
7. Igra Mario s JavaScriptom
Ovaj vodič za igru JavaScript Mario sve je što trebate da uronite u potankosti JavaScripta. Iako izrada igre Mario s JavaScriptom zvuči složeno, Chris, vaš učitelj, pokazuje da je to više nego moguće u ovom YouTube videu. Stoga biste se mogli zabaviti i istražiti svoju sposobnost kritičkog razmišljanja nastavljajući dalje.
Iako bi početnicima ovaj vodič mogao biti malo napredan, to je briljantna potraga za osvježivače da podignu svoje JavaScript vještine na višu razinu.
Osim učenja o manipulacijama elementima, koristit ćete se snagom čistog JavaScripta u izradi responzivnog platna za sučelje igre koristeći objektno orijentirano programiranje (OOP). Budući da je igrač aktivno pokretan, primjena JavaScript kontrole tipkovnice, rukovanje događajima, petlje, operatori, uvjeti te ugrađene i prilagođene funkcije među projektnim su iskustvima koja ćete dobiti.
8. Izradite Minolovac s JavaScriptom
Želite istražiti moć rekurzivnih funkcija i metode polja u množenju DOM elemenata s JavaScriptom? Možda biste trebali započeti s ovim vodičem za JavaScript Minesweeper od Anie Kubów na Traversy Media.
To uključuje puno pažnje za detalje. Ali to je vodič prilagođen početnicima i jedan je od najboljih za bavljenje sustavom rasporeda rešetki pomoću JavaScripta. Konačni cilj je stvoriti predložak mreže u kojem igrači izbjegavaju stati na minu.
Koliko god jednostavno zvučalo, napisat ćete puno programske logike koja uključuje većinu osnovnih tehnika JavaScripta za povezivanje funkcionalnosti igre iza scene.
9. Vodič za JavaScript igru Pokemon s HTML platnom
Pokemon je jedan od najsloženijih projekata igara koje možete izgraditi koristeći JavaScript. Međutim, ako vas čekaju dugi sati rigoroznog kodiranja s JavaScriptom i spremni ste izaći obnovljeni s više samopouzdanja, bolje uskočite u ovaj vodič.
Uz DOM skriptiranje i animaciju s JavaScriptom, video vas uči kako premjestiti i prikazati sredstva, uključujući zvuk i slike, pomoću JavaScripta. Udžbenik otkriva mnogo toga o JavaScriptu što će vam biti dragocjeno u svim problemima kodiranja u stvarnom životu.
Uz druge osnovne tehnike manipulacije JavaScriptom, tutorijal također uvelike koristi OOP koncepte; ovo je vrijedno ako se kasnije planirate baviti TypeScriptom. Jedan od pojednostavljujućih čimbenika ovog vodiča je način na koji mentor opisuje zadatke.
Lako je odustati kada zamislite složeni sustav koji ćete stvoriti da bi ovo funkcioniralo. Ali razmislite što na kraju možete dobiti.
Naučite aplikacije JavaScripta za rješavanje problema
Igre koriste neke od najresponzivnijih i najintuitivnijih logika u programiranju. Stoga se isplati naučiti JavaScript izrađujući ga. Iako se ovi vodiči temelje na igricama, izlažu vas osnovnim konceptima JavaScripta primjenjivim na mnoge druge probleme kodiranja, uključujući web razvoj i izradu mobilnih aplikacija. Čak i ako se planirate kasnije okrenuti okvirima, bez obzira na to ćete primijeniti ove koncepte.