Indem Sie diese unterhaltsamen Spielprojekte erstellen, können Sie das Programmieren weniger mühsam gestalten und gleichzeitig Ihre Fähigkeiten verbessern.
Die Tatsache, dass 98,4 % aller Websites JavaScript verwenden, ist der Grund, warum Sie es als Entwickler kennen sollten. Rückblickend hilft Ihnen das Erstellen eines Spiels mit JavaScript nicht nur dabei, schnell zu lernen. Außerdem lernen Sie, wie Sie die einfachen bis komplexen Konzepte in verschiedenen Situationen am Arbeitsplatz anwenden – egal, ob Sie Anfänger oder Wiedereinsteiger sind.
Wenn Sie mit visuellen Demonstrationen besser lernen, sind diese JavaScript-basierten Spiele-Tutorials auf YouTube Ihre Zeit wert.
1. Kartenspiel mit JavaScript
Dieses JavaScript-Kartenspiel mit Gavin Lon zeigt Ihnen mit über 600 Zeilen JavaScript-Code, wie man Karten umdreht. Während das Hauptaugenmerk darauf liegt, JavaScript zu lehren, lernen Sie auch, die Gestaltungskraft von CSS mit der DOM-Strukturierung von HTML zu kombinieren, um mit JavaScript eine Reaktionsfähigkeit zu erreichen.
Das Endziel des Projekts ist es, ein paar Karten umzudrehen, und der Spieler errät das Ass, wenn die Karten schließlich die Plätze wechseln. Jede Karte ist ein Bild von vier verschiedenen Kartenrollen. Während Sie also die Karten nicht selbst entwerfen, lernen Sie, ihre Positionen reaktionsschnell zu manipulieren, Spielrunden zu erhöhen, Punktzahlen hinzuzufügen oder zu entfernen, wenn sich die Level ändern, und Spielpunktzahlen im zu speichern lokalen Speicher des Browsers– alles mit JavaScript.
Das Tutorial ist schrittweise aufgebaut und einfach zu befolgen, trotz der schweren Arbeit, die Sie hinter den Kulissen leisten werden. Es ist perfekt für Anfänger und Auffrischer. Obwohl es hier um das Erstellen eines Kartenspiels geht, werden Sie in realen Situationen mit den meisten Verdrahtungstechniken von JavaScript konfrontiert. Außerdem entwirrt es Ihre Denkfähigkeit.
2. 2D-Breakout-Spiel mit JavaScript
Wenn Sie lernen möchten, Aktionsintervalle zu steuern und DOM-Elemente dynamisch mit JavaScript zu verschieben, zeigt Ania Kubów, wie viel Spaß es mit diesem Breakout-Spiel-Tutorial mit JavaScript macht. Als Plus zeigt das Video auch, wie Sie Ihr Projekt hosten und potenziellen Arbeitgebern präsentieren können.
Denken Sie über jede Möglichkeit in einem Breakout-Spiel nach; eine sich bewegende Plattform, auf der ein Ball tangential auf Wände trifft, um Ziegel darüber zu zerbrechen. Und Sie werden das Belohnungssystem auch in diesem codieren. Insgesamt ist dieses Breakout-Spiel-Tutorial eine Überlegung wert, wenn Sie etwas von Grund auf aufbauen möchten, ohne Agenten von Drittanbietern oder bezogene Bilder zu verwenden.
Während Sie Ihre Logik innerhalb von Funktionen verdrahten, lehrt das Video in einfachen Schritten mehr über JavaScript-Klassen- und Objektkonzepte, einschließlich Best Practices für bedingte Anweisungen wie das Schaltergehäuse.
3. JavaScript-Snake-Spiel
Enträtseln Sie die Snake II-Nostalgie Ihres Nokia 3310, indem Sie dieses JavaScript-Snake-Spiel mit Kyle erstellen. Sie haben das wahrscheinlich schon einmal gespielt und werden es wahrscheinlich noch viele Male im Leben spielen, da Sie eines mit Vanille-JavaScript codieren werden.
Während Sie lernen, das DOM dynamisch miteinander zu verbinden, zeigt dieses Video, wie Sie benutzerdefinierte Module in JavaScript erstellen und verwenden können. Es eröffnet Ihnen also die Möglichkeit, etwas über das Trennen von Bedenken nach dem DRY-Prinzip (Do not repeat yourself) zu lernen.
Hinter den Kulissen werden Sie fortgeschrittenere JavaScript-Konzepte beherrschen. Aufgaben, darunter das Erstellen eines Spielergitters, das Platzieren von Lebensmitteln, das Bauen des Schlangenkörpers, das Verlängern der Schlange, das Codieren der Navigationslogik, das Erstellen eines Belohnungs- und Strafschemas und die Kontrolle der Schlangengeschwindigkeit werden Sie dem Kern aussetzen JavaScript.
4. Tic Tac Toe-Spiel mit JavaScript
Vielleicht wird Ihr Tic Tac Toe-Gameplay geschärft, wenn Sie in einem anderen Video mit Kyle eines mit JavaScript erstellen. Dies ist eine einfache, aber wertvolle Projekt für JavaScript-Anfänger zu knabbern, während Sie komplexe Probleme lösen.
Das Video endet nicht nur mit JavaScript. Es zeigt auch, wie Sie Ihr Benutzeroberflächendesign mit CSS erfassen können. Mit Konsequenz und Hingabe können Sie in diesem Video fast jede Technik erlernen, die Sie benötigen, um Ihre Webentwicklungsreise zu beginnen.
Während das DOM mit JavaScript manipuliert wird, wickelt das Video das schwere Heben rund um die Codierung von Gewinn- und Unentschiedenentscheidungen, die Entscheidung über die Züge der Spieler und die Objektausrichtung ab. JavaScript-Funktionen, -Schleifen und -Bedingungen sind einige der fortgeschrittenen Konzepte, die Sie in diesem JavaScript-Tic-Tac-Toe-Lernvideo lernen werden.
5. Slide-Puzzle-Spiel mit JavaScript
Rätsel können zum Nachdenken anregen. Aber eins mit Vanilla-JavaScript zu bauen, klingt nach einer unterhaltsamen Möglichkeit, Ihre Kreativität zu erforschen und grundlegende bis komplexe JavaScript-Konzepte zu lernen.
Sie möchten in diesem Lernprogramm mitcodieren, wenn Sie sehen möchten, wie JavaScript-Konzepte verwendet werden, einschließlich bedingter Schalter und dynamischer Manipulation der DOM-Position mithilfe von benutzerdefinierten und integrierten Funktionen.
Obwohl der Tutor das JavaScript in ein Skript-Tag in der HTML-Datei platziert, können Sie Ihr Skript in einer dedizierten JavaScript-Datei drehen und es zur Verdeutlichung mit dem DOM in Ihrem Fall verknüpfen. Unabhängig davon ist es am besten, sich auf die Kernlogik und den Denkprozess zu konzentrieren, um Ihr Ziel zu erreichen, einschließlich der Frage, wie Sie das, was Sie hier lernen, auf realere Szenarien anwenden können.
6. Autorennspiel mit JavaScript
Das Erstellen eines Autorennspiels mit Vanilla JavaScript liefert möglicherweise nicht die beste grafische Ausgabe. Aber wenn Sie ein funktionierendes Autorennspiel programmieren, während Sie diesem Tutorial folgen, werden Sie lernen, die funktionsverleihende Kraft von JavaScript in jeder Anwendung zu nutzen.
In diesem Tutorial werden zwei Autos (ein rotes und ein blaues) auf einer Rennstrecke platziert. Das blaue Auto erscheint zufällig aus jeder Richtung, und das rote Fahrzeug, das den Spieler darstellt, versucht, eine Kollision zu vermeiden. Das Spiel endet, sobald es einen Kontakt zwischen beiden Autos gibt.
Obwohl dies eine einfache Beschreibung dessen ist, was Sie in diesem erstellen werden, lernen Sie etwas erweiterte JavaScript-Logik für DOM-Manipulation und -Styling. Sie erhalten auch Einblicke in JavaScript-Operatoren, während Sie Belohnungen und Strafen für Spieler erstellen.
Während Sie dem Track Funktionen hinzufügen, lernen Sie einige Konzepte kennen, darunter JavaScript-Ereignisse, Bedingungen, anonyme Funktionen, JavaScript-Animation, Intervallsteuerung und vieles mehr.
7. Mario-Spiel mit JavaScript
Dieses JavaScript-Mario-Spiel-Tutorial ist alles, was Sie brauchen, um sich in das Wesentliche von JavaScript einzutauchen. Auch wenn es kompliziert klingt, ein Mario-Spiel mit JavaScript zu erstellen, zeigt Chris, Ihr Tutor, in diesem YouTube-Video, dass es mehr als möglich ist. Vielleicht möchten Sie also den Spaß einfangen und Ihre Fähigkeit zum kritischen Denken erforschen, indem Sie mitbauen.
Obwohl Anfänger das Tutorial vielleicht etwas fortgeschritten finden, ist es eine brillante Suche für Auffrischer, um ihre JavaScript-Fähigkeiten auf die nächste Stufe zu bringen.
Neben dem Erlernen von Elementmanipulationen nutzen Sie die Leistungsfähigkeit von reinem JavaScript, um eine reaktionsschnelle Canvas-Boilerplate für die Spieloberfläche zu erstellen Objekt orientierte Programmierung (OOP). Da der Spieler aktiv beweglich ist, ist die Anwendung von JavaScript-Tastatursteuerung, Ereignisbehandlung, Schleifen, Operatoren, Bedingungen sowie integrierte und benutzerdefinierte Funktionen gehören zu den projektübergreifenden Erfahrungen, die Sie machen werden gewinnen.
8. Erstellen Sie Minesweeper mit JavaScript
Die Leistungsfähigkeit rekursiver Funktionen erkunden möchten und Array-Methoden beim Multiplizieren von DOM-Elementen mit JavaScript? Vielleicht möchten Sie mit diesem JavaScript-Minesweeper-Tutorial von Ania Kubów auf Traversy Media beginnen.
Es gehört viel Liebe zum Detail dazu. Aber es ist ein anfängerfreundliches Tutorial und eines der besten, um sich mit dem Grid-Layout-System mit JavaScript vertraut zu machen. Das ultimative Ziel ist es, eine Rastervorlage zu erstellen, bei der die Spieler vermeiden, auf eine Mine zu treten.
So einfach es klingt, Sie werden eine Menge Programmierlogik schreiben, die die meisten JavaScript-Kerntechniken umfasst, um die Funktionalität des Spiels hinter den Kulissen zu verdrahten.
9. Pokemon-JavaScript-Spiel-Tutorial mit HTML-Leinwand
Pokemon ist eines der komplexesten Spielprojekte, die Sie mit JavaScript erstellen können. Wenn Sie jedoch lange, strenge Programmierstunden mit JavaScript vor sich haben und bereit sind, mit mehr Selbstvertrauen erneuert herauszukommen, sollten Sie besser in dieses Tutorial einsteigen.
Neben der DOM-Skripterstellung und -Animation mit JavaScript lernen Sie in dem Video, wie Sie Assets, einschließlich Audio und Bilder, mit JavaScript verschieben und rendern. Das Tutorial enthüllt eine Menge über JavaScript, die Sie bei echten Programmierproblemen als wertvoll empfinden werden.
Zusätzlich zu anderen grundlegenden JavaScript-Manipulationstechniken verwendet das Tutorial auch stark die OOPs-Konzepte; Dies ist hilfreich, wenn Sie später in TypeScript eintauchen möchten. Einer der vereinfachenden Faktoren dieses Tutorials ist, wie der Tutor die Aufgaben skizziert.
Es ist einfach, einen Rückzieher zu machen, wenn Sie sich das komplexe System vorstellen, das Sie erstellen werden, damit dies funktioniert. Aber denken Sie darüber nach, was Sie am Ende gewinnen.
Lernen Sie die problemlösenden Anwendungen von JavaScript kennen
Spiele verwenden einige der reaktionsschnellsten und intuitivsten Logiken in der Programmierung. Es lohnt sich also, JavaScript zu lernen, indem man eines erstellt. Obwohl diese Tutorials spielbasiert sind, machen sie Sie mit den JavaScript-Kernkonzepten bekannt, die auf viele andere Codierungsprobleme anwendbar sind, einschließlich der Webentwicklung und der Erstellung mobiler Apps. Auch wenn Sie planen, sich später Frameworks zuzuwenden, wenden Sie diese Konzepte trotzdem an.