Hola, hoy te voy a enseñar como poner juegos en tu pagina web basados en HTML5, mediante códigos simples que solo necesitas copiar y pegar.

Todos en algún momento visitamos esos sitios de Juegos Online con los que nos divertíamos un buen rato.

Desde el lado de desarrollo, estos pasaron de emplear como estándar la tecnología Flash (que hoy solo vive en nuestros recuerdos) a funcionar totalmente con HTML5. Sin perder calidad, de hecho mejorando toda su usabilidad.

Los juegos en HTML5 ahora se han vuelto un fenómeno, ya que son capaces de ser jugables tanto desde una PC de escritorio como desde un dispositivo móvil con tan solo el navegador.

Ademas su integración en una página web es tan sencilla que cualquiera la puede hacer, quédate y no olvides compartir este contenido.

¿Donde encontrar juegos HTML5?

Existen varias plataformas de estos en formato HTML5 que están empezando a ganar popularidad, algunas de ellas por ser prácticamente una comunidad, te las enseño a continuación.

– En Cloud Games

Cloud Games es una network de distribución de videojuegos HTML5 en donde puedes encontrar un portafolio de un gran número de títulos profesionales, desarrollados por expertos en la industria.

Lo que hace esta plataforma es reclutar desarrolladores de calidad, conocer sus trabajos, convertir estos en rentables y distribuirlos en sitios web potenciales.

Entre los sitios web con los que colabora se encuentra «MiniClip», «OrangeGames», «Minijuegos» y Poki», todos estos reconocimos a nivel mundial.

Su sistema de anuncios es increíble, ya que estos son prácticamente también juegos (los llama «playable ads», por lo que su CTR suele ser altísimo.

Ejemplo de uno de sus juegos:

¿Como insertar los juegos en Blogger, Wix, etc?

1. Ve al portafolio oficial de CloudGames

Estando dentro observaras el gran repertorio de títulos que ofrece, todos de alta calidad, por defecto se encuentran ordenados por fecha de publicación en orden descendente.

Se te proporciona un buscador a la mano y selectores de filtros para definir si quieres descubrir juegos de acuerdo a una categoría (son 24) o mejor aun, a un audiencia objetivo.

2. Encuentra y selecciona el juego que quieres

Esta colección crece enormemente, así que seguro hallaras muchos títulos de tu agrado. Explora todas las categorías y prueba los juegos que quieras haciendo clic en «Play Game» para empezar a elegir.

Recuerda que algo de lo mas importante es que pienses en los intereses de tus visitantes, que al final serán los que interactuarán con el juego.

También es imprescindible que tomes en cuenta la temática y el propósito de tu web. Trata de no salirte mucho de contexto al seleccionar.

3. Copia su código HTML

Una vez que te interese uno, entre los tres botones amarillos que hay debajo las imágenes de portada, haz clic sobre el que dice «Embed».

Te aparecerá una pequeña ventana emergente que contiene el código HTML del juego escogido, lo único que tienes que hacer es copiarlo.

4. Ponlo en tu página web

Una vez copiado simplemente ve al constructor de tu web y pega el código exactamente donde quieres que se muestre el juego, es recomendable no hacerlo en la «home» o portada.

Si no sabes realmente como insertarlo, no te preocupes, te dejo este post en donde muestro como poner un widget de este tipo en los creadores web mas famosos como Wix, Blogger y JIMDO.

Recuerda no poner más de un juego en una página, mas que nada por cuestiones de «Experiencia de usuario».

– En Scirra Arcade

Se trata de una colección perteneciente a la plataforma de desarrollo de videojuegos 2D «Construct2». Esta ultima permite crearlos, de manera totalmente visual, sin la programación directa en código.

Ha ganado mucha popularidad por su increíble flexibilidad y facilidad de uso y ofrece un lugar en la que sus usuarios publican sus mejores entregas.

Quiere decir que todos los títulos que veas en el «Scirra Arcade» están desarrollados por pequeñas empresas o por talentosos desarrolladores individuales.

Por lo que al probar y poner en tu web sus lanzamientos, estas apoyando el trabajo y esfuerzo que han dedicado para lanzar esos increíbles títulos.

Tutorial:

Ve a la página del juego que quieres y después a los iconos que se encuentran en la parte superior, a lado de las estrellas de valoración

Dale clic al de la cadena o vinculo (el que al pasar el cursor te muestra un mensaje que dice «Link to this Game»).

Se abrirá un cuadro con algunos códigos HTML, copia el primero, que es el universal y pégalo en tu web como se indico con la anterior plataforma.

En HTMLGames.com

Este sitio como su mismo nombre lo indica, se encarga de ofrecer videojuegos basados en HTML5, la cosa es que son especializados en solo algunas categorías.

Encuentras mas que nada del tipo «Mahjong» y «Solitario», pero aun así ya esta empezando a lanzar de otro estilo.

Según entiendo, su equipo mismo se encarga de desarrollarlos y la verdad es que hacen un trabajo, aunque al sitio aun le falta para estar al nivel de las primeras dos opciones sin duda va por buen camino.

Y como era de esperar, permite que cualquier webmaster publique sus juegos en su página web libremente.

Tutorial

Una vez que tengas en mente cual vas a elegir, tan solo debes hacer clic sobre su imagen y después en el botón que dice «<embed>», se abrirá un popup.

Dentro del popup copia el primer código que aparece y pégalo en tu página web con las indicaciones de la primera plataforma mencionada.

El otro código que se muestra es un script directo y el ultimo es el de la imagen, son opcionales y/o alternativos.

Más plataformas con códigos de juegos HTML5

• SpilGames

Se trata de una network nacida en 2001 que actualmente so consolida como la empresa líder en distribución de juegos HTML5. Para conseguir sus códigos solo debes ir al enlace, escoger un juego y hacer clic en «Get Link».

• MiniClip

El famoso sitio «MiniClip». ganador de los premios «Weeby», se establece como uno de los sitios de juegos online mas reconocidos de todos los tiempos. Permite insertar estos con el botón «Enbed + Nombre del juego».

• Y8

Es otra conocida plataforma de juegos online, lo mejor de si misma es que permite incorporar cada uno de estos, tan solo tienes que ir a la página del juego deseado y hacer clic en «Add this game to your web page!».

• FreeWorldGroup

Es un un sitio menos visitado, pero que igualmente ofrece títulos de gran calidad, tanto en Flash como en HTML5. Para incrustarlos, ve al enlace, copia el código deseado y pégalo en tu sitio web en donde quieras mostrarlo.

• Kiz10

Kiz10 es un espacio del mismo tipo que esta empezando a ganar bastante popularidad, puedes insertar la gran mayoría de sus lanzamientos en tu web, yendo a la sección de «Free HTML5 Mobile Games» y haciendo clic en «Embebed code».

¿Cuantos juegos puedes/debes poner?

Prácticamente los que quieras,. Sin embargo, para no arruinar el tiempo de carga de tu web, te recomiendo no poner mas de uno por post o página.

Al final de cuentas algo de lo mas importante en tu sitio es la experiencia de usuario («UX» por sus siglas en ingles), que puede verse afectada por este tipo de complementos si no se emplean adecuadamente.

¿Que hay de los derechos de autor?

Estos trabajos son de libre distribución, así lo especifican las plataformas misma mencionadas aquí. Claro, en la mayoría de casos bajo una licencia que no permite hacerlo con fines comerciales y a la cual nunca esta de mas que le eches un vistazo.

Códigos HTML de Juegos Flash

Si sigues siendo fanático de los clásicos juegos Flash, también existe la posibilidad de insertarlos aun en tu sitio, asumiendo la consecuencia de que son aun mas perjudiciales en cuanto a optimización móvil.

Una de las mejores páginas para hacerlo es Games68, ahí también encontraras infinidad de buenos trabajos y el código HTML de cada uno de estos.

Crear juegos sencillos con HTML5 + JavaScript

Si tienes conocimientos en programación web, especialmente en JavaScript, puedes hacer algo increíble relacionado con todo esto.

Gracias a los lenguajes de desarrollo web se pueden crear funcionalidades prácticamente sin limites. Si eres alguien curioso y creativo podrías intentar hacer un juego sencillo pero realmente divertido.

El JavaScript hace la diferencia entre las páginas web aburridas y las que proporcionan algún tipo de interacción y que mejor que intentar recrear un juego como el llamado en ingles «Tic Tac Toe» o «Gato» en países como México.

Este y otros juegos conocidos son posibles de desarrollar de forma no tan complicada, a continuación te los dejo enlazados su tutorial de realización.

Tres en linea (Un jugador)

El clásico juego que todos conocemos. Intenta ganarle al algoritmo JavaScript, para ponerlo en tu web tan solo hace falta añadirle el código que aparece en esta página.

Tres en linea (Multiplayer)

El mismo, pero con un mejor diseño usando un poco de CSS y con la posibilidad de tener dos jugadores. Gracias a la plataforma CodePen puedes probarlo mientras aprecias todo su código fuente.

El Ahorcado

Este incluso utiliza imágenes por lo que su desarrollo es un poco mas complicado. Aun así vale la pena pues no utiliza librerías, también lo podemos encontrar en CodePen.

Buscaminas

También un juego como este se puede desarrollar. Esta basado en HTML5 con JavaScript y te permite descargar todo el código fuente en un archivo único. Checalo.

Breakout (muchas imágenes)

La verdad es que este me impresiono, es un desarrollo un poco mas complejo, pero sigue funcionando con JavaScript puro. Vale la pena darle un vistazo a su tutorial.

Tetris

El legendario «Tretis» con JavaScript. He hallado un articulo del sitio «CodeinComplete» en donde se explica detalladamente como desarrollarlo y se ofrecen los recursos necesarios.

Concentración

Un juego bastante adictivo. Gracias a la plataforma de cursos y tutoriales de informática «MakeSchool» puedes inscribirte a una guía gratuita que te da el procedimiento de realización paso a paso.

Memory

El clásico juego de «Memoria» puede ser fácilmente desarrollado con JavaScript, el usuario «Wate Wiley» dentro de la plataforma CodePen ha puesto un demo, junto con el código fuente.

Sodoku

Si, este famoso juego matemático también puede ser recreado con JavaScript y sin usar imágenes. Puedes ver el ejemplo que realizo un usuario llamado «Mustafa Enes » aquí.

Ese ha sido el ultimo. Por si acaso te interesa aprender a desarrollar juegos en código Javascript extendidamente, puedes inscribirte a este curso gratuito.

Igualmente puedes conocer mas sobre el programa para crear juegos basados en HTML5 «Construct2» si también te interesa, te dejo su página web oficial.

Bueno eso ha sido todo, espero que este post te haya sido de utilidad, si fue así no olvides compartirlo, muchas gracias y hasta la próxima.