Rakentamalla näitä hauskoja peliprojekteja voit tehdä ohjelmoinnista vähemmän tylsää ja samalla hioa taitojasi.
Koska 98,4 % kaikista verkkosivustoista käyttää JavaScriptiä, sinun pitäisi tietää se kehittäjänä. Jälkeenpäin katsottuna pelin tekeminen JavaScriptillä ei vain auta sinua oppimaan nopeasti. Sen avulla voit myös oppia soveltamaan sen yksinkertaisia ja monimutkaisia käsitteitä erilaisissa työtilanteissa – olitpa sitten aloittelija tai kouluttaja.
Jos opit paremmin visuaalisten esittelyjen avulla, nämä JavaScript-pohjaiset peliohjeet YouTubessa ovat vaivan arvoisia.
1. Korttipeli JavaScriptillä
Tämä JavaScript-korttipeli Gavin Lonin kanssa näyttää tien käännät kortteja, joissa on yli 600 riviä JavaScript-koodia. Vaikka pääpaino on JavaScriptin opettamisessa, opit myös yhdistämään CSS: n suunnitteluvoiman HTML: n DOM-rakenteen kanssa, jotta JavaScriptin avulla saavutetaan reagointikyky.
Projektin lopputavoite on kääntää pari korttia, ja pelaaja arvaa ässän, kun kortit lopulta vaihtavat paikkoja. Jokainen kortti on kuva neljästä eri korttiroolista. Joten vaikka et suunnittele kortteja itse, opit manipuloimaan niiden paikkoja reagoivasti, lisäämään pelikierroksia, lisäämään tai poistamaan pisteitä tasojen muuttuessa ja tallentamaan pelien tulokset
selaimen paikallinen tallennustila-kaikki JavaScriptillä.Oppitunti on vaiheittainen ja helppo seurata kulissien takana tehtävästä raskasnostosta huolimatta. Se on täydellinen aloittelijoille ja päivittelijöille. Vaikka tässä on kyse korttipelin rakentamisesta, se paljastaa sinut suurimmalle osalle JavaScriptin kytkentätekniikoista tosielämän tilanteissa. Lisäksi se paljastaa ajattelukykysi.
2. 2D Breakout -peli JavaScriptillä
Jos haluat oppia hallitsemaan toimintavälejä ja siirtämään DOM-elementtejä dynaamisesti JavaScriptin avulla, Ania Kubów näyttää, kuinka hauskaa se on tässä JavaScriptiä käyttävän Breakout-pelin opetusohjelmassa. Plussana on se, että video näyttää myös, kuinka voit isännöidä ja esitellä projektiasi mahdollisille työnantajille.
Ajattele kaikkia mahdollisuuksia purkautumispelissä; liikkuva alusta, jonka pallo osuu tangentiaalisesti seiniin murtaakseen sen yläpuolella olevia tiiliä. Ja koodaat palkkiojärjestelmän myös tähän. Kaiken kaikkiaan tämä breakout-pelin opetusohjelma on harkitsemisen arvoinen, jos haluat rakentaa jotain alusta alkaen käyttämättä kolmannen osapuolen agentteja tai lähdekuvia.
Kun kytket logiikkasi funktioihin, video opettaa lisää JavaScript-luokista ja objektikonsepteista helpoissa vaiheissa, mukaan lukien ehdollisen lausunnon parhaat käytännöt kuten kytkinkotelo.
3. JavaScript-käärmepeli
Selvitä Nokia 3310:n Snake II -pelin nostalgia rakentamalla tämä JavaScript-käärmepeli Kylen kanssa. Olet luultavasti pelannut tätä ennen ja tulet pelaamaan sitä todennäköisesti monta kertaa elämäsi aikana, koska koodaat sen vanilja JavaScriptillä.
Opettaessasi yhdistämään DOM: n dynaamisesti, tämä video osoittaa, kuinka voit rakentaa ja käyttää mukautettuja moduuleja JavaScriptissä. Joten se avaa sinulle mahdollisuuden oppia huolenaiheiden erottamisesta älä toista itseäsi (DRY) -periaatteella.
Kulissien takana hallitset edistyneempiä JavaScript-käsitteitä. Tehtävät, mukaan lukien pelaajaruudukon luominen, ruoan sijoittaminen, käärmeen rungon rakentaminen, käärmeen pidentäminen, koodaaminen navigointilogiikka, palkinto- ja rangaistusjärjestelmän luominen ja käärmeen nopeuden hallinta paljastaa sinut ytimelle JavaScript.
4. Tic Tac Toe -peli JavaScriptillä
Ehkä Tic Tac Toe -pelisi terävöityy, kun rakennat sen JavaScriptillä toisessa Kylen kanssa tehdyssä videossa. Tämä on yksinkertainen, mutta arvokas projekti JavaScript-aloittelijoille pureskella, kun ratkaiset monimutkaisia ongelmia.
Video ei pääty vain JavaScriptiin. Se myös osoittaa, kuinka tartu käyttöliittymäsi suunnitteluun CSS: n avulla. Johdonmukaisesti ja sitoutuneesti voit oppia tästä videosta melkein kaikki tekniikat, joita tarvitaan verkkokehitysmatkasi aloittamiseen.
Kun DOM: ia manipuloidaan JavaScriptillä, video kietoo raskaan noston voitto- ja tasapelipäätösten koodaamiseen, pelaajien vuorojen päättämiseen ja objektien kohdistukseen. JavaScript-funktiot, silmukat ja ehdot ovat joitain edistyneitä käsitteitä, jotka opit tässä JavaScript Tic tac Toe -opetusvideossa.
5. Diapulmapeli JavaScriptillä
Palapelit voivat olla ajatuksia herättäviä. Mutta sellaisen rakentaminen vanilja-JavaScriptilla kuulostaa hauskalta tavalta tutkia luovuuttasi ja oppia perus- ja monimutkaisia JavaScript-käsitteitä.
Haluat koodata tässä opetusohjelmassa – jos haluat nähdä, miten JavaScript-konsepteja käytetään, mukaan lukien ehdolliset kytkimet ja dynaaminen DOM-paikan manipulointi mukautettujen ja sisäänrakennettujen toimintojen avulla.
Vaikka ohjaaja sijoittaa JavaScriptin HTML-tiedoston komentosarjatunnisteen sisään, voit selvyyden vuoksi pyörittää skriptin omassa JavaScript-tiedostossa ja linkittää sen DOM: iin. Siitä huolimatta on parasta keskittyä ydinlogiikkaan ja ajatteluprosessiin saavuttaaksesi tavoitteesi, mukaan lukien kuinka soveltaa täällä oppimaasi todellisempiin skenaarioihin.
6. Autokilpapeli JavaScriptillä
Kilpa-autopelin rakentaminen vanilja-JavaScriptilla ei välttämättä anna parasta graafista tulosta. Mutta toimivan kilpa-ajoneuvon johdotus tätä opetusohjelmaa noudattaen opettaa sinua hyödyntämään JavaScriptin toimintoja lisäävää tehoa missä tahansa sovelluksessa.
Tämä opetusohjelma sisältää kahden auton (punaisen ja sinisen) sijoittamisen kilparadalle. Sininen auto ilmestyy satunnaisesti mistä tahansa suunnasta, ja pelaajaa edustava punainen ajoneuvo yrittää välttää törmäyksen. Peli päättyy, kun molempien autojen välillä on yhteys.
Vaikka tämä on yksinkertainen kuvaus siitä, mitä rakennat tässä, opit JavaScriptin edistyksellistä logiikkaa DOM-manipulaatiota ja -muotoilua varten. Saat myös käsityksen JavaScript-operaattoreista, kun luot pelaajien palkintoja ja rangaistuksia.
Kun lisäät kappaleeseen toimintoja, joitain käsitteitä, joita opit, ovat JavaScript-tapahtumat, ehdot, anonyymit funktiot, JavaScript-animaatio, intervallin ohjaus ja paljon muuta.
7. Mario-peli JavaScriptillä
Tämä JavaScript Mario -pelin opetusohjelma on kaikki mitä tarvitset upottaaksesi pääsi JavaScriptin jyrkkyyteen. Vaikka Mario-pelin tekeminen JavaScriptillä kuulostaa monimutkaiselta, opettajasi Chris osoittaa, että se on enemmän kuin mahdollista tässä YouTube-videossa. Joten saatat haluta pitää hauskaa ja tutkia kriittistä ajattelukykyäsi rakentamalla mukana.
Vaikka aloittelijat saattavat pitää opetusohjelmaa hieman edistyneenä, se on loistava pyrkimys kertaustyöntekijöille viedä JavaScript-taitonsa uudelle tasolle.
Sen lisäksi, että opit elementtien manipuloinnista, käytät puhtaan JavaScriptin voimaa luodessasi reagoivan kanvas-pohjalevyn pelin käyttöliittymään käyttämällä olio-ohjelmointi (OOP). Koska soitin on aktiivisesti liikkuva, JavaScript-näppäimistön hallinta, tapahtumien käsittely, silmukat, operaattorit, ehdot sekä sisäänrakennetut ja mukautetut toiminnot ovat projektien välisiä kokemuksia saada.
8. Rakenna miinanraivaaja JavaScriptillä
Haluatko tutkia rekursiivisten funktioiden voimaa ja array menetelmät kerrotaanko DOM-elementtejä JavaScriptillä? Haluat ehkä aloittaa tästä JavaScript-miinanraivausoppaasta, jonka on kirjoittanut Ania Kubów Traversy Mediassa.
Se vaatii paljon huomiota yksityiskohtiin. Mutta se on aloittelijaystävällinen opetusohjelma ja yksi parhaista kietoa kätesi ruudukon asettelujärjestelmän ympärille JavaScriptin avulla. Lopullisena tavoitteena on luoda ruudukkomalli, jossa pelaajat välttävät astumasta miinalle.
Niin yksinkertaiselta kuin se kuulostaakin, kirjoitat paljon ohjelmointilogiikkaa, joka sisältää useimmat JavaScript-ydintekniikat ohjataksesi pelin toimintoja kulissien taakse.
9. Pokemon JavaScript-pelin opetusohjelma HTML-kankaalla
Pokemon on yksi monimutkaisimmista peliprojekteista, joita voit rakentaa JavaScriptin avulla. Kuitenkin, jos sinulla on edessäsi pitkiä tiukkoja koodaustunteja JavaScriptin kanssa ja olet valmis uudistumaan entistä varmemmin, sinun on parempi hypätä tähän opetusohjelmaan.
DOM-skriptien ja JavaScript-animaatioiden lisäksi videossa opetetaan siirtämään ja renderöimään resursseja, kuten ääntä ja kuvia, JavaScriptin avulla. Opetusohjelma paljastaa JavaScriptistä paljon, mikä on arvokasta kaikissa tosielämän koodausongelmissa.
Muiden keskeisten JavaScript-manipulaatiotekniikoiden lisäksi opetusohjelma käyttää myös OOPs-konsepteja voimakkaasti; Tämä on arvokasta, jos aiot myöhemmin perehtyä TypeScriptiin. Yksi tämän opetusohjelman yksinkertaistavista tekijöistä on se, kuinka ohjaaja hahmottelee tehtävät.
On helppo perääntyä, kun kuvittelet monimutkaisen järjestelmän, jonka luot saadaksesi tämän toimimaan. Mutta mieti mitä voit voittaa lopulta.
Opi JavaScriptin ongelmanratkaisusovelluksia
Pelit käyttävät ohjelmoinnissa kaikkein herkimmistä ja intuitiivisimmista logiikasta. Joten kannattaa oppia JavaScript sellaisen tekemisestä. Vaikka nämä opetusohjelmat ovat pelipohjaisia, ne paljastavat sinut JavaScript-ydinkonsepteihin, joita voidaan soveltaa moniin muihin koodausongelmiin, mukaan lukien verkkokehitys ja mobiilisovellusten luominen. Vaikka aiot myöhemmin siirtyä kehyksiin, käytät näitä käsitteitä siitä huolimatta.
