Cada vez más los juegos se están pasando de Flash a la tecnología HTML y Javascript. Ya publiqué en su momento juegos como Biolab Disaster o un juego propio, como Milokoban.

El juego que presento hoy es Karoshi HTML5, donde el objetivo del juego es suicidarse en vez de sobrevivir. El juego está desarrollado con la herramienta Game Maker HTML5, si bien no es libre sí que permite desarrollar juegos con la tecnología HTML y Javascript.

Enlace: Karoshi HTML5.

Cuando di a conocer el videojuego Biolab Disaster, se me olvidó hacer referencia al motor de JavaScript con el que estaba hecho: Impact JS. En su momento probé el motor e hice algunas pruebas y me gustó mucho, es por eso que me gustaría que lo conocieráis.

Impact JS es un motor de JavaScript específico para crear videojuegos. Usando la API de este motor te despreocuparás del navegador que vaya a funcionar, ya que está preparado para que ande en todos los navegadores, incluso en los de los móviles. Además cuenta con un editor de niveles y un depurador para que el desarrollo de tu videojuego sea mucho más fácil y sencillo.

La licencia que tenía, en un principio, era libre, aunque no gratis, para modificar y distribuir, pero ahora se está cerrando un poco más. Espero que con el tiempo, Dominic Szablewski, el autor, lo libere por completo tal como insinuó, estaremos al tanto.

Además de Biolab Disaster, hay otros videojuegos creados con este motor como Z-Type o Creatures and Castles.

Página oficial: Impact JS.

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Si por cualquier razón queremos empezar por un elemento diferente a uno (por ejemplo porque queramos continuar la lista anterior en otro punto del documento HTML), tenemos el atributo “start“, veamos un ejemplo de su uso:

4. Cuarto elemento
5. Quinto elemento

El código fuente sería:

<ol start="4">
	<li>Cuarto elemento</li>
	<li>Quinto elemento</li>
</ol>

Sin usar este atributo no podríamos haberlo hecho.

Si buscas un portal para aprender los estándares web, W3Schools es tu sitio. No sólo contiene excelentes tutoriales paso a paso de HTML, CSS y Javascript, sino que también dispone de sus correspondientes referencias, completas y actualizadas.

También existen tutoriales sobre otras tecnologías como XML, SQL, PHP, etc. Eso sí, en mi opinión se pueden encontrar mejores tutoriales.

El único fallo es que está inglés, pero el nivel es muy sencillo y fácil de comprender.

Enlace: W3Schools.

Cuando estás realizando aplicaciones HTML resulta fundamental insertar dicho código en una página web. Existen muchas maneras de hacerlo: con iframe, con embed, etc. Pero la recomendada por W3C es utilizando la etiqueta object:

Demostración

Código fuente de la demostración

Debido a mi afán de estas tecnologías, aquí os dejo Milokoban, el típico juego de empujar cajitas. Lo publiqué hace un año tanto en mi web como en Android y pongo a vuestra disposición el código fuente. La licencia es GPLv3. ¡Espero que os guste!

Juego:

Código fuente: milokoban.zip.

Android Market: Milokoban.

En Linux Hispano nos encantan los juegos creados en plataformas estándares y libres. Especialmente, por lo menos para mí, los creados en HTML y Javascript. Prueba de ellos son los pasados juegos como Angry Birds y Fred Jones.

En esta ocasión tengo el placer de presentaros Biolab Disaster, un excelente plataformas creado gracias a la etiqueta canvas de la nueva versión de HTML.

Es un plataformas donde manejas a un científico en busca de la salida. Por el camino encontrarás a mutantes que deberás eliminar, para hacer más difícil el juego puedes obtener todas las probetas de cada nivel. Aunque un poco corto, el juego es lo mejor que he visto hasta ahora usando dichas tecnologías. Espero que lo disfrutéis tanto como yo.

Juego: Biolab Disaster.

Como me gustan los juegos aquí os dejo uno que demuestra lo que se puede hacer ya programando en estos lenguajes. Si bien estas tecnologías aún les queda mucho camino para sustituir la potencia de Flash con respecto a las aplicaciones web, es un avance muy importante.

Los controles son el cursor izquierdo y el cursor derecho para moverse y espacio para saltar. Si no se mueve el personaje, pulsa con el botón izquierdo del ratón en el canvas.

Por ejemplo, podemos deshabilitar cómodamente nuestra conexión de datos móvil (esencial si no tenemos tarifa de datos contratada) y en caso de tenerla activada, las funcionalidades más importantes del sistema se encargan de no gastar datos tontamente.

¿Cómo? Sincronizando cada cierto tiempo y permitiendo modificar la frecuencia del refresco, limitando el número de bytes a descargar o refrescando sólo a petición del usuario. Esta política, tiene sus limitaciones, como por ejemplo que por defecto el visualizado de correos en formato HTML esté limitado por el cliente que tiene el sistema.

En realidad, no limita el visualizado de correos en formato HTML de forma explícita, sino que esta limitación es más bien una consecuencia de que está muy limitado el número de bytes a descargar por cada correo.

¿Cómo solucionarlo? Una vez dentro del cliente de correo hacemos lo siguiente:

1. Pulsando “Menú” y tras entrar en los “…”, elegimos “Ajustes”
2. Vamos a ajustes de “Enviar y recibir”
3. En “Tamaño máximo del correo” elegimos un tamaño que no indique “sólo texto”, con 50KB debe ser suficiente para la mayoría de los correos

Tras esta modificación ya tendremos solucionado este “problema”.

Que la quinta versión de HTML sea una novedad y que últimamente existan cientos de noticias al respecto es evidente, nos enfrentamos a una tecnología que actualmente es desconocida por muchos, no tanto en uso si no en desarrollo.

De hecho, esta no es la primera vez que hablamos sobre HTML5 en Linux Hispano, lo hemos hecho en multitud de ocasiones, os recomiendo daros una vuelta sobre nuestras entradas más populares al respecto:

• Crea tu primera página en HTML 5
• Cinco reproductores libres en HTML5
• ¿Por qué tanto interés en HTML 5?
• El futuro de la web: HTML 5 (este es una referencia a Ayuda WordPress)

Y en otra ocasión Nacho López ya comentó acerca de juegos arcade (los de toda la vida) desarrollados con JavaScript sobre HTML5. Pero ahora os presento un directorio bastante completo de juegos desarrollados en HTML5, divididos en diversas categorías y con un sistema de valoraciones, echad un vistazo por HTML5games y ya nos contaréis que os parece.

Ya sabéis de mi deleite por los productos de Google, en concreto Gmail mi preferido, así que mi juego preferido: Galactic Inbox (un shotter que demuestra la potencia de HTML5).

Es de todos bien sabido que HTML5 se va a imponer en la Web durante los próximos años. Siendo así, seria buena idea ir adaptado nuestras necesidades e ir orientándolas hacia el uso de este estándar, en esta ocasión os presentamos cinco reproductores de vídeo en HTML5 libres, para usarlos cómo queramos.

1. Mediafront. Solución abierta (GPLv3) que incluye el reproductor Open Standard Media (OSM), que puede ser usado de forma gratuita en cualquier sitio web.
2. JME. Kit de desarrollo para audio y vídeo en HTML5, usa las librerías DOM-API. Bastante intuitivo.
3. Flare Video. Gratuito para uso comercial, podemos personalizarlo con CSS/HTML/JS.
4. Projekktor. Este fue el que en su día presentamos en Linux Hispano como uno de los primeros lanzamientos. Muy limpio y sencillo de usar, hecho con JS.
5. Video JS. Su título lo evidencia, hecho también con JS. Un reproductor bastante sencillo y fácil instalación.

Algunas de las nuevas etiquetas son análogas a <div> y <span>, pero tienen un significado semántico, como es el caso de  <nav> (que es el bloque de navegación del sitio web) y <footer> (el pie de página).

Nos podemos encontrar además, con nuevos elementos que proporcionan funcionalidades anteriormente implementadas por otras vías (como por ejemplo Macromedia Flash), estos son <audio> y <video>, y habrá que esperar que codificación utilizará cada navegador en tal caso. También podemos destacar el elemento <canvas> y cómo algunos de los elementos de HTML 4 quedan obsoletos en pros del uso de CSS, como son las etiquetas <font> y <center>.

Las reglas CSS a incluir son las siguientes (rotación de -90º o 270º):
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

El tip original ha aparecido en unos de mi blog favoritos de diseño web, Gloobs.