Todo lo que tu página web necesita

Como insertar Juegos en HTML (en tu web)

Webnode

Hola, hoy te voy a enseñar como poner juegos en tu pagina web, ya sea por que quieres crear un sitio de juegos online, o simplemente es para poner un poco de entretenimiento adicionl.

Te mostrare una pagina en donde podras encontrar muchos juegos gratuitos pero ademas que te proporciona el código HTML de estos para insertarlos en tu sitio web.

Lo mas importante es que son juegos basados realmente en HTML5, nada de Flash. Creados de hecho con un programa de desarrollo visual 2D llamado “Construct 2”.

A continuación mostrare el procedimiento para insertar uno, como suele suceder no son necesarios precisamente conocmientos en programación.

Tampoco importa el CMS que ocupes, pues ka mayoria de estos permite incrustar scripts HTML sin problemas.

1. Ve a la página de juegos (Scirra Arcade)

 

Juegos HTML

Lo primero que tienes que hacer es ingresar a la colección Arcade de la plataforma Scirra.

Entrando observaras el gran repertorio de juegos que ofrece, todos ordenados por categoria. Cabe recordar que son desarrollos en su mayoria de usuarios y su talento.

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 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 lo mas importante es que pienses en los intereses de tus visitantes.

MIra:  Como Elegir el CMS Perfecto para tu sitio web

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.

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.

MIra:  Como diseñar un banner HTML - Online y gratis

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

¿Cuantos juegos puedes poner?

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

¿Que hay de los derechos de autor?

Estos juegos son de libre distribuición pues estan bajo una licencia “Crative Commons” y se encuentran en un repositorio oficicial, no te preocupes.

Espero este articulo haya sido lo que buscabas, si fue asi puedes compartirlo en redes sociales, gracias.

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.

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 JavaScript

Si tienes conocimientos en programación web puedes hacer algo increible.

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.

El JavaScript hace la diferencia entre las páginas web muertas 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 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.

MIra:  Como poner un traductor HTML en tu web

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.

Desarrollar juegos HTML5 con un entorno visual

¿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.


Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *