HTML5 | Untitled.es

Desarrollo de juegos con HTML5

Para los que no estéis familiarizados con HTML5 todavía, os recomiendo que echéis un vistazo a los tutoriales de HTML5 que desarrollé hace tiempo. En esta entrada vamos a ver algunas herramientas para desarrollar juegos con HTML5.

Antes de nada me gustaría que vieseis y probaseis algunos juegos que han sido desarrollados con herramientas HTML5.

Lá página es gratuita y súper intuitiva para empezar a jugar, se llama JuegosJuegos.mx
Qué imaginación tiene la gente, te pones a probar algunos y menudo vicio.

¿Tienes ya alguna idea para tu desarrollo de juego con HTML5?
Si la tienes y te apetece contármela, no dudes en dejar un comentario explicando un poco en qué cosiste, estaré encantado en darte feedback y en hacer de tester si hiciese falta.

Librerías y frameworks para HTML5

Cuando hablamos de lenguaje HTML5 hay que tener claro que no hablamos de un lenguaje de programación, hablamos de un lenguaje de etiquetas que regula el W3C. Acompañado en casi todas las ocasiones por el conocidísimo CSS3 (Hojas de estilo en cascada) y el más que eficiente JavaScript.

Podríamos decir que estos tres lenguajes forman la combinación perfecta:

HTML es el lenguaje de marcas.

CSS3 es el encargado de dar forma y color a estas marcas escritas en HTML.

JavaScript es el encargado de dar interactividad y dinamismo a estas marcas escritas en HTML y decoradas con CSS3.

Herramientas para crear juegos con HTML5

Para facilitar el desarrollo de juegos en HTML5 existen hoy en día muchas librerías y frameworks que nos hacen la vida más fácil.
Os cuento algunas cosas sobre cuatro de estas herramientas para desarrollar juegos HTML5 y vosotros elegís la que más se aproxime a lo que vais buscando.

enchant.js es mi preferido. Este motor fue creado en 2011 con licencia de Código Abierto, soporta WebGL y tenemos una traducción bastante buena en idioma español. Desde aquí puedes ir al sitio web de enchant.js para ver algunos ejemplos de juegos desarrollados con HTML5 o descargar esta interesante herramienta para desarrollo.

kiwi.js es un framework de código libre bastante extendido en el mundo del desarrollo de juegos en HTML5. Su sitio web está muy bien documentado, desde aquí puedes ver algunos ejemplos de código con kiwi.js.

BabylonJS es una de las librerías favoritas para los creadores de juegos en 3D. Trabaja con la especificación estándar WebGL para navegadores.

CraftyJS es una librería JavaScript creada para desarrollar juegos de forma sencilla y estructurada. Puedes conocer este proyecto más a fondo visitando la cuenta de Github de CraftyJS.

Fondo en movimiento Canvas HTML5

En esta entrada vamos a ver cómo colocar a nuestro elemento canvas de HTML5 un fondo y que se mueva simulando avance de pantalla.

Tutorial canvas HTML5

Nuestro fondo aparecerá en movimiento, podremos detenerlo y volver a ponerlo en movimiento.

Vamos a empezar por crear un archivo nuevo con la estructura básica de HTML5, y luego vamos a ir añadiendo unas líneas de CSS y otras de JavaScript.

Ejemplo de canvas

Lo primero que vamos a añadir será una regla de estilo CSS3 para que muestre nuestro canvas con un borde y podamos diferenciarlo del fondo blanco del documento. Si no tienes muy claro lo que son reglas de estilo, te recomiendo que eches una hojeada a alguno de nuestros tutoriales de CSS3 es castellano.

<style type="text/css">
     canvas{
          border:solid;
     }
</style>

Ahora añadiremos mediante HTML dos botones, uno para detener el movimiento del fondo y otro para volver a darle movimiento. En ellos haremos uso del evento onClick para llamar a la función JavaScript, que será la encargada de dar vida a estas acciones.

<input type="button" id="comenzar" value="Comenzar" onClick="comenzar()">
<input type="button" id="detener" value="Detener" onClick="detener()">

Las funciones no pueden ser más sencillas.

Función para comenzar();

function comenzar( ){
     clearTimeout(stop);
     stop = setTimeout(comenzar,1);
     dibujar(ctx);
}

Función para detener( );

function detener(){
     clearTimeout(stop);
}

Una vez tengamos esta parte de código terminada vamos a pasar a ver las líneas de código JavaScript necesarias para que este ejemplo tenga sentido.

<script >
     var micanvas, ctx;
     var tiempo = 0;
     var stop;
     var fondo = new Image();
     fondo.src ='img.png';

     window.addEventListener('load',init);
     function init(){
          micanvas = document.getElementById('lienzo');

          micanvas.width = 800;
          micanvas.height = 400;

          ctx =micanvas.getContext('2d');
          comenzar();
     }

     function comenzar(){
          clearTimeout(stop);
          stop = setTimeout(comenzar,1);
          dibujar(ctx);
     }

     function detener(){
          clearTimeout(stop);
     }

     function dibujar(ctx){
          ctx.clearRect(0,0,micanvas.width,micanvas.height);
          ctx.drawImage(fondo,tiempo,0);
          ctx.drawImage(fondo,tiempo-800,0);
		 
          tiempo--;
          if(tiempo<0){
               tiempo = tiempo + 800;	
          }
     }
</script>

Tutoriales HTML5

Con esta última parte de código, nuestro ejemplo estaría terminado. Creo que es bastante intuitivo el código, aun así, si tuvieras alguna duda o no te funcionase puedes dejar un comentario indicando qué es lo que no entiendes exactamente.

Puedes ver este ejemplo funcionando y mirar su código fuente. También puedes descargar el archivo HTML con el código completo y la imagen desde aquí.

@eneakao

Categoría: HTML5

Herramientas para desarrollar juegos con HTML5

Desarrollo de juegos con HTML5

Librerías y frameworks para HTML5

Herramientas para crear juegos con HTML5

Librería JavaScript de juegos HTML5

Tutoriales HTML5

Fondo en movimiento Canvas HTML5

Fondo en movimiento Canvas HTML5

Tutorial canvas HTML5

Ejemplo de canvas

Tutoriales HTML5