German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)
Möchten Sie ein Onlinespiel programmieren? Dann haben Sie Glück - Jetzt ist die richtige Zeit für alle Entwickler von Online-Spielen und solche, die es werden wollen.
Im Januar 2021 sind die Zeiten von Flash vorbei, und das hat den Weg für Dutzende (vielleicht Hunderte!) von verschiedenen Engines, Bibliotheken und Varianten gängiger Websprachen geebnet.
HTML5 und JavaScript Spiele haben schnell die Oberhand gewonnen und bilden die Grundlage für eine große Anzahl von Animationen und Browsergames im Internet.
Hier kommen die Vorlagen für HTML5- und JavaScript-Browserspiele ins Spiel.
Meistverkaufte HTML5 und JavaScript Spiele-Engines für 2021 auf CodeCanyon
CodeCanyon ist eine der besten Quellen für Spiele-Engines und Spielvorlagen in professioneller Qualität sowie für unzählige andere Skripte und Tools. Wenn Sie sich an der Erstellung von Online-Spielen mit HTML5 und JavaScript versuchen wollen, sollten Sie sich eine dieser HTML5 und JavaScript Spiele-Engines und Spielvorlagen besorgen. Sie verfügen über fertige Designs und Funktionen. Die zeitaufwändige Programmierung ist bereits für Sie erledigt, sodass Sie sich auf die Entwicklung von Spielen konzentrieren können, die Spaß machen. Sie können Spiele ohne Adobe Flash Player weiterhin spielen.
19 besten HTML5 und JavaScript Spiele-Engines und Spielvorlagen
Einige dieser Spielvorlagen sind genau das - Vorlagen - während andere an komplette Spielkonzepte oder flexible Game Engines grenzen. Ganz gleich, ob Sie etwas für Ihre Website suchen oder lernen möchten, wie Sie Ihre eigene Idee ausarbeiten können, Sie sehen deutlich, wie vielfältig HTML5 und JavaScript Spielvorlagen sein können.
Werfen wir zunächst einen Blick auf die besten Spiele-Engines und Spielvorlagen, die auf CodeCanyon verfügbar sind.
1. Canvas Puzzle
Canvas Puzzle war das erste HTML5 Spiel auf Envato Market. Das Konzept ist einfach, kann aber leicht erweitert werden, um ein vollwertiges Spiel zu erstellen. Diese HTML5-Spielvorlage ist mit allen modernen Browsern kompatibel und verfügt über einen Fallback für Internet Explorer 9 oder weniger, funktioniert aber auch auf den aktuellsten iPads hervorragend.
Benutzer können jedes beliebige Bild verwenden—einfach per Drag & Drop mit Firefox und Chrome—und das Spiel generiert eine beliebige Anzahl von verschiedenen Teilen.
Canvas Puzzle ist leicht, einfach, sauber und kann von Ihnen nach Belieben angepasst werden.
2. 3D Roulette
Wie die HTML5 3D BlackJack Spielvorlage hat auch das HTML5-Casinospiel 3D-Roulette einen tollen 3D-High-Res-Look.
Es wurde ebenfalls mit HTML5, JavaScript und CreateJS entwickelt.
Sie können 3D Roulette ganz einfach ändern, indem Sie die Photoshop- und Illustrator-Dateien herunterladen und bearbeiten. Der HTML-Casinospiel-Quellcode kann auch direkt in WordPress mit CTL Arcade WordPress Plugin installiert werden.
3. Bubble Shooter
Bubble Shooter erinnert mich sehr an Snood und andere ähnliche Spiele. Dieses einfache und süchtig machende Spiel kann so installiert werden, wie es ist, oder nach Ihren Wünschen verändert werden.
Diese HTML5 Spielvorlage hat eine Auflösung von 870x1504, ist vollständig responsive und kann mit Hilfe der Photoshop- und Illustrator-Dateien leicht angepasst werden.
Es wurde mit HTML5, JavaScript und CreateJS entwickelt, ist sofort spielbereit und kann mit dem CTL Arcade WordPress Plugin direkt in WordPress installiert werden.
4. The Sorcerer
Genießen Sie die Magie von HTML5 Spielvorlagen mit The Sorcerer. Dieses Spiel wurde vom Zuma-Gameplay inspiriert und enthält drei verschiedene progressive Level.
Es wurde mit HTML5, JavaScript und CreateJS entwickelt.
Die 960x540 Auflösung ist skalierbar und kann mit dem CTL Arcade WordPress Plugin verwendet werden. Passen Sie The Sorcerer an und fangen Sie an, Rätsel zu zaubern!
5. Katana Fruits
Werden Sie der nächste Obst-Ninja mit der hochgradig anpassbaren Vorlage Katana Fruits.
Diese HTML5 Spielvorlage wurde mit den folgenden Codeschnipseln entwickelt:
- HTML5
- JavaScript
- CreateJS
Sie können das Erscheinungsbild mit den mitgelieferten Photoshop- und Illustrator-Dateien bearbeiten und es mit dem CTL Arcade WordPress Plugin direkt in WordPress installieren.
6. Slot Machine: The Fruits
Slot Machine: The Fruits ist sowohl für Mobilgeräte als auch für den Desktop optimiert und enthält qualitativ hochwertige Bilder, die eine Auflösung von bis zu 1500x640 unterstützen. Es kommt mit HTML5 Casino-Spiele-Quellcode.
Dieses farbenfrohe Spiel wurde mit HTML5, JavaScript und CreateJS entwickelt.
Spiele, die mit der Slot Machine: The Fruits Spielvorlage gemacht, kann sogar mit dem CTL Arcade WordPress Plugin installiert werden.
7. Indiara and the Skull Gold
Genau wie viele der anderen HTML5 und JavaScript Spielvorlagen funktioniert Indiara and the Skull Gold auf allen Plattformen.
Sind Sie bereit, sich auf ein Abenteuer einzulassen und alte Artefakte in Höhlen voller Fallen zu sammeln?
Diese fantastische HTML Spielvorlage enthält:
- acht Levels
- Construct 2-Dateien
- Photoshop- und Illustrator-Dateien mit Ebenen
- und mehr
Indiara and the Skull Gold ist vollständig Touch- und Maus-unterstützt, enthält Social-Media-Share-Buttons und kann visuell angepasst werden, indem die Bilddateien ausgetauscht oder mit Construct 2 komplett verändert werden.
8. Game FlapCat Steampunk
Das Spiel FlapCat Steampunk ist mit seinem einfachen Design und seiner Spielbarkeit an ähnliche Blockbuster-Spiele angelehnt. Genieße dieses Touch- und Maus-kompatible Spiel in voller 1280x720 Auflösung.
Diese coole Katze enthält unendlich viele Levels, Construct 2-Dateien, Photoshop- und Illustrator-Dateien mit Ebenen und vieles mehr.
Game FlapCat Steampunk hat einen tollen künstlerischen Stil und ist bereit zum Spielen oder Anpassen.
9. HTML5 3D BlackJack
HTML5 3D BlackJack hat alle Funktionen, die man von einem realistischen BlackJack-Spiel erwartet: geteiltes Blatt, doppelter Einsatz und Versicherung.
Aber das Beste ist der hochauflösende 3D-Grafikstil.
Dieses Spiel wurde mit HTML5, JavaScript und CreateJS entwickelt und ist sowohl spielbereit als auch sehr anpassbar.
Sie können HTML5 3D BlackJack mit CTL Arcade WordPress Plugin aufstocken.
10. Ultimate Swish
Möchten Sie das nächste Projekt mit ein paar Sprungschüssen ergänzen? Ultimate Swish bietet Ihnen den Rahmen, um genau das zu tun.
Ultimate Swish bietet einen kurzen, süchtig machenden Spielzyklus, der zu einem eigenen, vollständigen Spiel erweitert oder an Ihr aktuelles Projekt angepasst werden kann.
Das Spiel basiert auf HTML5, JavaScript und CreateJS. Der gesamte Quellcode ist enthalten, so dass es einfach ist, zu sehen, wie es funktioniert, und im Handumdrehen mit der Anpassung zu beginnen!
11. Panda Love
Auf die Plätze, fertig, los!
Dieser schnell laufende Panda muss über Hindernisse geführt werden, um Preise zu sammeln und jedes der über 20 Level zu beenden.
Diese Vorlage enthält die folgenden Construct 2-Dateien und Funktionen: automatische Speicherung, Anzeigenunterstützung und One-Touch-Steuerung. Zeige etwas Pixel-Liebe mit Panda Love.
12. Game Christmas Furious
Es ist die Zeit für etwas Spaß! Die HTML5 Spielvorlage Game Christmas Furious bringt berührungs- und mausgestützten Spaß für alle Plattformen.
Sie enthält sechs Levels, Construct 2-Dateien, Photoshop- und Illustrator-Dateien mit Ebenen und vieles mehr.
Ballons überfallen den Nordpol—kann der Weihnachtsmann alle Geschenke fangen und den Ballons ausweichen? Game Christmas Furious HTML5 Spielvorlage ist spielbereit oder Sie können es in Ihre eigene Kreation verwandeln.
13. Don't Crash
Don't Crash. So geht's. Es hört sich einfach an, aber diese faszinierende HTML5 Spielvorlage wird Sie in Atem halten. Don't Crash enthält Construct 2-Dateien. Es ist voll responsive und hat Touch-Unterstützung, mit einer Auflösung von 1280 x 720.
Und nicht vergessen—Don't Crash!
14. Jumper Frog
Dieser Titel basiert auf HTML5, JavaScript und CreateJS, enthält den vollständigen Quellcode und ist bereit, angepasst zu werden. Diese Kombination eignet sich hervorragend, um alle Bestandteile eines Spiels zu erlernen, eigene Spiele zu entwickeln oder als Starthilfe für ein App-Projekt.
PSD- und Adobe Illustrator-Dateien sind auch separat erhältlich, um die Anpassung zu erleichtern.
15. Balloon Fight
Balloon Fight ist ein charmantes und fesselndes Spiel im Retro-Stil, das mit Construct 2 entwickelt wurde.
Lass die Ballons der anderen Katzen platzen—und du gewinnst!
Es wird mit allen Sounds und Musik, PNG-Grafikdateien und unbegrenzten Levels geliefert. Es unterstützt auch AdMob-Werbung. Balloon Fight ist einfach zu steuern, aber schwer zu meistern.
16. Formula Racing
Wenn es Ihnen um Geschwindigkeit geht, ist Formula Racing genau das Richtige für Sie. Dieses Spiel, das für jede Bildschirmgröße geeignet ist, wurde mit Construct 2 entwickelt.
Es enthält die KI der rivalisierenden Autos, die Möglichkeit, bestehende Strecken zu ändern oder eigene zu erstellen, sowie PNG- und PSD-Grafikdateien und unterstützt AdMob-Werbung.
Formula Racing ist vollständig anpassbar und bereit, mit etwas Neuem zu starten.
17. Spaghetti HTML 5 Mobile Game
Machen Sie die längsten Spaghetti aller Zeiten. Berühren für Rechtsdrehung. Loslassen für Linksdrehung. Mahlzeit!
Dieses mobile HTML 5 Spiel wurde mit Construct 2 entwickelt. Es hat Touch- und Maussteuerung. Es lässt sich leicht für Android und iOS exportieren. Es wird mit HTML5- und CAPX-Dateien sowie einer umfangreichen Dokumentation geliefert. Sie können Ihren Highscore auf Twitter teilen.
18. American Football Santa's Run
American Football Santa's Run ist ein lustiges Spiel! Alles, was Sie tun müssen, ist, den Spielern der gegnerischen Mannschaft auszuweichen. Sammeln Sie Sterne und erhalten Sie zehn Sekunden lang Beschleunigung. Während der Beschleunigung können Sie durch alle Spieler hindurchgehen, außer demjenigen, der schwarz trägt. Treten Sie auch nicht auf die Stacheln!
Es ist sehr einfach anzupassen und umzugestalten und funktioniert auf allen gängigen Browsern. Sie können es in iFrames einbetten und die Größe und Position der Schaltflächen auf dem Bildschirm ändern. Es wird mit HTML5- und Construct 2-Dateien (.capx), Bildern und Sounds geliefert.
19. Find the Twins
Find the Twins ist ein leicht zu verstehendes Spiel. Sie müssen zwei identische Bilder finden und sie miteinander verbinden. Aber denken Sie daran, dass Sie die Linie nur zweimal biegen können!
Es stehen 30 komplette Spielstufen zur Verfügung, aber Sie haben nur einen Versuch, sie alle zu bestehen! Je höher das Level, desto schwieriger. Ab Level 10 fangen die Bilder zum Beispiel an, sich zu verschieben.
Find the Twins wird mit Construct 2 und HTML5-Dateien, Dokumentation, Logo von 16px bis 550px, AdSense-Dokumentation und Plugin-Dokumentation geliefert.
Wenn Sie noch auf der Suche nach der perfekten HTML5 Spiel-Engine oder -Vorlage sind, finden Sie auf CodeCanyon eine große Auswahl. Eine weitere großartige Liste von HTML5 Spiele-Engines und Spielvorlagen finden Sie hier—zusammen mit Tipps, wie Sie Ihr Publikum ansprechen und einen großartigen Spieltrailer erstellen können!
5 Open-Source HTML5 und JavaScript Spiele
Im Folgenden finden Sie eine Auswahl an Quelloffene Spielvorlagen und Spiele-Engines, die Sie verwenden können, um Spiele ohne Flash Player zu erstellen, die Benutzer in ihren Browsern spielen können. Sie können den Quellcode ganz einfach auf Ihren Computer herunterladen und ihn nach Ihren Wünschen verändern. Anschließend können Sie die Spiele in Ihrem Browser ausführen und sie sogar weitergeben.
2048
2048 basiert auf dem Spiel 1024. Um dieses Spiel zu spielen, benutzen Sie die Pfeiltasten, um die Zeilen zu verschieben. Wenn sich zwei Steine mit der gleichen Zahl berühren, verschmelzen sie zu einem. Es ist mit HTML5, CSS3 und JavaScript geschrieben.
Sie können den Quellcode von GitHub herunterladen.
Canvas Tetris
Canvas Tetris ist perfekt für neue Entwickler, die lernen, 2D-Spielkonzepte zu verstehen. Es wurde mit HTML5 und JavaScript entwickelt. Ein sorgfältiges Studium des Quellcodes des Spiels wird Ihnen helfen, Ihre Fähigkeiten in der Spieleentwicklung zu verbessern.
Downloaden Sie den Quellcode kostenlos von GitHub!
MelonJS
MelonJS ist eine Spiel-Engine und ein Framework mit sehr geringem Speicherbedarf. Sie können damit Spiele entwickeln, die nur einen HTML5-Webbrowser benötigen.
Pixel Defense
Dieses quelloffene HTML5- und JavaScript-Spiel basiert auf dem Genre der Tower Defense-Spiele. Der Quellcode ist auf GitHub verfügbar, so dass Sie erfahren können, wie das Spiel entwickelt wurde. Sie müssen nur wissen, wie HTML5 und JavaScript funktionieren.
Quantum Game
Quantum Game besteht aus folgenden Komponenten: Photonenquellen, die Photonenteilchen aussenden, einem Felsen, der als Hindernis dient, einem Spiegel, der die Photonenteilchen ablenkt, und einem Photonendetektor, der die Photonenteilchen empfängt.
Ihr Ziel ist es, den Spiegel so anzuordnen, dass ein von der Photonenquelle ausgesandtes Photonenteilchen den Felsen umgeht und den Photonendetektor erreicht.
Das Spiel wurde mit HTML5, CSS, JavaScript und Sound-Plugins entwickelt. Es hat ein einfaches Layout und kann in Ihrem Browser gespielt werden. Und der Quellcode ist kostenlos auf GitHub verfügbar!
Warum sollte ich eine HTML5 Spielvorlage verwenden?
Die Entwicklung eines Spiels ist schwierig. Mit mehreren unterschiedlichen Fähigkeiten, die in einem komplexen Paket zusammengefasst sind, kann es schwierig sein, ein ganzes Projekt von Grund auf neu zu beginnen.
Für diejenigen, die neu in der Spieleprogrammierung sind, kann die Verwendung einer Spielvorlage dabei helfen, die Lücken in den Fertigkeiten zu füllen, wie z. B. Benutzeroberfläche oder Grafikdesign, und einen Einblick in die Arbeitsweise hinter einem fertigen Spiel zu geben. Dies ist eine großartige Lernerfahrung und hilft Ihnen, Ihre ersten Projekte zu verwirklichen, ohne sich zu überfordern.
Auch erfahrene Spieleprogrammierer können diese Spielvorlagen gut gebrauchen. Sie können dabei helfen, das Grundgerüst für ein größeres Spiel zu erstellen oder als Basis für ein neues Projekt zu dienen, wodurch die Erstellung von sich wiederholendem Code für jedes neue Spiel reduziert wird.
Die Gestaltung von Online Games
Sie haben also eine Idee für ein Online-Spiel oder mehrere Spiele ohne Flash Player. Aber wie fängt man an, eines zu entwickeln?
Sie können ein Spiel von Grund auf neu entwickeln. Dazu müssen Sie Kenntnisse in der Programmierung oder HTML haben. Wenn Sie keine Programmierkenntnisse haben, können Sie auch Vorlagen verwenden. Es gibt Tausende von ihnen.
Aber so oder so müssen Sie eine Roadmap haben. Erstellen Sie eine grundlegende und detaillierte Roadmap:
- Welche Art von Spiel wollen Sie entwickeln?
- Worum geht es in Ihrem Spiel?
- In welchem Genre?
- Für welche Plattform: Ist es ein Handyspiel (iOS oder Android) oder ein Desktop-Spiel (Windows oder Mac)?
- Wie soll es aussehen?
- Welche visuellen Features wollen Sie einbauen?
Einige Spieleentwicklungssoftware ermöglicht es Ihnen außerdem, Spiele per Drag-and-Drop zu erstellen - und das sogar ohne Programmierkenntnisse!
Software zum Erstellen von Spielen per Drag-and-Drop gibt es unter anderem:
Diese Plattformen haben alle kostenlose Versionen, mit denen Sie im Internet veröffentlichen können, aber Sie müssen für professionelle Versionen bezahlen, mit denen Sie mobile Spiele erstellen können.
Textbasierte Spiele-Engines
Die grundlegendste Software für die Spieleentwicklung ermöglicht es Anfängern ohne Programmierkenntnisse, textbasierte Spiele zu erstellen. Quest ist die perfekte Software für Anfänger, ebenso wie Twine.
2D-Spiele ohne Programmierkenntnisse erstellen
Um 2D-Spiele zu erstellen, können Sie Stencyl, Game Maker, or Construct 2. Diese Programme sind anfängerfreundlich, erfordern keine Programmierkenntnisse und verfügen über Drag-and-Drop-Schnittstellen.
Auswahl der Software zur Spieleentwicklung
- Wählen Sie eine Software, die in HTML5 veröffentlicht und auf die Veröffentlichung von Spielen in mobilen Browsern ausgerichtet ist. Sie wollen sich die mobilen Nutzer nicht entgehen lassen.
- Wenn Sie als Spieledesigner Geld verdienen möchten, sollten Sie eine Software wählen, die über Möglichkeiten zur Erfassung von Endnutzerdaten und zur Monetarisierung von Spielen verfügt.
- Die Software sollte einfach zu bedienen sein und eine ausführliche Dokumentation und Tutorials haben.
- Sie sollte Zugang zu einer soliden Spielergemeinschaft oder Gaming-Community haben, die technisches Wissen austauschen.
- Außerdem sollte es über eine umfangreiche Bibliothek mit Bildern und Musik verfügen.
Veröffentlichung und Vertrieb Ihres Spiels
Option 1: Eigenständiger Vertrieb und Hosting Ihres Spiels
Für den unabhängigen Vertrieb benötigen Sie einen Hosting-Service mit einer zuverlässigen Infrastruktur, der ein hohes Verkehrsaufkommen bewältigen kann und Ihre Spielwebsite blitzschnell zur Verfügung stellt. Natürlich werden Sie eine Menge an Hosting-Gebühren zahlen müssen. Außerdem müssen Sie eine lebendige Online-Community aufbauen und pflegen, um rentabel zu sein.
Option 2: Outsourcing von Hosting und Vertrieb an eine Spieleplattform
Plattformen bieten ein fertiges Publikum durch ihre lebendigen, integrierten Communities. Beachten Sie aber, dass sie für jedes Spiel, das Sie einreichen, eine Anmeldegebühr verlangen. Außerdem berechnen sie einen Prozentsatz für jeden Verkauf.
Um das Hosting und den Vertrieb auszulagern, können Sie die folgenden Plattformen nutzen:
- Android: Google Play Store oder Amazon Appstore
- iOS: App Store
- Desktop und Mobile apps: Steam, Game House, Gamers Gate, Humble Bundle, Kongregate, Gog, Itch.co
Fangen Sie Ihr HTML5- und JavaScript-Spiel heute an
Diese HTML5 und JavaScript Spielvorlagen sind nur eine kleine Auswahl von Hunderten, die wir bei CodeCanyon zum Download bereitgestellt. Wenn also keine von ihnen Ihren Bedürfnissen entspricht, gibt es viele andere großartige Optionen, aus denen Sie wählen können.
Vielleicht finden Sie auch ein Envato Tuts+ Code Tutorial über Spieldesign oder Spielmechanik hilfreich, oder sogar ein HTML5 Tutorial, um mit der Codierung Ihres eigenen Spiels zu beginnen.
