Skärpa dina JavaScript-färdigheter med dessa 9 roliga spelprojekthandledningsvideor

Det faktum att 98,4 % av alla webbplatser använder JavaScript är därför du bör känna till det som utvecklare. I efterhand, att skapa ett spel med JavaScript hjälper dig inte bara att lära dig snabbt. Det låter dig också bemästra hur du tillämpar dess enkla på komplexa koncept i olika situationer på jobbet – oavsett om du är nybörjare eller en repetitionsvana.

Om du lär dig bättre med visuella demonstrationer är dessa JavaScript-baserade speltutorials på YouTube värda din tid.

1. Kortspel med JavaScript

Detta JavaScript-kortspel med Gavin Lon visar dig vägen runt att vända kort med över 600 rader JavaScript-kod. Medan huvudfokus är att lära ut JavaScript, kommer du också att lära dig att kombinera designkraften hos CSS med HTMLs DOM-strukturering för att uppnå lyhördhet med JavaScript.

Projektets slutmål är att vända ett par kort, och spelaren gissar ess när korten äntligen byter plats. Varje kort är en bild av fyra olika kortroller. Så även om du inte kommer att designa korten själv, kommer du att lära dig att manipulera deras positioner på ett responsivt sätt, öka spelomgångar, lägga till eller ta bort poäng när nivåerna ändras och lagra spelresultat i

webbläsarens lokala lagring— alla använder JavaScript.

Handledningen är stegvis och lätt att följa trots de tunga lyft du kommer att göra bakom scenen. Den är perfekt för nybörjare och repetitioner. Även om det här handlar om att bygga ett kortspel, exponerar det dig för de flesta av JavaScripts ledningstekniker i verkliga situationer. Dessutom avslöjar det din förmåga att tänka igenom.

2. 2D Breakout-spel med JavaScript

​​​

Om du vill lära dig att kontrollera åtgärdsintervaller och flytta DOM-element dynamiskt med JavaScript, visar Ania Kubów hur roligt det blir med denna självstudie för breakout-spel med JavaScript. Som ett plus visar videon också hur du kan vara värd för och visa upp ditt projekt för potentiella arbetsgivare.

Tänk på alla möjligheter i ett breakout-spel; en rörlig plattform med en boll som träffar väggar tangentiellt för att bryta tegelstenar ovanför den. Och du kommer att koda belöningssystemet i denna också. Sammantaget är den här självstudien för breakout-spel värd att överväga om du vill bygga något från grunden utan att använda tredjepartsagenter eller hämtade bilder.

Medan din logik kopplas in i funktioner, lär videon mer om JavaScript-klass- och objektkoncept i enkla steg, inklusive bästa praxis för villkorligt uttalande som växellådan.

3. JavaScript Snake Game

Avslöja din Nokia 3310's Snake II-spelnostalgi genom att bygga detta JavaScript-ormspel med Kyle. Du har antagligen spelat det här förut och kommer förmodligen att spela det många fler gånger under en livstid eftersom du kommer att koda en med vanilla JavaScript.

Medan du lär dig att koppla ihop DOM dynamiskt, visar den här videon hur du kan bygga och använda anpassade moduler i JavaScript. Så det öppnar en möjlighet för dig att lära dig hur du kan separera bekymmer med hjälp av principen om inte upprepa dig själv (DRY).

Bakom kulisserna kommer du att bemästra mer avancerade JavaScript-koncept. Uppgifter, inklusive att skapa ett spelarrutnät, matplacering, bygga en ormkropp, förlänga ormen, koda navigeringslogik, skapa ett belönings- och straffschema och kontrollera ormens hastighet, kommer att exponera dig för kärnan JavaScript.

4. Tic Tac Toe-spel med JavaScript

​​​​​

Kanske blir ditt Tic Tac Toe-spel skärpt när du bygger ett med JavaScript i en annan video med Kyle. Detta är en enkel men värdefull projekt för JavaScript-nybörjare att mumsa på när du löser komplexa problem.

Videon slutar inte enbart med JavaScript. Den visar också hur du greppar ditt användargränssnittsdesign med CSS. Med konsekvens och engagemang kan du lära dig nästan alla tekniker som behövs för att starta din webbutvecklingsresa i den här videon.

Medan man manipulerar DOM med JavaScript, omsluter videon det tunga lyftet kring kodning av vinst- och dragningsbeslut, beslutande av spelarnas tur och objektjustering. JavaScript-funktioner, loopar och villkor är några av de avancerade koncepten som du kommer att lära dig i den här instruktionsvideon för Tic tac Toe JavaScript.

5. Bildpusselspel med JavaScript

Pussel kan vara tankeuppdrag. Men att bygga en med vanilj JavaScript låter som ett roligt sätt att utforska din kreativitet och lära dig grundläggande till komplexa JavaScript-koncept.

Du vill koda med i den här handledningen - om du vill se hur du använder JavaScript-koncept, inklusive villkorade växlar och dynamisk DOM-positionsmanipulation med anpassade och inbyggda funktioner.

Även om handledaren placerar JavaScript i en skripttagg i HTML-filen, kan du snurra ditt skript i en dedikerad JavaScript-fil och länka den till DOM i ditt fall för tydlighetens skull. Oavsett vilket är det bäst att fokusera på kärnlogiken och tankeprocessen för att uppnå ditt mål, inklusive hur du tillämpar det du lär dig här i mer verkliga scenarier.

6. Bilracingspel med JavaScript

Att bygga ett bilracingspel med vanilj JavaScript kanske inte ger den bästa grafiska produktionen. Men att koppla ihop ett fungerande bilracingspel medan du följer den här handledningen kommer att lära dig att utnyttja JavaScripts funktionalitetsgivande kraft i alla applikationer.

Denna handledning involverar att placera två bilar (en röd och en blå) på en racerbana. Den blå bilen dyker upp slumpmässigt från valfritt håll, och det röda fordonet, som representerar spelaren, försöker undvika en kollision. Spelet slutar när det finns kontakt mellan båda bilarna.

Även om det är en enkel beskrivning av vad du kommer att bygga i den här, kommer du att lära dig lite avancerad JavaScript-logik för DOM-manipulation och styling. Du får också insikter i JavaScript-operatörer samtidigt som du skapar spelarbelöningar och straff.

Medan du lägger till funktioner till spåret kan du lära dig några begrepp som JavaScript-händelser, villkor, anonyma funktioner, JavaScript-animering, intervallkontroll och många fler.

7. Mario-spel med JavaScript

Den här JavaScript Mario-spelhandledningen är allt du behöver för att doppa huvudet i JavaScripts nitty-gritty. Samtidigt som att göra ett Mario-spel med JavaScript låter komplext, visar Chris, din handledare, att det är mer än möjligt i den här YouTube-videon. Så du kanske vill fånga det roliga och utforska din förmåga att tänka kritiskt genom att bygga vidare.

Även om nybörjare kanske tycker att handledningen är lite avancerad, är det en lysande strävan efter uppdateringar för att ta sina JavaScript-kunskaper till nästa nivå.

Förutom att lära dig om elementmanipulationer, kommer du att använda kraften i rent JavaScript för att bygga en responsiv canvas-platta för spelgränssnittet med objektorienterad programmering (OOP). Eftersom spelaren är aktivt rörlig kan tillämpningen av JavaScript-tangentbordskontroll, händelsehantering, loopar, operatörer, villkor och inbyggda och anpassade funktioner är bland de projektöverskridande upplevelserna du kommer att få få.

8. Bygg minröjare med JavaScript

Vill utforska kraften i rekursiva funktioner och array-metoder i att multiplicera DOM-element med JavaScript? Du kanske vill börja med denna JavaScript Minesweeper-handledning av Ania Kubów på Traversy Media.

Det innebär mycket uppmärksamhet på detaljer. Men det är en nybörjarvänlig handledning och en av de bästa att linda händerna runt rutnätslayoutsystemet med hjälp av JavaScript. Det slutliga målet är att skapa en rutmall där spelare undviker att trampa på en gruva.

Hur enkelt det än låter, du kommer att skriva en hel del programmeringslogik som involverar de flesta JavaScript-kärntekniker för att koppla spelets funktionalitet bakom scenen.

9. Pokemon JavaScript-spelhandledning med HTML Canvas

Pokémon är ett av de mest komplexa spelprojekt du kan bygga med JavaScript. Men om du är inne på långa rigorösa kodningstimmar med JavaScript och är redo att komma ut förnyad med mer självförtroende, bör du hoppa in i den här handledningen.

Förutom DOM-skript och animering med JavaScript, lär videon dig hur du flyttar och renderar tillgångar, inklusive ljud och bilder, med hjälp av JavaScript. Det finns mycket som handledningen avslöjar om JavaScript som du kommer att finna värdefullt i alla verkliga kodningsproblem.

Utöver andra grundläggande JavaScript-manipuleringstekniker använder handledningen också OOPs-koncepten kraftigt; detta är värdefullt om du planerar att senare fördjupa dig i TypeScript. En av de förenklade faktorerna i denna handledning är hur handledaren beskriver uppgifterna.

Det är lätt att backa när du föreställer dig det komplexa systemet du kommer att skapa för att få det här att fungera. Men tänk på vad du kan vinna i slutändan.

Lär dig JavaScripts problemlösningsapplikationer

Spel använder några av de mest lyhörda och intuitiva logiken i programmering. Så det är värt besväret att lära sig JavaScript från att göra en. Även om dessa handledningar är spelbaserade, exponerar de dig för JavaScript-kärnkoncepten som är tillämpliga på många andra kodningsproblem, inklusive webbutveckling och skapande av mobilappar. Även om du planerar att senare vända dig till ramverk, kommer du att tillämpa dessa begrepp oavsett.