Beispiele für gute Javascript / HTML5-basierte Spiele [geschlossen]

37

Gibt es gute Beispiele für webbasierte Spiele, die auf vollständig offenen Standards basieren (dh Javascript, HTML und CSS), da Flash weitgehend durch HTML5-Elemente (Video, Audio, Leinwand usw.) ersetzt wird? Ich sehe viele Beispiele für reine HTML5-Implementierungen dessen, was einst nur in Flash war (wie hier: http://www.html5rocks.com/ ), aber nicht viele Spiele, eine Domäne, die immer noch von Flash dominiert zu sein scheint. Ich bin gespannt, was möglich ist und welche Grenzen es gibt.

Zuch
quelle
6
ich empfehle dir, die erste
zeile zu streichen

Antworten:

14

Es gibt viel Hype um HTML5, aber zu sagen, dass Flash größtenteils durch HTML5 ersetzt wird, ist übertrieben. Während Video- und Audio-Tags an Bedeutung gewinnen können, wird das Spielen ein Bereich sein, der sich lange Zeit als interessant erweist, nicht nur wegen der besseren Tools und Leistung, sondern auch, weil es eine Geschäftsinfrastruktur gibt, die auf dem Verteilen von SWF-Dateien basiert, was nicht einfach ist an HTML und js anpassen. Die HTML5-Spiele, die ich mit Canvas gesehen habe, befanden sich ungefähr vor 7 Jahren in Flash, und als IE9 so weit verbreitet ist, dass Canvas eine gangbare Option ist, hat Flash bereits die geplanten 3D- und möglicherweise Hardwarebeschleunigungsfunktionen eingeführt.

Iain
quelle
12
Wenn Adobe nicht zurechtkommt, wird Flash durch HTML5 ersetzt, und ich persönlich vergieße keine Träne.
Simurr
@ Simuri - Ich stimme irgendwie zu. Ich habe ihr Flex-Zeug professionell verwendet und im Vergleich zu der Art und Weise, wie Sun Java verwaltet, würde ich sagen, dass Adobe viel schlampiger ist (da es kein besseres Wort gibt).
Weiji
2
Ich bin mit Sicherheit einverstanden, dass Adobe sich zusammenfinden muss. Aber HTML5 ist so offensichtlich nur das neueste Schlagwort (wie zuvor AJAX, Web2.0) und keine echte Technologie, die Sie sofort einsetzen möchten.
Iain
1
Ich stimme dir nicht zu. Angesichts der jüngsten Ankündigungen von Microsoft, wonach der IE9 die HTML5-Technologien einbezieht, fehlt eigentlich nur eine anständige IDE. Und ich garantiere Ihnen, dass die Leute, die hinter Dreamweaver und Visual Studio stehen, genau das herausfinden wollen. Dies mag ein früher Zeitpunkt sein, aber es ist jetzt an der Zeit, über die Verwendung dieser Technologien nachzudenken und bewährte Verfahren zu etablieren.
Rylee Corradini
@ Simuri kümmern, um zu erklären, warum? Adobe ist alles andere als perfekt, aber es scheint eine ungerechtfertigte Feindseligkeit gegenüber Flash zu geben (im Übrigen würden manche Leute denken, dass Flash ihr Essensgeld in der Schule gestohlen hat). Die größte Beschwerde, die ich mit HTML5 habe, ist die mangelnde Konsistenz zwischen den Browsern, die mangelnde Leistung und ich bin kein Fan von JavaScript (ich mag strenge Sprachen)
Allan
12

Um herauszufinden, wie weit Sie mit den neuesten Browsern kommen können, haben ich und einige Kollegen den Open-Source-Java-Port von Quake II auf Safari / Chrome crosskompiliert (irgendwann sollte es auch mit Firefox funktionieren). obwohl dies anfangs nicht der Fall war, hauptsächlich aus Performancegründen). Das Projekt ist hier: http://code.google.com/p/quake2-gwt-port/

Es bedarf noch einiger Sorgfalt und Fütterung, um es zum Laufen zu bringen (z. B. ist WebGL in keinem Versandbrowser standardmäßig aktiviert), aber wir haben hier ein Video hochgeladen: http://www.youtube.com/watch?v = XhMN0wlITLk (sorry, es ist so dunkel - Gamma-Probleme bleiben bestehen) und Sie können unsere Google I / O-Diskussion hier sehen: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

Ich weiß nicht, wie lange es dauern wird, bis wir uns realistisch auf all diese neuen Browserfunktionen verlassen können (WebGL, WebSocket, Audio / Video, lokaler Speicher usw.), aber wenn alles zusammenkommt, kann es einen großen Unterschied machen in der Fähigkeit, Spiele direkt im Web zu versenden. Es bleiben jedoch noch viele Hürden offen (z. B. halten Sie nicht den Atem an, damit Microsoft WebGL in IE10 implementiert).

Joel Webber
quelle
1
Das ist eine sehr coole Demo, aber technisch keine Antwort auf die Frage. Er fragte nach HTML5, nicht nach WebGL. Während die beiden oft zusammengeführt werden, sind sie unterschiedlich (z. B. Internet Explorer implementiert HTML5, aber nicht WebGL.)
jhocking
6

EAs Lord of Ultima ist wahrscheinlich das visuell beeindruckendste Javascript / HTML-basierte Spiel, das ich je gesehen habe.

Hinweis: Es ist ein Strategiespiel und kein Action-Titel. Obwohl es eine schöne, flüssige Scrolling-Karte hat, gibt es in Bezug auf direkte Interaktivität nichts anderes, als auf Schaltflächen zu klicken.

wkerslake
quelle
Einfach mal probiert - ziemlich beeindruckend!
Tim Holt
Der von Ihnen angegebene Link führt mich zu einem Index der Spiele.
abgelaufen am
5

"Ich bin gespannt, was möglich ist und wo die Grenzen liegen."

Die Einschränkungen sind browserbasiert. Wenn Sie etwas Heißes wie das Webkit Nightlies verwenden, kann Flash im Grunde nichts, was der Browser von Haus aus nicht kann.

  • 2D-Grafik (über Canvas) mit Drehung, Skalierung, Deckkraft usw.
  • 3d (via leinwand und WebGL)
  • Audio (über das Audio-Tag, obwohl es derzeit selbst in Browsern, die es unterstützen, nicht funktioniert)
  • HTTP (über XMLHTTPRequest)
  • Lokaler Speicher (über die localStorage-API)
  • Sockets (über Web-Sockets)
  • SVG
  • Video (über das Video-Tag)

AFAIK, das alles ist auch in Google Chrome möglich (und wenn nicht, wird es bald sein). Klingt für mich nach einer vollständigen Spielumgebung :)

(Ich habe in meinem ersten Entwurf Links zu all diesen Dingen eingefügt, aber StackExchange hat es mir nicht erlaubt, sie zu posten, da ich neu bin. Entschuldigung!)

richtaur
quelle
Alle Funktionen sind vorhanden, aber der Zugriff auf sie, Javascript, ist im Vergleich zu ActionScript 3
Bart van Heukelom,
Wieso das? Bitte betonen.
Richtaur
1
ActionScript 3 verfügt über Klassen, deren Verwendung ich persönlich intuitiver finde als das Erstellen von Prototypen. Es verfügt über eine statische Typisierung (kann jedoch bei Bedarf so dynamisch wie JS sein), die eine bessere Leistung und hervorragende IDEs mit automatischer Vervollständigung ermöglicht sowie viele Fehler eher zur Kompilierungszeit als zur Laufzeit erkennt. Pakete vereinfachen das Mischen von Code aus mehreren Projekten.
Bart van Heukelom
2
All das sind subjektive Vorteile oder nicht mit der Sprache selbst verbunden ...
Rushyo
1
Imo, Javascript ist eine coole und flüssige Sprache, wenn man es für seine guten Teile hält ^^ Übrigens, der Teil "Audio lutscht momentan" ist momentan ein großes Problem: 7
Oskar Duveborn
4

Ein Benutzer von jquery ui baut eine Spiel-Engine namens Aves mit Javascript / html. Dieses Video beschreibt einige der Herausforderungen, denen er während der Entwicklung begegnet ist. Er hat viel darüber gesprochen, wie langsam die Leinwand war und dass sie derzeit nicht beschleunigt wird.

Sie können auch eine ganze Reihe von Spielen finden, die mit der Effect Games-Engine entwickelt wurden. Obwohl die Engine ziemlich sandkastenartig in seiner Site aussieht, mit allen Werkzeugen und Ressourcen, die dort vorhanden sind.

IMO ist die größte Einschränkung bei der Entwicklung eines js / html-Spiels der Klang. Das Tag verhält sich je nach Safari / Firefox / Chrome ereignisabhängig. Die neueste Version muss vorliegen. Zuletzt habe ich geprüft, dass Safari nur mit MP3 funktioniert und Firefox nur mit OGG. Obwohl es durchaus machbar ist, dies mit einer Kombination aus serverseitiger Logik zu überwinden.

Ich schreibe zurzeit gerne Flash-Spiele und kann nicht sehen, dass diese Domain von HTML5 (js / css / html) überwunden wird, bis Portale sie akzeptieren oder die Web-App-Stores online gehen.

Jared
quelle
4

Alt-Text

Contrasaurus

Dieses Spiel wurde sorgfältig mit Blut, Schweiß, Tränen und HTML5 erstellt. Die Kern-Matrix-Transformationsbibliothek wurde als Matrix.js ausgelagert . Außerdem arbeiten viele der wichtigsten Spracherweiterungen, Sprites, Sounds und Canvas-Bibliotheken in The Pixie Game Platform mit .

Kein Flash, alles HTML5 Canvas und Audio. Funktioniert am besten in Chrome.

Daniel X Moore
quelle
4

Sie müssen sich unbedingt die CAAT-Bibliothek ansehen - es ist großartig! Es ist eine Scenegraph-Bibliothek (zB thing.addchild / thing2.removechild) für Canvas.

Diese Demo hat mich umgehauen, zusammen mit dem Spiel, das auch auf dieser Seite enthalten ist: http://labs.hyperandroid.com/animation

So sehr, dass ich unser eigenes Spiel übertrug, um es zu benutzen, und es dauerte nur eine Nacht.

Besuchen Sie die Multiplayer-Schneeballschlacht http://holiday2010.ogilvy.com

So sehr, dass ich versucht habe, das Lirary zu verbessern und neue Inhalte hinzuzufügen: http://github.com/onedayitwillmake/CAAT-Hello

Verfügbar auf github: http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack

onedayitwillmake
quelle
2

Google Pacman muss eines der beeindruckendsten JS / HTML-Spiele sein, die ich je gesehen habe (zugegeben, es ist das einzige , das ich gesehen habe, aber es ist immer noch sehr beeindruckend :)

Quellcode-Speicherorte

Cyclops
quelle
3
nicht HTML5, nur DHTML, glaube ich. Außerdem wurde der Sound über Flash gemacht. Dies war alles, um maximale Kompatibilität zu erhalten.
Iain
2

Biolab Disaster ist ein ziemlich guter Plattform-Entwickler, der zeigt, was mit html5 und js alles möglich ist. http://playbiolab.com/

Deleter
quelle
2

Ich habe gerade mein Space Strategy-Spiel von Silverlight / C # auf reines HTML5 / Javascript / Canvas portiert:

Astriarch - Herrscher der Sterne

Es ist ein 2D-Spiel und grafisch sehr einfach, daher eignet es sich gut für die Verwendung der Leinwand, da nicht viel gemalt wird. Davon abgesehen bin ich beeindruckt, was einige der anderen, animierteren Spiele mit der gleichen Technologie leisten. Ähnlich wie bei Angry Birds im Chrome Web Store: Angry Birds möchten Sie vielleicht auch einige der anderen Spiele im Chrome Web Store ausprobieren, um weitere Beispiele zu erhalten.

Ein Grund, warum ich mein Spiel portiert habe, war, dass es auf Tablets / Mobilgeräten ausgeführt werden kann, ohne dass das Ganze in Java oder Objective C neu codiert werden muss. IOS und Android haben beide 'WebView'-Steuerelemente, um dies zu vereinfachen, aber Ich hatte Probleme beim Herumbasteln (iOS erfordert, dass sich alle Assets in einem Ordner befinden, soweit ich das gesehen habe).

Diese Art der plattformübergreifenden Anforderungen ist ein guter Grund, warum manche Leute von Flash zu HTML5 wechseln. Der Nachteil ist jedoch, dass Sie N verschiedene Browser und Versionen testen müssen und alle Probleme haben, die mit der typischen Webentwicklung verbunden sind. Diese Probleme werden durch Bibliotheken wie jQuery und einige der anderen hier erwähnten HTML5- Spielbibliotheken / -plattformen gelindert ( ImpactJS habe ich gesehen, aber noch nicht ausprobiert). Auch diese Probleme werden kein so großes Problem sein, wenn FireFox 7 nicht mehr verfügbar ist und der IE 9+ weiter verbreitet ist.

Wenn Sie sich für einige der Probleme interessieren, mit denen ich bei der Portierung von Silverlight auf HTML5 Canvas konfrontiert war, sollten Sie meinen Blogeintrag hier lesen : Portierung der Silverlight-App auf JavaScript mithilfe des HTML5 Canvas-Tags

Matt Palmerlee
quelle
2

Hier sind 3 großartige Spiele mit der ImpactJS- Engine.

Impact ist eine JavaScript-Game-Engine, mit der Sie umwerfende HTML5-Spiele für Desktop- und mobile Browser entwickeln können.

Wenn Sie sich derzeit nicht sicher sind, was Sie mit HTML5 tun können, sind dies derzeit die besten Beispiele. Bedenken Sie jedoch, dass sich das Feld schnell ändert, da es ein so heißes Thema ist!


Z-Typ

Ein Space Shoot'em'Up, bei dem Sie tippen, um zu schießen.

Biolab

Kämpfe dich in diesem Jump'n'Run durch ein infiziertes Biolab. Verwenden Sie Ihre Plasma-Pistole, um alles zu schießen, was sich bewegt! Es gibt 3 Levels zu erkunden und 6 Arten von Feinden zu bekämpfen.

Kreaturen & Burgen

Ein Action-Puzzle-Spiel, in dem du einem jungen Schatzsucher hilfst, einer mittelalterlichen Burg Unmengen von Schätzen zu stehlen.

Atav32
quelle
0

Ein wirklich interessantes HTML5-Entwicklungsframework, auf das ich kürzlich gestoßen bin, ist Sencha. Es ist hauptsächlich für Handheld- / Touch-Geräte gedacht, aber was wird in ein paar Jahren nicht mehr touchbasiert sein? Hier sind einige faszinierende Demos, einschließlich eines Kartenspiels:

http://www.sencha.com/products/touch/demos.php

Erlend
quelle
0

Hier sind einige HTML5-Spiele zu Effects Games ... es gibt sogar Projekte, in die man sich einmischen kann. Habe die Zeit zwischen den Kompilierungen meistens mit der Crystal Galaxy Demo verbracht

Steve Obbayi
quelle
0

Von der Site: "Cycleblob wird mithilfe von WebGL- und HTML 5-Zeichenflächenelementen implementiert und vollständig in JavaScript geschrieben."

http://cycleblob.com/

Petteri Hietavirta
quelle