Haciendo juegos de Javascript y HTML5

Question

Hace mucho tiempo (Netscape 4-era), escribí juegos basados ​​en Javascript: Pong, Minesweeper, y John Conway's Life entre ellos. Estoy volviendo a ello y quiero que mis manos estén aún más sucias.

que tienen algunos juegos en mente:

• Eje & aliados clon, con mapas más escarpadas y reglas complejas.
• Tetris clon, posiblemente con tiempo real jugador-contra-jugador o jugador-contra-equipo modo
• Breakout clon, con un par de armas y velocidades de partículas

en todos estos , Tengo solo unos pocos objetivos:

• Utilice JavaScript y HTML 5 - se debe ejecutar en Chrome, Safari o tal vez en un iPad.
• Comience funciones pequeñas y simples, luego compilación.
• Aprenda algo nuevo sobre el diseño e implementación de juegos.

Así que mis preguntas son:

1. ¿Cómo poner en práctica estos juegos?
2. ¿Tiene alguna recomendación tecnológica?
3. Si ha escrito estos juegos, ¿cuál fue la parte más difícil?

---

N. B. También quiero comenzar con los primeros principios: si recomiendes un framework/biblioteca, agradeceré alguna teoría o detalles de implementación detrás de esto. Estos juegos son lo suficientemente diferentes como para que aprenda algo nuevo de cada uno.

Answer 1

Depende de cuánto desea comenzar desde el principio.Para responder a sus preguntas directas:

1) ¿Cómo implementaría estos juegos?

A: JavaScript + Lienzo. Canvas es la superficie de dibujo 2D de HTML5. El rendimiento es bastante bueno en las máquinas de escritorio, no tan bueno en dispositivos iOS y Android (a la fecha de esta publicación). Si lo que más le preocupa es el móvil, debe usar las transformaciones DOM y CSS3 3D que activan la GPU en esos dispositivos.

2) ¿Tiene alguna recomendación de tecnología?

A: Esto es un poco respondido por la primera pregunta. JavaScript es obligatorio, pero ignoraría jQuery. Está orientado a dispositivos HTML5, por lo que no es necesario compensar los navegadores heredados. Como probablemente esté utilizando Canvas, tampoco necesita suavizar la interacción DOM. Hay algunas bibliotecas de nivel superior que facilitan la interacción con Canvas, como Easel.js. Los WebSockets son útiles para la comunicación de transmisión bidireccional. Y Box2D es útil para un motor de física. El almacenamiento local es información simple de cadena clave/valor para cosas como el progreso del nivel, pero para cualquier cosa compleja, querrás WebSQL DB. Para activos binarios grandes, querrá consultar la API del sistema de archivos. Finalmente, no tengas miedo de WebGL, ya que es extremadamente rápido y útil para juegos en 2D.

3) ¿Cuál es la parte más difícil?

A: Casi seguro que la parte más difícil es la depuración. Las herramientas para desarrolladores de WebKit pueden facilitar esto, así que no se vaya sin ellas.

Answer 2

Eche un vistazo a ChromeExperiments Los ejemplos son de todo el mundo utilizando los últimos estándares abiertos, incluidos HTML5, Canvas, SVG y javascript.

Answer 3

La parte más difícil, para mí, fue que no había herramientas para ayudar a hacer los gráficos, ya que no hay exportación Maya al lienzo, por ejemplo, entonces, todo se hace manualmente, con primitivas, a menos que quiera tomar mapas de bits que modificará como si fueran sprites.

En ese momento no había soporte real para el texto en el lienzo, por lo que mi solución no funcionaba con excanvas, pero funcionaba bien en Safari y Firefox.

Por lo tanto, es posible que desee ver qué funciones de HTML5 desea admitir, como una base de datos integrada, y luego decidir en qué navegadores está dispuesto a trabajar.

Cómo implementar esto dependerá en gran medida de cómo quiera crear los gráficos, y si desea hacer gráficos en 3D, como los sprites de mapa de bits no funcionarían.

Answer 4

En pocas palabras Aplicar textura para mover un montón de cosas alrededor de la pantalla y SVG para más bonita, más lentas, gráficos vectoriales.

Una de las primeras cosas que debe hacer es escribir un programa speed test para ver qué se puede hacer con Canvas y luego jugar con él.

escribí un post sobre Canvas & writing HTML5 games

Answer 5

Tom aquí desde Scirra (Construct 2 game maker). Hacemos un motor de juegos HTML5 llamado Construct 2, se exporta exclusivamente a HTML5 sin Flash a la vista.

Construct 2 utiliza un sistema basado en eventos para agregar la lógica para sus juegos y hace el trabajo de campo de toneladas repetitivo/difícil para usted. Por ejemplo, agregar colisiones poligonales a objetos sin algún editor visual es una tarea difícil de realizar algunas veces.

De todos modos, creo que es digno de una mirada y se pueden obtener resultados muy rápidamente de él también. Es una alternativa a la codificación de todo el juego que quizás desee tener en cuenta al desarrollar juegos HTML5.

Answer 6

No se olvide de processing.js, que es un marco javascript de gráficos y de interactividad de pila completa bien probado, que tiene soporte sustancial (si no completo) para la mayoría de E/S, sonidos, gráficos e incluso WebGL. Si escribe el código de procesamiento de vainilla, que básicamente es sintaxis de Java compilada en JavaScript, puede usar muchos depuradores de código abierto, incluido el entorno nativo Processing. Aparte de eso, puedes integrar cualquier otro código JavaScript que tengas en mente incluir.

Aquí es a guide for the JavaScript developer, que explica mucho de lo que es posible que desee saber.

Échale un vistazo. Buen material.

Answer 7

Una buena pregunta cuando también comencé a aprender HTML5 También me encontré con esta pregunta, finalmente, después de mucha investigación encontré la mejor manera de hacerlo es mediante el uso de algún motor o marco. Aprendí canvas e hice mi propio game, pero eso llevó horas de lógica y más de 100 líneas de código.

Mejor ir con scirra, podría reducir su trabajo.

Answer 8

Quizás esto no es lo que quería escuchar, pero ¿ha pensado en comenzar con un buen libro?

http://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=html5%20game

Un buen libro le ahorrará mucho tiempo y empezar justo en lo básico.

Answer 9

Actualmente estoy trabajando en una serie de publicaciones de blog que explican cómo crear un juego de Javascript utilizando EaselJS y Box2D para la física. Here's Part 1.