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

37

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.

Zuch
fuente
66
le recomiendo que deje la primera línea: la respuesta mejor calificada no responde a su pregunta, pero se ofende por su premisa;)
oberhamsi

Respuestas:

14

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.

Iain
fuente
12
Si Adobe no actúa bien, Flash será reemplazado por HTML5 y yo personalmente no derramaré una lágrima.
Simurr
@ Simuri: estoy de acuerdo. He usado sus cosas Flex profesionalmente, y en comparación con la forma en que Sun administra Java, diría que Adobe es mucho más ... descuidado (por falta de una palabra mejor).
weiji
2
Ciertamente estoy de acuerdo en que Adobe necesita actuar juntos. Pero HTML5 es, obviamente, solo la última palabra de moda (como AJAX, Web2.0 anteriormente) y no es una tecnología real que desearía utilizar en este momento.
Iain
1
Estoy en desacuerdo. Con los recientes anuncios de Microsoft sobre IE9 que abarca las tecnologías HTML5, lo único que realmente falta es un IDE decente. Y le garantizo que las personas detrás de Dreamweaver y Visual Studio están tratando de resolver eso. Esto puede ser temprano, pero ahora es el momento de comenzar a pensar en usar estas tecnologías y establecer las mejores prácticas.
Rylee Corradini
@Simuri, ¿quieres explicar por qué? Adobe está lejos de ser perfecto, pero parece haber una animosidad injustificada hacia Flash (por la forma en que algunas personas continúan, pensarías que Flash les robó el dinero del almuerzo en la escuela). La mayor queja que tengo con HTML5 es la falta de coherencia entre los servidores, la falta de rendimiento y no soy un fanático de JavaScript (me gustan los lenguajes estrictos)
Allan
12

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

Joel Webber
fuente
1
Esa es una demostración muy interesante, pero técnicamente no es una respuesta a la pregunta. Preguntó sobre HTML5, no WebGL; mientras que los dos se confunden a menudo, son diferentes (por ejemplo, Internet Explorer está implementando HTML5 pero no WebGL..)
jhocking
6

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.

Wkerslake
fuente
Solo lo probé, ¡bastante impresionante!
Tim Holt
el enlace que proporciona me lleva a un índice de juegos.
expiredninja
5

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

richtaur
fuente
Todas las características están ahí, pero falta la forma de acceder a ellas, Javascript, en comparación con ActionScript 3
Bart van Heukelom el
¿Cómo es eso? Por favor enfatiza.
richtaur
1
ActionScript 3 tiene clases, que personalmente considero más intuitivas de usar que la creación de prototipos. Tiene tipeo estático (pero puede ser tan dinámico como JS si es necesario) lo que permite un mejor rendimiento y permite grandes IDE con autocompletado, así como detectar muchos errores en tiempo de compilación en lugar de tiempo de ejecución. Los paquetes facilitan la mezcla de código de múltiples proyectos.
Bart van Heukelom
2
Todas las cuales son ventajas subjetivas o no están relacionadas con el lenguaje en sí ...
Rushyo
1
Imo, Javascript es un lenguaje genial y fluido cuando se lo toma por sus partes buenas ^^ Por cierto, la parte de "audio actualmente apesta" es un problema importante en este momento: 7
Oskar Duveborn
4

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.

Jared
fuente
4

alt text

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.

Daniel X Moore
fuente
4

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

onedayitwillmake
fuente
2

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

Cyclops
fuente
3
no HTML5, solo DHTML, creo. Además, el sonido se realizó a través de Flash. Todo esto fue para obtener la máxima compatibilidad.
Iain
2

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/

Deleter
fuente
2

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

Matt Palmerlee
fuente
2

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.

Atav32
fuente
0

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

Erlend
fuente
0

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

Steve Obbayi
fuente
0

Desde el sitio: "Cycleblob se implementa utilizando elementos de lienzo WebGL y HTML 5 y está escrito completamente en JavaScript".

http://cycleblob.com/

Petteri Hietavirta
fuente
0

try Private Joe for a full 2d retro arcade shooter

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

ben0
fuente