Scherp uw JavaScript-vaardigheden aan met deze 9 instructievideo's voor leuke gameprojecten

Het feit dat 98,4% van alle websites JavaScript gebruiken, is waarom je het als ontwikkelaar zou moeten weten. Achteraf gezien helpt het maken van een game met JavaScript je niet alleen om snel te leren. U leert ook hoe u de eenvoudige tot complexe concepten kunt toepassen in verschillende praktijksituaties, of u nu een beginner of een opfrisser bent.

Als je beter leert met visuele demonstraties, zijn deze op JavaScript gebaseerde speltutorials op YouTube de moeite waard.

1. Kaartspel met JavaScript

Dit JavaScript-kaartspel met Gavin Lon toont je de weg bij het omdraaien van kaarten met meer dan 600 regels JavaScript-code. Hoewel de belangrijkste focus ligt op het aanleren van JavaScript, leer je ook de ontwerpkracht van CSS te combineren met de DOM-structurering van HTML om responsiviteit met JavaScript te bereiken.

Het einddoel van het project is om een ​​paar kaarten om te draaien en de speler raadt de aas wanneer de kaarten uiteindelijk van plaats wisselen. Elke kaart is een afbeelding van vier verschillende kaartrollen. Dus terwijl je de kaarten niet zelf ontwerpt, leer je hun posities responsief te manipuleren, spelrondes te verhogen, scores toe te voegen of te verwijderen naarmate de niveaus veranderen, en spelscores op te slaan in de

lokale opslag van de browser- allemaal met JavaScript.

De tutorial is stapsgewijs en gemakkelijk te volgen, ondanks het zware werk dat je achter de schermen doet. Het is perfect voor beginners en opfrissers. Hoewel dit gaat over het bouwen van een kaartspel, stelt het je bloot aan de meeste bedradingstechnieken van JavaScript in echte situaties. Bovendien ontrafelt het je denkvermogen.

2. 2D Breakout-spel met JavaScript

​​​

Als je actie-intervallen wilt leren beheersen en DOM-elementen dynamisch wilt verplaatsen met behulp van JavaScript, laat Ania Kubów zien hoe leuk het wordt met deze ontsnappingsgame-tutorial met JavaScript. Als pluspunt laat de video ook zien hoe u uw project kunt hosten en presenteren aan potentiële werkgevers.

Denk na over elke mogelijkheid in een ontsnappingsspel; een bewegend platform met een bal die tangentieel muren raakt om stenen erboven te breken. En je codeert ook het beloningssysteem in deze. Over het algemeen is deze ontsnappingsgame-tutorial het overwegen waard als je iets vanaf de grond af wilt bouwen zonder gebruik te maken van externe agenten of afkomstige afbeeldingen.

Terwijl u uw logica binnen functies bedraadt, leert de video u in eenvoudige stappen meer over JavaScript-klasse- en objectconcepten, inclusief best practices voor voorwaardelijke verklaringen zoals de schakelkast.

3. JavaScript Snake-spel

Ontrafel de nostalgie van de Snake II-game van je Nokia 3310 door dit JavaScript-snake-spel met Kyle te bouwen. Je hebt dit waarschijnlijk al eerder gespeeld en zult het waarschijnlijk nog vele malen in je leven spelen, aangezien je er een codeert met vanilla JavaScript.

Terwijl je leert om de DOM dynamisch samen te voegen, laat deze video zien hoe je aangepaste modules in JavaScript kunt bouwen en gebruiken. Het opent dus een kans voor u om te leren over het scheiden van zorgen met behulp van het herhaal uzelf niet (DRY) -principe.

Achter de schermen leer je meer geavanceerde JavaScript-concepten kennen. Taken, waaronder het maken van een spelersraster, het plaatsen van voedsel, het bouwen van het slangenlichaam, het verlengen van de slang, het coderen van de navigatielogica, het creëren van een belonings- en strafschema en het beheersen van de slangsnelheid, zullen je blootstellen aan de kern javascript.

4. Boter-kaas-en-eieren-spel met JavaScript

​​​​​

Misschien wordt je Tic Tac Toe-gameplay aangescherpt terwijl je er een met JavaScript bouwt in een andere video met Kyle. Dit is een eenvoudige maar waardevolle project voor JavaScript-beginners om op te knabbelen terwijl je complexe problemen oplost.

De video eindigt niet alleen met JavaScript. Het laat ook zien hoe u het ontwerp van uw gebruikersinterface onder de knie kunt krijgen met behulp van CSS. Met consistentie en toewijding kun je in deze video bijna elke techniek leren die nodig is om aan je webontwikkelingstraject te beginnen.

Terwijl de DOM met JavaScript wordt gemanipuleerd, behandelt de video het zware werk rond het coderen van win- en draw-beslissingen, het beslissen over de beurten van spelers en het uitlijnen van objecten. JavaScript-functies, loops en voorwaarden zijn enkele van de geavanceerde concepten die u leert in deze JavaScript Tic tac Toe-zelfstudievideo.

5. Schuifpuzzelspel met JavaScript

Puzzels kunnen tot nadenken stemmen. Maar er een bouwen met vanille-JavaScript klinkt als een leuke manier om je creativiteit te verkennen en eenvoudige tot complexe JavaScript-concepten te leren.

U wilt coderen in deze zelfstudie - als u wilt zien hoe u JavaScript-concepten gebruikt, inclusief voorwaardelijke schakelaars en dynamische DOM-positiemanipulatie met behulp van aangepaste en ingebouwde functies.

Hoewel de tutor de JavaScript in een scripttag in het HTML-bestand plaatst, kun je je script in een speciaal JavaScript-bestand draaien en in jouw geval voor de duidelijkheid aan de DOM koppelen. Hoe dan ook, het is het beste om je te concentreren op de kernlogica en het denkproces om je doel te bereiken, inclusief hoe je wat je hier leert kunt toepassen op meer realistische scenario's.

6. Autoracespel met JavaScript

Het bouwen van een autorace-game met vanilla JavaScript levert misschien niet de beste grafische uitvoer op. Maar als je tijdens het volgen van deze tutorial een werkend autorace-spel bedient, leer je hoe je de functionaliteit van JavaScript in elke toepassing kunt benutten.

Deze tutorial omvat het plaatsen van twee auto's (een rode en een blauwe) op een racebaan. De blauwe auto verschijnt willekeurig vanuit elke richting en het rode voertuig, dat de speler vertegenwoordigt, probeert een botsing te voorkomen. Het spel eindigt zodra er contact is tussen beide auto's.

Hoewel dat een eenvoudige beschrijving is van wat je in deze gaat bouwen, leer je wat geavanceerde JavaScript-logica voor DOM-manipulatie en -styling. U krijgt ook inzicht in JavaScript-operators terwijl u beloningen en straffen voor spelers maakt.

Tijdens het toevoegen van functionaliteiten aan de track, leert u enkele concepten zoals JavaScript-gebeurtenissen, voorwaarden, anonieme functies, JavaScript-animatie, intervalcontrole en nog veel meer.

7. Mario-spel met JavaScript

Deze JavaScript Mario-speltutorial is alles wat je nodig hebt om je hoofd te verdiepen in de details van JavaScript. Hoewel het maken van een Mario-game met JavaScript ingewikkeld klinkt, laat Chris, je tutor, zien dat het meer dan mogelijk is in deze YouTube-video. Dus misschien wil je het plezier opvangen en je kritische denkvermogen verkennen door mee te bouwen.

Hoewel beginners de tutorial misschien een beetje geavanceerd vinden, is het een briljante zoektocht naar opfrissers om hun JavaScript-vaardigheden naar een hoger niveau te tillen.

Naast het leren over elementmanipulaties, gebruik je de kracht van pure JavaScript bij het bouwen van een responsive canvas standaard voor de game-interface met behulp van object georiënteerd programmeren (OOP). Aangezien de speler actief mobiel is, kan de toepassing van JavaScript-toetsenbordbesturing, gebeurtenisafhandeling, lussen, operators, voorwaarden en ingebouwde en aangepaste functies behoren tot de cross-projectervaringen die u zult tegenkomen verdienen.

8. Bouw mijnenveger met JavaScript

Wil je de kracht van recursieve functies verkennen en array methoden in het vermenigvuldigen van DOM-elementen met JavaScript? Misschien wil je beginnen met deze JavaScript Mijnenveger-tutorial van Ania Kubów op Traversy Media.

Het brengt veel aandacht voor detail met zich mee. Maar het is een beginnersvriendelijke tutorial en een van de beste om je handen rond het rasterlay-outsysteem te wikkelen met behulp van JavaScript. Het uiteindelijke doel is om een ​​rastersjabloon te maken waarbij spelers voorkomen dat ze op een mijn stappen.

Hoe simpel het ook klinkt, je zult veel programmeerlogica schrijven met de meeste JavaScript-kerntechnieken om de functionaliteit van het spel achter de schermen te bedraden.

9. Pokemon JavaScript-spelhandleiding met HTML-canvas

Pokemon is een van de meest complexe gameprojecten die je kunt bouwen met JavaScript. Als je echter lange, rigoureuze codeeruren met JavaScript wilt maken en er klaar voor bent om er met meer zelfvertrouwen uit te komen, kun je beter deze tutorial bekijken.

Naast DOM-scripting en animatie met JavaScript, leert de video u hoe u middelen, inclusief audio en afbeeldingen, kunt verplaatsen en renderen met behulp van JavaScript. Er is veel dat de tutorial onthult over JavaScript dat u waardevol zult vinden bij real-life coderingsproblemen.

Naast andere JavaScript-manipulatietechnieken, maakt de tutorial ook veel gebruik van de OOPs-concepten; dit is waardevol als u van plan bent om u later in TypeScript te verdiepen. Een van de vereenvoudigende factoren van deze tutorial is hoe de tutor de taken schetst.

Het is gemakkelijk om je terug te trekken als je je het complexe systeem voorstelt dat je gaat maken om dit te laten werken. Maar denk eens na over wat u uiteindelijk te winnen heeft.

Leer de probleemoplossende toepassingen van JavaScript

Games gebruiken enkele van de meest responsieve en intuïtieve logica bij het programmeren. Het is dus de moeite waard om JavaScript te leren door er een te maken. Hoewel deze tutorials op games zijn gebaseerd, laten ze je kennismaken met de JavaScript-kernconcepten die van toepassing zijn op veel andere coderingsproblemen, waaronder webontwikkeling en het maken van mobiele apps. Zelfs als je van plan bent om later naar frameworks te gaan, zul je deze concepten hoe dan ook toepassen.