() translation by (you can also view the original English article)
¿Quieres codificar juegos en JavaScript y HTML5? ¡Estás de suerte! Vivimos en una increíble época que es favorable para cualquier desarrollador de juegos HTML y JavaScript, así como para aquellos que aspiran a aprender cómo codificar juegos también.
La era de Flash ha quedado atrás, y esto ha abierto el camino a docenas (¡tal vez cientos!) de diferentes motores, bibliotecas y variantes de lenguajes web comunes.
HTML5 y JavaScript han tomado el control rápidamente, impulsando la creación de innumerables códigos de juegos en la web.
Ahí es donde son importantes las plantillas de HTML y JavaScript para juegos de navegador.
Los motores de juegos HTML y JavaScript más vendidos de 2022 en CodeCanyon
CodeCanyon es una de las mejores fuentes de motores y plantillas de HTML para juegos de calidad profesional, y también cuenta con innumerables scripts y herramientas. Si deseas probar tus habilidades en la creación de códigos de juegos HTML y juegos JS, descarga uno de estos motores y plantillas de HTML y JavaScript. Una plantilla con código de juego para descargar viene con funcionalidad y diseños listos para ser usados. Todo el tardado proceso de programación ha sido realizado por ti, así que puedes centrarte en diseñar juegos divertidos.
Más de 10 de los mejores motores y plantillas para juegos HTML y JavaScript
Algunas de estas plantillas de HTML y JavaScript son solo eso, plantillas, mientras que otras están cerca de ser conceptos completos, con códigos de juegos para descargar, o motores flexibles para juegos. Ya sea que estés buscando algo para tu sitio web o aprendiendo cómo codificar juegos para desarrollar tu propia idea, puedes ver claramente cuán diversas pueden ser las plantillas de HTML y JavaScript para juegos.
Por ahora, echemos un vistazo a los principales motores, plantillas de juegos HTML y juegos en JavaScript disponibles en CodeCanyon.
1. Canvas Puzzle: Juego HTML
Canvas Puzzle fue el primero de los juegos HTML en Envato Market. El concepto es simple, pero puedes mejorarlo fácilmente para obtener un resultado completo si sabes cómo codificar juegos. Compatible con todos los navegadores modernos, esta plantilla de HTML con código de juego para descargar puede usarse en Internet Explorer 9 o versiones previas. Además, también funciona bien en los iPads más actuales.
Los usuarios pueden utilizar cualquier imagen (simplemente deben arrastrar y soltar en Firefox y Chrome) y el juego genera cualquier cantidad de piezas diferentes.
Canvas Puzzle es un juego HTML limpio, ligero, simple y está listo para que lo personalices a tu gusto.
2. Slot Machine: The Fruits
Slot Machine: The Fruits es un juego optimizado tanto para dispositivos móviles como para computadoras de escritorio e incluye imágenes de alta calidad que admiten una resolución de hasta 1500 x 640. Viene con código fuente de juegos de casino en HTML5.
Esta colorida aplicación fue desarrollada con códigos de juegos HTML5, JavaScript y con la biblioteca CreateJS.
Los juegos en JavaScript y HTML creados con la plantilla Slot Machine: The Fruits se pueden instalar utilizando el plugin de WordPress CTL Arcade.
3. BlackJack 3D: Juego HTML
BlackJack 3D en HTML5 tiene todas las características que esperarías encontrar en un juego de blackjack realista: mano dividida, apuesta doble y seguro. Pero la mejor parte es su estilo gráfico en 3D de alta resolución.
Este código de juego para descargar ha sido desarrollado con HTML5, JavaScript y CreateJS. Es muy personalizable y está listo para jugarse.
Además, puedes instalar BlackJack 3D en HTML5 con el plugin de WordPress CTL Arcade.
4. 3D Roulette: Juego en JavaScript y HTML5
Al igual que la plantilla de juego HTML BlackJack 3D, el juego de casino 3D Roulette en HTML5 tiene una magnífica apariencia 3D en alta resolución. También fue desarrollado utilizando HTML5, JavaScript y CreateJS.
Si quieres aprender cómo codificar juegos con apariencia 3D, puedes modificar 3D Roulette fácilmente con su código de juego para descargar simplemente editando los archivos de Photoshop e Illustrator. El código fuente de este juego en JavaScript y HTML también se puede instalar directamente en WordPress utilizando el plugin CTL Arcade.
5. Indiara and the Skull Gold: Código de juego para descargar
Al igual que muchas de las otras plantillas de HTML y JavaScript con códigos de juegos, Indiara and the Skull Gold funciona en todas las plataformas.
¿Estás listo para emprender una aventura recolectando artefactos antiguos en cuevas llenas de trampas?
Esta fantástica plantilla de juego JS y HTML incluye:
- Ocho niveles
- Archivos de Construct
- Archivos de Photoshop e Illustrator en capas
- Y más
Indiara and the Skull Gold es totalmente compatible con el ratón y con los dispositivos táctiles, incluye botones para compartir en redes sociales y puedes personalizarlo visualmente intercambiando los archivos de imagen o modificarlo completamente con Construct.
6. The Sorcerer: Juego JS y HTML
Disfruta de la magia de las plantillas con códigos de juegos JS y HTML utilizando The Sorcerer. Esta versión se inspiró en la jugabilidad de Zuma e incluye tres niveles progresivos diferentes.
Fue desarrollado con HTML5, JavaScript y CreateJS.
La resolución de 960 x 540 es escalable para ajustarse y se puede usar con el plugin CTL Arcade de WordPress. Personaliza The Sorcerer ¡y comienza a hacer magia en un rompecabezas!
7. Katana Fruits: Juego en JavaScript y HTML
Aprende cómo codificar juegos y conviértete en el próximo ninja rebanando frutas con Katana Fruits, una plantilla altamente personalizable.
Esta plantilla de HTML para juegos fue desarrollada con los siguientes lenguajes:
- HTML5
- JavaScript
- CreateJS
Puedes editar su apariencia con los archivos incluidos de Photoshop e Illustrator e instalarla directamente en WordPress utilizando el plugin CTL Arcade.
8. Bubble Shooter: Juego JS y HTML
Bubble Shooter me recuerda mucho a Snood y otros juegos como ese. Se trata de un juego en JavaScript y HTML, simple y adictivo, que se puede instalar tal y como es o puedes modificarlo a tu gusto si sabes cómo codificar juegos.
Esta plantilla de HTML para juegos viene en una resolución de 870 x 1504, es totalmente responsiva y se puede modificar fácilmente utilizando los archivos de Photoshop e Illustrator incluidos.
Este juego ha sido desarrollado con HTML5, JavaScript y CreateJS, está listo para jugarse y se puede instalar directamente en WordPress utilizando el plugin CTL Arcade.
9. Jumper Frog: Juego HTML
Construido en HTML5, JavaScript y CreateJS, este título incluye su código fuente completo y está listo para ser personalizado. Esta combinación lo convierte en una opción ideal para aprender cómo codificar juegos, puedes usarlo como base para tus propios proyectos o como un buen inicio para un proyecto de aplicación.
También tendrás a tu disposición archivos PSD y Adobe Illustrator por separado para facilitar la personalización.
10. Don't Crash: Plantilla de HTML
No choques. ¡Eso es todo! Suena fácil, pero esta fascinante plantilla de HTML para juegos te mantendrá adivinando. Don't Crash incluye archivos de Construct. Es totalmente responsivo y tiene soporte para dispositivos táctiles con una resolución de 1280 x 720.
Y nunca lo olvides: ¡no choques!
11. Juego FlapCat Steampunk
El juego FlapCat Steampunk está basado en aplicaciones similares de gran éxito con su diseño y jugabilidad simples. Disfruta de este juego compatible con el ratón y los dispositivos táctiles en una resolución completa de 1280 x 720.
Este código de juegos incluye niveles infinitos, archivos de Construct, archivos de Photoshop e Illustrator en capas, ¡y más!
FlapCat Steampunk tiene un gran estilo artístico y está listo para jugarse o personalizarse.
12. Ultimate Swish: Juego HTML de deportes
¿Quieres añadir algunos tiros de larga distancia a tu próximo proyecto? Ultimate Swish te proporciona el framework para hacer precisamente eso.
Ultimate Swish tiene un ciclo de juego corto y adictivo que podría ampliarse para convertirse en un juego completo, o bien, personalizarse para adaptarse a tu proyecto actual.
El juego está basado en HTML5, JavaScript y CreateJS, con todo el código fuente incluido, por lo que es fácil ver cómo funciona ¡y comenzar a personalizarlo en poco tiempo!
13. Panda Love: Juego HTML
En sus marcas, listos, ¡fuera!
Este veloz panda necesita ser guiado por encima de los obstáculos para recoger los premios y terminar cada uno de los más de 20 niveles del juego.
Esta plantilla incluye archivos de Construct y las siguientes características: guardado automático, compatibilidad para anuncios y control con un solo toque. Demuestra un poco de tu amor por los píxeles con Panda Love.
14. Juego Christmas Furious
La plantilla de HTML Christmas Furious con código de juego para descargar trae consigo mucha diversión en todas las plataformas por su compatibilidad con el ratón y los dispositivos táctiles.
Incluye seis niveles, archivos de Construct, archivos de Photoshop e Illustrator en capas y más.
Un grupo de globos invadieron el Polo Norte: ¿podrá Santa atrapar todos los regalos y evitar los globos? La plantilla de HTML Christmas Furious está lista para que juegues o para que la transformes en tu propia creación.
Si todavía estás buscando la plantilla o el motor de juegos perfecto, CodeCanyon tiene mucho más para elegir. Puedes encontrar otra magnífica lista de plantillas HTML5 y motores de juegos aquí, ¡además de consejos sobre cómo establecer una conexión con tu audiencia y crear un increíble avance en video para juegos!
5 juegos en JavaScript y HTML de código abierto
La siguiente es una selección de plantillas y motores de código abierto que puedes usar para crear códigos de juegos a los que los usuarios puedan acceder en sus navegadores. Puedes descargar el código fuente con facilidad en tu computadora y modificarlo de acuerdo con tus requisitos. Luego puedes ejecutar los juegos en tu navegador e incluso distribuirlos.
Canvas Tetris: Código de juego para descargar en HTML y JavaScript
Canvas Tetris es perfecto para los desarrolladores principiantes que quieran comprender los conceptos de los juegos en 2D. Fue construido usando HTML5 y JavaScript. Estudiar cuidadosamente el código fuente del juego te ayudará a progresar con tus habilidades de desarrollo.
¡Descarga el código fuente gratis en GitHub!
MelonJS
MelonJS es un framework y un motor de juegos muy ligero. Puedes crear juegos que solo necesitarán un navegador web HTML5.
Pixel Defense: Juego JS y HTML
Este juego HTML5 y JavaScript está basado en el género de la defensa de torres. El código fuente está disponible en GitHub, así que puedes aprender cómo se desarrolló. Solo necesitas comprender cómo funcionan HTML5 y JavaScript.
Quantum Game: Juego en JavaScript y HTML
Quantum Game tiene los siguientes componentes: fuentes de fotones para emitir partículas de fotones, una roca que actúa como un obstáculo, un espejo que desvía la partícula de fotones y un detector de fotones que recibe la partícula.
Tu objetivo es acomodar el espejo de manera que una partícula de fotones emitida por la fuente evada las rocas y llegue al detector.
El juego fue desarrollado utilizando HTML5, CSS, JavaScript y plugins de sonido. Tiene un diseño simple y puedes jugarlo en tu navegador. ¡Y el código fuente está disponible de forma gratuita en GitHub!
2048
2048 está basado en el juego 1024. Para jugarlo, debes usas tus teclas de flecha para mover los tiempos. Cuando dos mosaicos con el mismo número se toquen, estos se fusionarán en un solo mosaico. Este juego está escrito usando HTML5, CSS3 y JavaScript.
Puedes descargar el código fuente en GitHub.
¿Por qué deberías usar una plantilla de HTML para juegos?
Crear códigos de juegos es difícil. Con diversos conjuntos de habilidades anidados en un complejo paquete, puede ser difícil comenzar todo un proyecto desde cero.
Para los principiantes en el proceso de cómo codificar juegos, el uso de una plantilla puede ayudar a llenar los vacíos en sus habilidades, por ejemplo en aspectos relacionados con la interfaz de usuario o el diseño gráfico, dando una idea del funcionamiento detrás de un juego terminado. Esta es una excelente experiencia de aprendizaje y te ayuda a finalizar tu primer par de proyectos sin sentirte demasiado abrumado.
Los programadores experimentados también pueden encontrar muchos usos a estas plantillas. Pueden ayudar a construir la estructura de un juego más grande o actuar como base para un nuevo proyecto, reduciendo la necesidad de escribir código repetitivo para cada nuevo juego que hagas.
Diseño de juegos en línea
Digamos que tienes una idea para un juego en línea, o varios. Pero, ¿cómo puedes empezar a crear uno?
Es posible crear códigos de juegos desde cero. Para esto, se requiere que tengas conocimientos de programación. Si no sabes cómo codificar puedes usar plantillas, ¡hay miles de ellas!
Pero de cualquier manera, debes contar con un plan. Debes tener una descripción básica y detallada de:
- ¿Qué tipo de juego quieres crear?
- ¿De qué se trata tu juego?
- ¿De qué género será?
- ¿Para qué plataforma: es un juego móvil (iOS o Android) o un juego de escritorio (Windows o Mac)?
- ¿Cómo quieres que se vea?
- ¿Qué características visuales quieres incluir?
Además, algunos programas de diseño de juegos te permiten crear juegos con funciones de arrastrar y soltar, ¡sin siquiera saber cómo codificar!
Entre los programas de creación de juegos que cuentan con funciones de arrastrar y soltar se encuentran los siguientes:
Todas estas plataformas tienen versiones gratuitas que te brindan la posibilidad de publicar en la web, pero tendrás que pagar por ediciones profesionales si quieres que te permitan crear juegos para dispositivos móviles.
Motores de juegos basados en texto
El software de diseño de juegos más básico permite que los principiantes absolutos sin experiencia en codificación puedan crear juegos basados en texto. Quest es el software perfecto para principiantes, al igual que Twine.
Crea juegos 2D sin codificación
Para crear juegos 2D puedes usar Stencyl, Game Maker o Construct 3. Estos son ideales para los principiantes, no es necesario tener experiencia en codificación y cuentan con interfaces que permiten funciones de arrastrar y soltar.
Cómo elegir un programa de diseño de juegos
- Elige un programa que publique en HTML5 y que esté orientado a publicar juegos HTML en navegadores móviles. No querrás perder a los usuarios de dispositivos móviles.
- Si quieres ganar dinero diseñando y creando códigos de juegos, piensa en los programas que vienen con recopilación de datos del usuario final y con opciones de monetización.
- Debe ser fácil de usar y venir con una extensa documentación y tutoriales.
- Debería tener acceso a una sólida comunidad de usuarios que compartan conocimientos técnicos.
- También debe venir con una abundante biblioteca de imágenes y música de stock.
Publicación y distribución de tu juego
Opción 1: Distribuye y aloja tu juego de forma independiente
Para distribuir de forma independiente, necesitarás un servicio de alojamiento con una infraestructura confiable que pueda gestionar una gran cantidad de tráfico y que también permita que el sitio web de tu juego esté disponible a velocidades increíblemente rápidas. Por supuesto, tendrás qué pagar mucho en tarifas de alojamiento. También deberás crear y administrar una activa comunidad en línea para que tu proyecto resulte lucrativo.
Opción 2: Delega el alojamiento y la distribución a una plataforma de juegos
Las plataformas ofrecen una audiencia inmediatamente disponible a través de sus activas comunidades integradas. Ten en cuenta que cobran tarifas de envío por cada juego. También cobran un porcentaje por cada venta.
Para delegar el alojamiento y la distribución, puedes utilizar las siguientes plataformas:
- Android: La Google Play Store o la Amazon Appstore
- iOS: La App Store
- Aplicaciones de escritorio y móviles: Steam, Game House, Gamers Gate, Humble Bundle, Kongregate, Gog, Itch.co
Comienza a crear tu juego HTML y JavaScript hoy mismo
Estas plantillas HTML5 y JavaScript para juegos son solo una pequeña selección de los cientos que tenemos disponibles en CodeCanyon, por lo que, si ninguna de ellas se ajusta del todo a tus necesidades, hay muchas otras excelentes opciones de entre las que puedes elegir.
Posiblemente también te resulte útil un tutorial de código de Envato Tuts+ sobre el diseño de juegos, su mecánica y su desarrollo, o incluso un tutorial de HTML5 para aprender cómo codificar juegos propios.
