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

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.

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.

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).

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.

"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!)

Schauen Sie sich diese Websites an:

• http://html5games.com/
• http://web.appstorm.net/roundups/browsers/10-html5-games-paving-the-way/

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.

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.

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

Obwohl die Kontrollen vermasselt sind / Arbeit brauchen, mag ich Akihabara - http://www.kesiev.com/akihabara/

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

Es gibt ausgezeichnete Tutorials für die Akihabara-Bibliotheken, die von Darius Kazemi und Darren Torpey unter: Akihabara Tutorials zusammengestellt wurden

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

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

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.

Zufälligerweise gab es heute bei Slashdot eine Frage zu HTML5 / Javascript-Spielen:

http://ask.slashdot.org/story/10/07/14/0632238/JavaScriptHTML-5-Gaming

Es erwähnt speziell Galactic Plunder, einen Side-Scrolling-Weltraum-Shooter:

http://dougx.net/plunder/plunder.html

http://www.javascriptgaming.com/

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

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

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

http://cycleblob.com/

Probieren Sie Private Joe für einen kompletten 2D-Retro-Arcade-Shooter

Wenn Sie Spiele ausprobieren möchten, die für Handys optimiert sind , besuchen Sie marketJS