Skjerp JavaScript-ferdighetene dine med disse 9 morsomme spillprosjektveiledningsvideoene

Det faktum at 98,4 % av alle nettsteder bruker JavaScript er grunnen til at du bør kjenne det som utvikler. I ettertid hjelper det å lage et spill med JavaScript ikke bare at du lærer raskt. Den lar deg også mestre hvordan du kan bruke dets enkle på komplekse konsepter i forskjellige situasjoner på jobben – enten du er nybegynner eller nybegynner.

Hvis du lærer bedre med visuelle demonstrasjoner, er disse JavaScript-baserte spillopplæringene på YouTube verdt tiden din.

1. Kortspill med JavaScript

Dette JavaScript-kortspillet med Gavin Lon viser deg veien rundt å snu kort med over 600 linjer med JavaScript-kode. Mens hovedfokuset er å lære JavaScript, vil du også lære å kombinere designkraften til CSS med HTMLs DOM-strukturering for å oppnå respons med JavaScript.

Prosjektets sluttmål er å snu et par kort, og spilleren gjetter esset når kortene endelig bytter plass. Hvert kort er et bilde av fire forskjellige kortroller. Så selv om du ikke vil designe kortene selv, vil du lære å manipulere posisjonene deres responsivt, øke spillrunder, legge til eller fjerne poeng etter hvert som nivåene endres, og lagre spillpoeng i

nettleserens lokale lagring– alt bruker JavaScript.

Opplæringen er trinnvis og enkel å følge til tross for de tunge løftene du skal gjøre bak scenen. Den er perfekt for nybegynnere og forfriskere. Selv om dette handler om å bygge et kortspill, utsetter det deg for de fleste av JavaScripts ledningsteknikker i virkelige situasjoner. I tillegg avdekker den gjennomtenkningsevnen din.

2. 2D Breakout-spill med JavaScript

​​​

Hvis du vil lære å kontrollere handlingsintervaller og flytte DOM-elementer dynamisk ved hjelp av JavaScript, viser Ania Kubów hvor morsomt det blir med denne veiledningen for breakout-spill med JavaScript. Som et pluss viser videoen også hvordan du kan være vert for og vise frem prosjektet ditt for potensielle arbeidsgivere.

Tenk på alle muligheter i et breakout-spill; en bevegelig plattform med en ball som treffer vegger tangentielt for å bryte murstein over den. Og du vil kode belønningssystemet i denne også. Totalt sett er denne veiledningen for breakout-spill verdt å vurdere hvis du vil bygge noe fra grunnen av uten å bruke tredjepartsagenter eller hentede bilder.

Mens du kobler logikken din til funksjoner, lærer videoen mer om JavaScript-klasse- og objektkonsepter i enkle trinn, inkludert beste praksis for betinget uttalelse som bryterhuset.

3. JavaScript Snake Game

Løs opp Nokia 3310s Snake II-spillnostalgi ved å bygge dette JavaScript-slangespillet med Kyle. Du har sannsynligvis spilt dette før og kommer sannsynligvis til å spille det mange flere ganger i løpet av livet siden du vil kode en med vanilla JavaScript.

Mens du lærer deg å koble DOM sammen dynamisk, viser denne videoen hvordan du kan bygge og bruke tilpassede moduler i JavaScript. Så det åpner en mulighet for deg å lære om å skille bekymringer ved å bruke ikke gjenta deg selv (TØRR)-prinsippet.

Bak kulissene vil du mestre mer avanserte JavaScript-konsepter. Oppgaver, inkludert å lage et spillernett, plassere mat, bygge slangekroppen, forlenge slangen, kode navigasjonslogikk, opprettelse av en belønnings- og straffeordning, og kontroll av slangehastigheten, vil utsette deg for kjernen JavaScript.

4. Tic Tac Toe-spill med JavaScript

​​​​​

Kanskje Tic Tac Toe-spillet ditt blir skjerpet når du bygger en med JavaScript i en annen video med Kyle. Dette er en enkel, men verdifull prosjekt for JavaScript nybegynnere å knaske på mens du skal løse komplekse problemer.

Videoen slutter ikke kun med JavaScript. Den viser også hvordan du kan gripe brukergrensesnittdesignet ditt ved hjelp av CSS. Med konsistens og engasjement kan du lære nesten alle teknikker som trengs for å starte din webutviklingsreise i denne videoen.

Mens du manipulerer DOM-en med JavaScript, omslutter videoen det tunge løftet rundt koding av vinn- og remisavgjørelser, avgjørelse av spillernes svinger og objektjustering. JavaScript-funksjoner, looper og betingelser er noen av de avanserte konseptene du lærer i denne JavaScript Tic tac Toe-veiledningsvideoen.

5. Slide Puslespill med JavaScript

Gåter kan være tankevekkende. Men å bygge en med vanilje JavaScript høres ut som en morsom måte å utforske kreativiteten din og lære grunnleggende til komplekse JavaScript-konsepter.

Du vil kode med i denne opplæringen - hvis du liker å se hvordan du bruker JavaScript-konsepter, inkludert betingede brytere og dynamisk DOM-posisjonsmanipulasjon ved å bruke tilpassede og innebygde funksjoner.

Selv om veilederen plasserer JavaScript i en skript-tag i HTML-filen, kan du spinne skriptet i en dedikert JavaScript-fil og koble den til DOM i ditt tilfelle for klarhet. Uansett er det best å fokusere på kjernelogikken og tankeprosessen for å nå målet ditt, inkludert hvordan du kan bruke det du lærer her til mer virkelige scenarier.

6. Bilracerspill med JavaScript

Å bygge et bilracerspill med vanilje-JavaScript gir kanskje ikke det beste grafiske resultatet. Men å koble til et fungerende bilracerspill mens du følger denne veiledningen vil lære deg å utnytte JavaScripts funksjonalitetsgivende kraft i alle applikasjoner.

Denne opplæringen innebærer å plassere to biler (en rød og en blå) på en racerbane. Den blå bilen dukker opp tilfeldig fra alle retninger, og det røde kjøretøyet, som representerer spilleren, prøver å unngå en kollisjon. Spillet avsluttes når det er kontakt mellom begge bilene.

Selv om det er en enkel beskrivelse av hva du skal bygge i denne, vil du lære litt avansert JavaScript-logikk for DOM-manipulering og styling. Du vil også få innsikt i JavaScript-operatører mens du lager spillerbelønninger og straffer.

Mens du legger til funksjoner til sporet, inkluderer noen konsepter du lærer JavaScript-hendelser, betingelser, anonyme funksjoner, JavaScript-animasjon, intervallkontroll og mange flere.

7. Mario-spill med JavaScript

Denne JavaScript Mario-spillopplæringen er alt du trenger for å dyppe hodet inn i JavaScripts finurlige. Mens det å lage et Mario-spill med JavaScript høres komplisert ut, viser Chris, læreren din, at det er mer enn mulig i denne YouTube-videoen. Så det kan være lurt å fange moroa og utforske evnen til å tenke kritisk ved å bygge videre.

Selv om nybegynnere kanskje synes opplæringen er litt avansert, er det en strålende søken etter oppfriskninger for å ta JavaScript-ferdighetene sine til neste nivå.

I tillegg til å lære om elementmanipulasjoner, vil du bruke kraften til ren JavaScript til å bygge en responsiv lerretsplate for spillgrensesnittet ved å bruke Objektorientert programmering (OOP). Siden spilleren er aktivt bevegelig, kan bruken av JavaScript-tastaturkontroll, hendelseshåndtering, loops, operatører, betingelser og innebygde og tilpassede funksjoner er blant opplevelsene på tvers av prosjekter gevinst.

8. Bygg minesveiper med JavaScript

Ønsker å utforske kraften i rekursive funksjoner og array metoder i å multiplisere DOM-elementer med JavaScript? Det kan være lurt å starte med denne JavaScript Minesweeper-opplæringen av Ania Kubów på Traversy Media.

Det innebærer mye oppmerksomhet på detaljer. Men det er en nybegynnervennlig opplæring og en av de beste til å vikle hendene rundt rutenettoppsettet ved hjelp av JavaScript. Det endelige målet er å lage en rutenettmal der spillere unngår å tråkke på en gruve.

Så enkelt som det høres ut, vil du skrive mye programmeringslogikk som involverer de fleste JavaScript-kjerneteknikker for å koble spillets funksjonalitet bak scenen.

9. Pokemon JavaScript-spillopplæring med HTML Canvas

Pokémon er et av de mest komplekse spillprosjektene du kan bygge med JavaScript. Men hvis du er inne på lange strenge programmeringstimer med JavaScript og er klar til å komme ut fornyet med mer selvtillit, bør du hoppe inn i denne opplæringen.

I tillegg til DOM-skripting og animasjon med JavaScript, lærer videoen deg hvordan du flytter og gjengir eiendeler, inkludert lyd og bilder, ved hjelp av JavaScript. Det er mye som veiledningen avslører om JavaScript som du vil finne verdifullt i alle virkelige kodingsproblemer.

I tillegg til andre kjerne JavaScript-manipulasjonsteknikker, bruker opplæringen også OOPs-konseptene i stor grad; dette er verdifullt hvis du planlegger å fordype deg i TypeScript senere. En av de forenklende faktorene i denne opplæringen er hvordan veilederen skisserer oppgavene.

Det er lett å gå tilbake når du forestiller deg det komplekse systemet du vil lage for å få dette til å fungere. Men tenk på hva du vil oppnå til slutt.

Lær JavaScripts problemløsningsapplikasjoner

Spill bruker noen av de mest responsive og intuitive logikkene innen programmering. Så det er verdt å lære JavaScript fra å lage en. Selv om disse veiledningene er spillbaserte, utsetter de deg for JavaScript-kjernekonseptene som gjelder for mange andre kodingsproblemer, inkludert nettutvikling og oppretting av mobilapper. Selv om du senere planlegger å gå til rammeverk, vil du bruke disse konseptene uansett.