Exemples de bons jeux basés sur Javascript / HTML5 [fermé]

Maintenant que Flash est en grande partie remplacé par des éléments HTML5 (vidéo, audio, toile, etc.), existe-t-il de bons exemples de jeux basés sur le Web reposant sur des standards complètement ouverts (c'est-à-dire Javascript, HTML et CSS)? Je vois beaucoup d'exemples d'implémentations HTML5 pures de ce qui était autrefois uniquement en Flash (comme ici: http://www.html5rocks.com/ ) mais peu de jeux, un domaine qui semble toujours dominé par Flash. Je suis curieux de savoir ce qui est possible et quelles sont les limites.

Il y a beaucoup de battage médiatique autour du HTML5, mais il est exagéré de dire que Flash est en grande partie remplacé par celui-ci. Alors que les tags vidéo et audio peuvent gagner du terrain, les jeux seront un domaine qui perdurera longtemps, non seulement en raison d'un meilleur outillage et de meilleures performances, mais aussi parce qu'il existe une infrastructure professionnelle construite autour de la distribution de fichiers Swf, qui ne serait pas facile. adapter à HTML et js. Les jeux html5 que j'ai vus avec canvas sont à peu près les endroits où Flash était il y a 7 ans, et au moment où ie9 sera suffisamment distribué pour que le canvas soit une option viable, Flash aura déjà introduit ses fonctionnalités prévues d'accélération 3D et éventuellement matérielle.

Dans l’intérêt d’explorer jusqu’à quel point vous pouvez aller avec la dernière génération de navigateurs, moi-même et certains collègues avons compilé le port Java open source de Quake II vers Safari / Chrome (il devrait également fonctionner sous Firefox à un moment donné, bien que ce ne soit pas le cas initialement, principalement pour des raisons de performance). Le projet est ici: http://code.google.com/p/quake2-gwt-port/

Il faut encore un peu de soin et d’alimentation pour le rendre opérationnel (par exemple, WebGL n’est toujours pas activé par défaut dans les navigateurs d’expédition), mais nous avons chargé une vidéo ici: http://www.youtube.com/watch?v = XhMN0wlITLk (désolé, il fait si sombre - les problèmes de gamma demeurent) et vous pouvez voir notre discussion sur Google I / O ici: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

Je ne sais pas combien de temps il faudra avant que nous puissions dépendre de manière réaliste de toutes ces nouvelles fonctionnalités du navigateur (WebGL, WebSocket, audio / vidéo, stockage local, etc.), mais si tout était réuni, cela pourrait faire une énorme différence. dans la possibilité d'expédier des jeux directement sur le Web. Mais il reste encore beaucoup d'obstacles (par exemple, ne retenez pas votre souffle pour que Microsoft implémente WebGL dans IE10).

Le Seigneur de Ultima d' EA est probablement le jeu le plus impressionnant sur le plan visuel basé sur Javascript / HTML que j'ai jamais vu.

Remarque: il s’agit d’un jeu de stratégie et non d’un titre d’action. Par conséquent, bien qu’il dispose d’une belle carte à défilement fluide, il n’ya rien de plus qu’un simple clic sur des boutons pour une interactivité directe.

"Je suis curieux de savoir ce qui est possible et quelles sont les limites."

Les limitations sont basées sur un navigateur. Si vous utilisez quelque chose de chaud comme les nightlies Webkit, il n'y a fondamentalement rien que Flash puisse faire que le navigateur ne puisse pas faire de manière native, comme par exemple:

• 2d Graphics (via canvas) avec rotation, mise à l'échelle, opacité, etc.
• 3d (via canvas et WebGL)
• Audio (via la balise audio, même si actuellement, même dans les navigateurs compatibles)
• HTTP (via XMLHTTPRequest)
• Stockage local (via l'API localStorage)
• Sockets (via Web Sockets)
• SVG
• Vidéo (via la balise video)

Autant que je sache, tout est également possible dans Google Chrome (et si ce n’est pas le cas, ce le sera bientôt). Cela ressemble à un environnement de jeu complet pour moi :)

(J'ai inclus des liens vers tous ces éléments dans mon premier brouillon mais StackExchange ne m'a pas laissé les poster car je suis nouveau; désolé!)

Regardez ces sites:

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

Un mec jquery est en train de construire un moteur de jeu appelé Aves en utilisant javascript / html. Cette vidéo décrit certains des problèmes rencontrés au cours du développement. Il a beaucoup parlé de la lenteur de la toile et du fait qu’elle n’est pas accélérée actuellement.

Vous pouvez également trouver tout un tas de jeux développés à l'aide du moteur Effect Games. Bien que le moteur ressemble assez à un bac à sable sur son site avec tous les outils et actifs existants.

IMO, la plus grande limitation du développement d’un jeu js / html est le son. La balise fonctionne différemment en ce qui concerne les événements safari / firefox / chrome, qui doivent tous être la dernière version. La dernière fois que j'ai vérifié, safari ne fonctionnait qu'avec MP3 et Firefox ne fonctionnait qu'avec OGG. Bien qu'il soit tout à fait possible de surmonter cela avec un combo de logique côté serveur.

Je travaille actuellement à l'écriture de jeux Flash et je ne vois pas que ce domaine soit dépassé par HTML5 (js / css / html) jusqu'à ce que les portails commencent à les accepter ou que les magasins d'applications en ligne se connectent.

Contrasaurus

Ce jeu a été minutieusement créé avec du sang, de la sueur, des larmes et du HTML5. La bibliothèque de transformation de matrice principale a été créée sous le nom de Matrix.js . En outre, de nombreuses extensions du langage principal, des images-objets, des sons et des bibliothèques de canevas font leur chemin dans The Pixie Game Platform .

Pas de Flash, tous les toiles HTML5 et audio. Fonctionne mieux dans Chrome.

Vous devez VRAIMENT vérifier la bibliothèque CAAT - c'est génial! C'est une bibliothèque de scenegraph (par exemple thing.addchild / thing2.removechild) pour canvas.

Cette démo m'a époustouflé, avec le jeu également contenu sur cette page: http://labs.hyperandroid.com/animation

Si bien que j'ai transféré notre propre jeu pour l'utiliser, et cela ne m'a pris qu'une nuit.

Drop in, combat de boules de neige multijoueur http://holiday2010.ogilvy.com

À tel point que j'ai essayé d'améliorer le répertoire et d'y ajouter du matériel: http://github.com/onedayitwillmake/CAAT-Hello

Disponible sur github: http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack

Même si les commandes sont foutues / ont besoin de travail, j'aime beaucoup Akihabara - http://www.kesiev.com/akihabara/

Google Pacman has to be one of the more impressive JS/HTML games I've seen (granted, it's the only one I've seen, but it's still really impressive :)

Source Code locations

There are excellent tutorials for the Akihabara Libraries put together by Darius Kazemi and Darren Torpey at: Akihabara Tutorials

Biolab Disaster is a pretty good sidescrolling platformer showing what can be done with html5 and js. http://playbiolab.com/

I just finished porting my Space Strategy game from Silverlight/C# to pure HTML5/Javascript/Canvas:

Astriarch - Ruler of the Stars

It is a 2D game and graphically very simple, so it lends itself nicely to using the canvas because there isn't lots of painting going on. That being said, I'm impressed with what some of the other, more animated games are doing out there with the same technology. Like angry birds at the chrome web store: Angry Birds, you might also want to check out some of the other games in the Chrome Web store for more examples.

One reason I ported my game was I wanted it to be able to run on tablet/mobile devices without having to re-code the whole thing in Java or Objective C. iOS and Android both have 'WebView' controls to make this easier, but I've had trouble in the little bit of tinkering around I've done with it (iOS requires all your assets to be in one folder as far as I've seen).

This type of cross-platform requirement is a good reason why some people are moving away from Flash and towards HTML5, but the downside is that you have to test on N different browsers and versions and have all the headaches associated with typical web development. These problems are alleviated by libraries like jQuery and some of the other HTML5 game libraries/platforms mentioned here (ImpactJS is one I've seen but haven't tried). Also these problems will not be as much of an issue when FireFox 7 is out and IE 9+ becomes more pervasive.

If you are interested in some of the problems I faced porting from Silverlight to HTML5 Canvas you should check out my blog post here:Porting Silverlight App to javascript using HTML5 Canvas tag

Here are 3 great games using the ImpactJS engine.

Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.

If you're currently unsure about what you can do with HTML5, I'd say these are currently the best examples. Keep in mind though that because it's such a hot topic, the field is changing quickly!

Z-Type

A Space Shoot'em'Up where you type to shoot.

Biolab

Fight your way through an infected Biolab in this Jump'n'Run. Use your Plasma Gun to shoot everything that moves! There are 3 levels to explore and 6 types of enemies to fight.

Creatures & Castles

An action-puzzle game in which you help a young treasure hunter steal vast quantities of treasure from a medieval castle.

Coincidentally, there was a question on Slashdot today about html5/javascript gaming:

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

It mentions specifically Galactic Plunder, a side-scrolling space shooter:

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

http://www.javascriptgaming.com/

A really interesting HTML5 development framework I recently stumbled upon is Sencha. It's mainly for handheld/touch devices, but what's not gonna be touch-based a couple years from now? Here are some intriguing demos, including a card game:

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

Here are some HTML5 games on Effects Games... there are even projects there you can jump in an get involved. Been killing time between compiles mostly with their Crystal Galaxy Demo

From the site: "Cycleblob is implemented using WebGL and HTML 5 canvas elements and is written completely in JavaScript."

http://cycleblob.com/

try Private Joe for a full 2d retro arcade shooter

if you'd like to try mobile-optimzed games, head over to marketJS