Ved at bygge disse sjove spilprojekter kan du gøre programmering mindre kedeligt og samtidig finpudse dine færdigheder.
Det faktum, at 98,4 % af alle hjemmesider bruger JavaScript, er grunden til, at du bør kende det som udvikler. Set i bakspejlet hjælper det dig ikke kun med at lære hurtigt at lave et spil med JavaScript. Det lader dig også mestre, hvordan du anvender dets enkle på komplekse koncepter i forskellige situationer på jobbet – uanset om du er nybegynder eller genopfrisker.
Hvis du lærer bedre med visuelle demonstrationer, er disse JavaScript-baserede spiltutorials på YouTube værd at bruge tid på.
1. Kortspil med JavaScript
Dette JavaScript-kortspil med Gavin Lon viser dig vejen omkring at vende kort med over 600 linjer JavaScript-kode. Mens hovedfokus er at undervise i JavaScript, vil du også lære at kombinere designkraften i CSS med HTMLs DOM-strukturering for at opnå responsivitet med JavaScript.
Projektets slutmål er at vende et par kort, og spilleren gætter esset, når kortene endelig skifter plads. Hvert kort er et billede af fire forskellige kortroller. Så selvom du ikke selv designer kortene, vil du lære at manipulere deres positioner responsivt, øge spilrunder, tilføje eller fjerne scoringer, efterhånden som niveauerne ændres, og gemme spilresultater i
browserens lokale lager- alt ved hjælp af JavaScript.Selvstudiet er trinvist og let at følge på trods af de tunge løft, du skal udføre bag scenen. Det er perfekt til begyndere og genopfriskende. Selvom dette handler om at bygge et kortspil, udsætter det dig for de fleste af JavaScripts ledningsteknikker i virkelige situationer. Plus, det optrævler din evne til at tænke igennem.
2. 2D Breakout-spil med JavaScript
Hvis du vil lære at styre handlingsintervaller og flytte DOM-elementer dynamisk ved hjælp af JavaScript, viser Ania Kubów, hvor sjovt det bliver med denne breakout-spiltutorial, der bruger JavaScript. Som et plus viser videoen også, hvordan du hoster og fremviser dit projekt for potentielle arbejdsgivere.
Tænk på alle muligheder i et breakout-spil; en bevægelig platform med en bold, der rammer vægge tangentielt for at bryde mursten over den. Og du vil også kode belønningssystemet i denne. Samlet set er denne breakout-spiltutorial værd at overveje, hvis du vil bygge noget fra bunden uden at bruge tredjepartsagenter eller hentede billeder.
Mens du forbinder din logik i funktioner, lærer videoen mere om JavaScript-klasse- og objektkoncepter i nemme trin, bl.a. betinget erklæring om bedste praksis ligesom afbryderkassen.
3. JavaScript Snake Spil
Optrævl din Nokia 3310's Snake II-spilnostalgi ved at bygge dette JavaScript-slangespil med Kyle. Du har sikkert spillet dette før og vil sandsynligvis spille det mange flere gange i løbet af livet, da du vil kode en ved hjælp af vanilla JavaScript.
Mens du lærer dig at koble DOM sammen dynamisk, demonstrerer denne video, hvordan du kan bygge og bruge tilpassede moduler i JavaScript. Så det åbner en mulighed for dig at lære om at adskille bekymringer ved at bruge princippet om ikke gentag dig selv (TØR).
Bag kulisserne vil du mestre mere avancerede JavaScript-koncepter. Opgaver, herunder oprettelse af et spillergitter, madplacering, opbygning af slangens krop, forlængelse af slangen, kodning af navigationslogik, oprettelse af en belønnings- og strafordning og kontrol af slangens hastighed, vil udsætte dig for kerne JavaScript.
4. Tic Tac Toe spil med JavaScript
Måske bliver dit Tic Tac Toe-gameplay skærpet, når du bygger et med JavaScript i en anden video med Kyle. Dette er en enkel, men værdifuld projekt for JavaScript-begyndere at gumle på, mens du løser komplekse problemer.
Videoen slutter ikke kun med JavaScript. Det viser også, hvordan du griber dit brugergrænsefladedesign ved hjælp af CSS. Med konsekvens og engagement kan du lære næsten alle teknikker, der er nødvendige for at starte din webudviklingsrejse i denne video.
Mens du manipulerer DOM'et med JavaScript, omslutter videoen det tunge løft omkring kodning af sejr- og remisafgørelser, beslutning om spillernes tur og objektjustering. JavaScript-funktioner, loops og betingelser er nogle af de avancerede koncepter, du lærer i denne JavaScript Tic tac Toe-tutorial-video.
5. Slide Puslespil med JavaScript
Gåder kan være tankevækkende. Men at bygge en med vanilje JavaScript lyder som en sjov måde at udforske din kreativitet og lære grundlæggende til komplekse JavaScript-koncepter.
Du ønsker at kode med i denne tutorial - hvis du kan lide at se, hvordan du bruger JavaScript-koncepter, herunder betingede kontakter og dynamisk DOM-positionsmanipulation ved hjælp af brugerdefinerede og indbyggede funktioner.
Selvom vejlederen placerer JavaScript'et inde i et script-tag i HTML-filen, kan du spinde dit script i en dedikeret JavaScript-fil og linke det til DOM'et i dit tilfælde for klarhed. Uanset hvad er det bedst at fokusere på kernelogikken og tankeprocessen for at nå dit mål, herunder hvordan du anvender det, du lærer her, til mere virkelige scenarier.
6. Bilvæddeløbsspil med JavaScript
At bygge et bilvæddeløbsspil ved hjælp af vanilla JavaScript giver måske ikke det bedste grafiske output. Men at forbinde et fungerende bilracerspil, mens du følger denne vejledning, vil lære dig at udnytte JavaScripts funktionalitetsindbyggende kraft i enhver applikation.
Denne vejledning involverer at placere to biler (en rød og en blå) på en racerbane. Den blå bil dukker op tilfældigt fra enhver retning, og det røde køretøj, der repræsenterer spilleren, forsøger at undgå en kollision. Spillet slutter, når der er kontakt mellem begge biler.
Selvom det er en simpel beskrivelse af, hvad du vil bygge i denne, vil du lære noget avanceret JavaScript-logik til DOM-manipulation og styling. Du får også indsigt i JavaScript-operatører, mens du opretter spillerbelønninger og straffe.
Mens du tilføjer funktioner til sporet, omfatter nogle begreber, du lærer, JavaScript-begivenheder, betingelser, anonyme funktioner, JavaScript-animation, intervalkontrol og mange flere.
7. Mario spil med JavaScript
Dette JavaScript Mario-spiltutorial er alt, hvad du behøver for at dyppe dit hoved i JavaScripts finurlige. Mens det at lave et Mario-spil med JavaScript lyder komplekst, viser Chris, din underviser, at det er mere end muligt i denne YouTube-video. Så du vil måske fange det sjove og udforske din evne til at tænke kritisk ved at bygge videre.
Selvom begyndere måske synes, at selvstudiet er lidt avanceret, er det en genial søgen efter genopfriskninger for at tage deres JavaScript-færdigheder til næste niveau.
Udover at lære om elementmanipulationer, vil du bruge kraften i ren JavaScript til at bygge en responsiv lærreds-boilerplate til spilgrænsefladen ved hjælp af objektorienteret programmering (ØP). Da afspilleren er aktivt bevægelig, kan anvendelsen af JavaScript-tastaturkontrol, hændelseshåndtering, loops, operatører, betingelser og indbyggede og tilpassede funktioner er blandt de tværprojektoplevelser, du får gevinst.
8. Byg minestryger med JavaScript
Vil du udforske kraften i rekursive funktioner og array metoder i at multiplicere DOM-elementer med JavaScript? Du vil måske starte med denne JavaScript-minestryger-tutorial af Ania Kubów på Traversy Media.
Det indebærer meget opmærksomhed på detaljer. Men det er en begyndervenlig tutorial og en af de bedste til at vikle dine hænder rundt om gitterlayoutsystemet ved hjælp af JavaScript. Det ultimative mål er at skabe en gitter-skabelon, hvor spillere undgår at træde på en mine.
Så simpelt det end lyder, vil du skrive en masse programmeringslogik, der involverer de fleste JavaScript-kerneteknikker for at forbinde spillets funktionalitet bag scenen.
9. Pokemon JavaScript-spiltutorial med HTML-lærred
Pokemon er et af de mest komplekse spilprojekter, du kan bygge ved hjælp af JavaScript. Men hvis du er ude efter lange strenge kodningstimer med JavaScript og er klar til at komme ud fornyet med mere selvtillid, må du hellere hoppe ind i denne tutorial.
Ud over DOM-scripting og animation med JavaScript, lærer videoen dig, hvordan du flytter og gengiver aktiver, inklusive lyd og billeder, ved hjælp af JavaScript. Der er meget, som selvstudiet afslører om JavaScript, som du vil finde værdifuldt i alle virkelige kodningsproblemer.
Ud over andre centrale JavaScript-manipulationsteknikker, bruger selvstudiet også OOPs-koncepterne i høj grad; dette er værdifuldt, hvis du senere planlægger at dykke ned i TypeScript. En af de forenklende faktorer i denne tutorial er, hvordan vejlederen skitserer opgaverne.
Det er nemt at bakke ud, når du forestiller dig det komplekse system, du vil oprette for at få dette til at fungere. Men tænk over, hvad du vil vinde i sidste ende.
Lær JavaScripts problemløsningsapplikationer
Spil bruger nogle af de mest responsive og intuitive logikker i programmering. Så det er umagen værd at lære JavaScript ved at lave en. Selvom disse tutorials er spilbaserede, udsætter de dig for JavaScript-kernekoncepterne, der gælder for mange andre kodningsproblemer, herunder webudvikling og oprettelse af mobilapps. Selvom du senere planlægger at vende dig til rammer, vil du anvende disse begreber uanset.
