Ejemplos de buenos juegos basados ​​en Javascript / HTML5 [cerrado]

Ahora que Flash está siendo reemplazado en gran medida por elementos HTML5 (video, audio, lienzo, etc.), ¿hay algún buen ejemplo de juegos basados ​​en web basados ​​en estándares completamente abiertos (es decir, Javascript, HTML y CSS)? Veo muchos ejemplos de implementaciones HTML5 puras de lo que una vez fue solo en Flash (como las cosas aquí: http://www.html5rocks.com/ ) pero no muchos juegos, un dominio que todavía parece dominado por Flash. Tengo curiosidad por saber qué es posible y cuáles son las limitaciones.

Hay mucho bombo en torno a HTML5, pero decir que Flash está siendo reemplazado en gran medida por esto es una exageración. Si bien las etiquetas de video y audio pueden ganar tracción, los juegos serán un área que se mantendrá durante mucho tiempo, no solo por mejores herramientas y rendimiento, sino también porque hay una infraestructura comercial construida alrededor de la distribución de archivos Swf, que no sería fácil adaptarse a HTML y js. Los juegos html5 que he visto usando Canvas son más o menos donde estaba Flash hace 7 años, y para cuando ie9 esté lo suficientemente distribuido como para que Canvas sea una opción viable, Flash ya habrá introducido sus funciones de aceleración de hardware 3D y posiblemente planificadas.

Con el interés de explorar hasta qué punto puede llevar la última cosecha de navegadores, yo y algunos colegas compilamos el puerto Java de código abierto de Quake II a Safari / Chrome (también debería funcionar en Firefox en algún momento, aunque no lo hizo inicialmente, en gran parte por razones de rendimiento). El proyecto está aquí: http://code.google.com/p/quake2-gwt-port/

Todavía requiere un poco de cuidado y alimentación para ponerlo en funcionamiento (por ejemplo, WebGL todavía no está habilitado de forma predeterminada en ningún navegador de envío), pero subimos un video aquí: http://www.youtube.com/watch?v = XhMN0wlITLk (lo siento, está muy oscuro, quedan problemas de gamma) y puede ver nuestra charla de E / S de Google aquí: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

No sé cuánto tiempo pasará antes de que podamos depender de manera realista de todas estas nuevas características del navegador (WebGL, WebSocket, audio / video, almacenamiento local, etc.), pero si todo se combina, podría hacer una gran diferencia en la capacidad de enviar juegos directamente en la web. Pero todavía quedan muchos obstáculos (por ejemplo, no contenga la respiración para que Microsoft implemente WebGL en IE10).

EA Lord of Ultima de es probablemente el juego basado en Javascript / HTML más visualmente impresionante que he visto.

Nota: es un juego de estrategia y no un título de acción, por lo que si bien tiene un mapa de desplazamiento suave y agradable, no hay nada más que hacer clic en los botones en lo que respecta a la interactividad directa.

"Tengo curiosidad por saber qué es posible y cuáles son las limitaciones".

Las limitaciones están basadas en el navegador. Si está utilizando algo atractivo como los nightlies de Webkit, básicamente no hay nada que Flash pueda hacer que el navegador no pueda hacer de forma nativa, como:

• Gráficos 2D (a través del lienzo) con rotación, escala, opacidad, etc.
• 3d (a través de Canvas y WebGL)
• Audio (a través de la etiqueta de audio, aunque actualmente apesta incluso en los navegadores que lo admiten)
• HTTP (a través de XMLHTTPRequest)
• Almacenamiento local (a través de la API localStorage)
• Sockets (a través de Web Sockets)
• SVG
• Video (a través de la etiqueta de video)

AFAIK también es posible en Google Chrome (y si no es así, lo será pronto). A mí me parece un entorno de juego completo :)

(Incluí enlaces a todo esto en mi primer borrador, pero StackExchange no me permitió publicarlos ya que soy nuevo; ¡lo siento!)

Echa un vistazo a estos sitios web:

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

Un jquery ui está construyendo un motor de juego llamado Aves usando javascript / html. Este video describe algunos de los desafíos que enfrentó durante el desarrollo. Habló mucho sobre lo lento que era el lienzo y que actualmente no está acelerado.

También puedes encontrar un montón de juegos desarrollados usando el motor de Effect Games. Aunque el motor se ve bastante protegido en su sitio con todas las herramientas y activos existentes allí.

En mi opinión, la mayor limitación de desarrollar un juego js / html es el sonido. La etiqueta funciona de manera diferente en cuanto a eventos en safari / firefox / chrome, todos los cuales deben ser la última versión. La última vez que verifiqué que Safari funcionaba solo con MP3 y Firefox solo funciona con OGG. Aunque es completamente factible superar esto con una combinación de lógica del lado del servidor.

Actualmente me dedico a escribir juegos Flash y no puedo ver que ese dominio sea superado por HTML5 (js / css / html) hasta que los portales comienzan a aceptarlos o las tiendas de aplicaciones web se conectan.

Contrasaurus

Este juego fue creado minuciosamente con sangre, sudor, lágrimas y HTML5. La biblioteca de transformación de matriz de núcleo se convirtió en Matrix.js . Además, muchas de las principales extensiones de lenguaje, sprites, sonidos y bibliotecas de lienzo están trabajando en The Pixie Game Platform .

Sin Flash, todo HTML5 Canvas y Audio. Funciona mejor en Chrome.

REALMENTE tienes que visitar la biblioteca CAAT, ¡es increíble! Es una biblioteca de escenas (por ejemplo, thing.addchild / thing2.removechild) para el lienzo.

Esta demostración me dejó alucinado, junto con el juego que también figura en esa página: http://labs.hyperandroid.com/animation

Tanto es así que transferí nuestro propio juego para usarlo, y solo me llevó una noche.

Visítanos, lucha de bola de nieve multijugador http://holiday2010.ogilvy.com

Tanto es así que he intentado mejorar el archivo y agregarle cosas de nuevo: http://github.com/onedayitwillmake/CAAT-Hello

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

A pesar de que los controles están jodidos / necesitan trabajo, soy aficionado a Akihabara - http://www.kesiev.com/akihabara/

Google Pacman tiene que ser uno de los juegos JS / HTML más impresionantes que he visto (claro, es el único que he visto, pero sigue siendo realmente impresionante :)

Ubicaciones de código fuente

Hay excelentes tutoriales para las Bibliotecas de Akihabara reunidos por Darius Kazemi y Darren Torpey en: Tutoriales de Akihabara

Biolab Disaster es un juego de plataformas de desplazamiento lateral bastante bueno que muestra lo que se puede hacer con html5 y js. http://playbiolab.com/

Acabo de terminar de portar mi juego de estrategia espacial de Silverlight / C # a HTML5 / Javascript / Canvas puro:

Astriarca - Gobernante de las estrellas

Es un juego en 2D y gráficamente muy simple, por lo que se presta muy bien para usar el lienzo porque no hay mucha pintura. Dicho esto, estoy impresionado con lo que algunos de los otros juegos más animados están haciendo con la misma tecnología. Como pájaros enojados en la tienda web de Chrome: Angry Birds , es posible que también desee ver algunos de los otros juegos en la tienda web de Chrome para obtener más ejemplos.

Una de las razones por las que porté mi juego fue porque quería que pudiera ejecutarse en tabletas / dispositivos móviles sin tener que volver a codificar todo en Java u Objective C. Tanto iOS como Android tienen controles 'WebView' para facilitar esto, pero He tenido problemas en los pequeños ajustes que he hecho (iOS requiere que todos sus activos estén en una carpeta, por lo que he visto).

Este tipo de requisito multiplataforma es una buena razón por la cual algunas personas se están alejando de Flash hacia HTML5, pero la desventaja es que tiene que probar en N navegadores y versiones diferentes y tener todos los dolores de cabeza asociados con el desarrollo web típico. Estos problemas se alivian con bibliotecas como jQuery y algunas de las otras bibliotecas / plataformas de juegos HTML5 mencionadas aquí ( ImpactJS es una que he visto pero que no he probado). Además, estos problemas no serán tan problemáticos cuando FireFox 7 esté apagado e IE 9+ se vuelva más generalizado.

Si está interesado en algunos de los problemas que enfrenté al portar de Silverlight a HTML5 Canvas, debería consultar la publicación de mi blog aquí: Portar la aplicación de Silverlight a JavaScript usando la etiqueta HTML5 Canvas

Aquí hay 3 grandes juegos que usan el motor ImpactJS .

Impact es un motor de juegos de JavaScript que le permite desarrollar impresionantes juegos HTML5 para navegadores de escritorio y móviles.

Si actualmente no está seguro de lo que puede hacer con HTML5, diría que estos son actualmente los mejores ejemplos. Sin embargo, tenga en cuenta que debido a que es un tema tan candente, ¡el campo está cambiando rápidamente!

Tipo Z

Un Space Shoot'em'Up donde escribes para disparar.

Biolab

Ábrete camino a través de un Biolab infectado en este Jump'n'Run. ¡Usa tu pistola de plasma para disparar todo lo que se mueve! Hay 3 niveles para explorar y 6 tipos de enemigos para luchar.

Criaturas y castillos

Un juego de rompecabezas de acción en el que ayudas a un joven cazador de tesoros a robar grandes cantidades de tesoros de un castillo medieval.

Casualmente, hoy hubo una pregunta en Slashdot sobre los juegos html5 / javascript:

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

Menciona específicamente el Saqueo Galáctico, un tirador espacial de desplazamiento lateral:

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

http://www.javascriptgaming.com/

Un marco de desarrollo HTML5 realmente interesante con el que me topé recientemente es Sencha. Es principalmente para dispositivos de mano / táctiles, pero lo que no es será táctil dentro de un par de años? Aquí hay algunas demostraciones interesantes, incluido un juego de cartas:

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

Aquí hay algunos juegos HTML5 en los juegos de efectos ... incluso hay proyectos en los que puedes participar. He estado matando el tiempo entre compilaciones principalmente con su Crystal Galaxy Demo

Desde el sitio: "Cycleblob se implementa utilizando elementos de lienzo WebGL y HTML 5 y está escrito completamente en 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