Todo lo que tu página web necesita

Colección de Juegos en HTML | Para tu web o blog

Juegos HTM5 para tu web

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.

El mundo de los juegos web ha evolucionado en gran medida, todos en algun momento visitamos esos sitios de Juegos Online con los que nos divertiamos un buen rato.

Pues bien, dichos juegos desde el lado de desarrollo, pasaron de emplear como estandar la tecnologia Flash a estar inplementados en HTML5, sin perder calidad, de hecho mejorando su usabilidad en general.

Los juegos HTML5 son el futuro, su desarrollo y distribución se ha vuelto mas eficiente y siguen siendo igual de adictivos.

¿Donde encontrar juegos HTML5?

– En Scirra Arcade

– En CloudGames

– En HTMLGames.com

Probablemente el mejor lugar de juegos HTML es el “Scirra Arcade”, al que puedes acceder en el siguiente enlace:

Esta colección pertenece a la plataforma de desarrollo de videojuegos 2D “Construct2”, que practicamente permite crear juegos de cualquier tipo, de manera totalmente visual, sin la programacíon directa en código.

Ha ganado mucha popularidad por su increible flexibilidad y facilidad de uso, te invito a que la conozcas en el siguiente video:

Quiere decir que todos los juegos que veas en el “Scirra Arcade” estan desarrollados por pequeñas empresas o por talentosos desarrolladores individuales.

Por lo que al probar y poner en tu web sus juegos estas apoyando el trabajo y esfuerzo que han dedicado para lanzar esos increibles titulos.

Al no ser juegos Flash, sino HTML5, no perjudican tanto la experiencia de usuario de tu sitio web. Pero igualmente recuerda que no estan optmizados para dispositivos moviles.

A continuación mostrare el procedimiento para poner uno en tu sitio web, como suele suceder no son necesarios conocmientos en programación y tampoco importa el creador web o CMS que ocupes, pues ka mayoria de estos permite incrustar scripts HTML sin problemas.

Ejemplos de juegos HTML de esta plataforma

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

1. Ve al centro de juegos mencionado

 

MIra:  Relojes HTML para tu blog o web - De todo tipo | Gratis

Estando dentro observaras el gran repertorio de juegos que ofrece, todos ordenados por categoria y con la posilibad de hacerlo tambien en base a la fecha de publicación o al rating de los jugadores.

Cada uno te ofrece una portada en miniatura y al pasar el cursor se muestra una pequeña decripción y su valoración en estrellas. Por defecto te apareceran los juegos mejores rankeados.

2. Encuentra y selecciona el juego que quieres

Esta colección esta creciendo enormemente, seguro hayaras muchos titulos de tu agrado. Lo mejor es que cada uno recibe actualizaciones constantemente, por lo que no son juegos estaticos.

Explora tus categorias favoritas, pero sin duda lo mas importante es que pienses en los intereses de tus visitantes.

Tambien es impresindible que tomes en cuenta la tematica y el proposito de tu web. Trata de no salirte mucho de contexto con algo como esto.

3. Copia su código HTML

Una vez que te interese uno, dale click y dentro de la página del juego ve a los iconos que se encuentran en la parte superior, a lado de las estrellas.

Dale click al de la cadena o vinculo, es el que al pasar el cursor te muestra un mensaje que dice “Link to this Game”.

Se abrira un cuadro con algunos códigos HTML, copia el primero, que es el universal, para cualquier creador web.

Trata de no modificar ningun caracter puesto que puedes hacer que no funcione el juego. De todas maneras deja pa ventana abierta, por si requieres copiar de nuevo el código.

Este es un ejemplo:

<!-- Scirra Arcade Embed for 'Super Mario Demo'. -->
<div style="display:inline-block;text-align:center;">
 <iframe style="width:980px;height:550px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://games.scirra.net/games/5697/635935434353670000/play?utm_source=ScirraWebsite&utm_medium=EmbedIframe&utm_campaign=ScirraArcade"></iframe>
 <!-- Please don't remove this! -->
 <p style="font-size:12px;">Hosted by the <a href="https://www.scirra.com/arcade/adventure-games/super-mario-demo-5697" target="_blank" title="Addicting games">Scirra Arcade</a></p>
</div>

4. Ponlo en tu página web

Una vez copiado simplemente ve al editor de tu web y pegalo exactamente donde quieres que se muestre el juego, intenta no hacerlo en la “home” o portada.

MIra:  Weebly | Widget - Contenido en todos los posts de tu blog

Si no sabes como insertarlo 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 que aunque son HTML5 no son elementos optimizados para moviles por lo que solo funcionarian en la versión “escritorio” de tu sitio.

Bueno, pronto añadire mas sitios similares como el anterior, si encuentras uno, no olvides mencionarlo en un comentario.

¿Cuantos juegos puedes/debes poner?

La verdad es que los que quieras, sin embargo, por el tiempo de carga te recomiendo no poner mas de uno por post o página.

Al final de cuentas algo de lo mas importante en tu página web 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 juegos son de libre distribuición pues estan bajo una licencia “Crative Commons” que deja claro que se puede publicar en sitios web externos con el simple hecho de mantener visible a los autores originales y no usarlos con fines comerciales.

Ademas, se encuentran en un repositorio oficial, osea que la empresa “Scirra” es la que permite y esta avisada de estos procedimientos, no te preocupes por este aspecto.

Códigos HTML de Juegos Flash

Si sigues siendo fanatico de los juegos Flash, tambien existe la posibilidad de insertarlos en tu sitio, recordando que son aun mas perjudiciales para la experiencia de usuario y la optimización movil.

Una de las mejores páginas para hacerlo es Games68, ahi tambien contraras infinidad de buenos titulos y el código HTML de cada uno de estos.

Crear juegos sencillos con HTML + JavaScript

Si tienes conocimientos en programación web puedes hacer algo increible en cuanto a juegos HTML.

Gracias a los lenguajes de desarrollo web tenemos infinitas posibilidades para crear. Basta comentar que solo con estas tecnologias podemos hacer hasta un juego en verdad divertido.

MIra:  Popup con Me gusta (Facebook) - Para tu web o blog

El JavaScript hace la diferencia entre las páginas web aburridas y las que proporcionan algun tipo de interacción y que mejor que intentar recrear un juego como el llamado en ingles “Tic Tac Toe” o “Gato” en paises como México.

Este y otros juegos son posibles de desarrollar, a continuación te los muestro enlazados su tutorial de realización.

Tres en linea (Un jugador)

El clasico 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 imagenes por lo que su desarrollo es un poco mas compliado. Aun asi vale la pena pues no utiliza librerias, tambien lo podemos encontrar en CodePen.

Buscaminas

Tambien 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 unico. Checalo.

Breakout (Usa muchas imagenes)

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.

Si quieres aprender generalmente a desarrollar juegos con Javascript puedes inscribirte tambien a este curso gratuito.

¿Recuerdas el programa que mencione al principio del artículo? Puedes ocuparlo para crear juegos basados en HTML5 pero sin meterte directamente con el código fuente. Aun asi no deja de ser complicado.

Visita la página de Scirra para probar el demo del programa.

Bueno finalmente, espero que este post te haya sido de utilidad, si fue asi, no olvides compartirlo, muchas gracias.