Cómo crear un juego para el navegador, de la idea al enlace

Cómo crear un juego sencillo para el navegador con IA: elegir una idea pequeña, el prompt, probarlo en la vista previa, ajustar la dificultad y compartirlo con un enlace.

25 de octubre de 20263 min de lectura

Para saber cómo crear un juego sin programar, piensa en pequeño: una sola mecánica, unos controles simples y una forma clara de ganar o perder. Describe eso a una IA, prueba el juego en la vista previa y corrige una cosa por mensaje hasta que se sienta bien. Después publícalo y comparte el enlace. En VibeDream los juegos se construyen con Phaser, un framework para juegos de navegador, y se juegan en el celular o en la computadora sin instalar nada.

Elige una idea que quepa en una pantalla

El error más común es empezar por un juego enorme. Una idea pequeña se termina, se prueba y se mejora. Estas ideas de juegos funcionan bien para empezar:

  • Atrapar objetos que caen: mueves una canasta y esquivas lo que resta puntos.
  • Esquivar obstáculos: un personaje corre solo y tú solo saltas.
  • Memoria: volteas cartas y buscas los pares.
  • Preguntas rápidas: un quiz con tiempo sobre un tema que te guste.
  • Clics contra el reloj: tocar objetivos antes de que desaparezcan.

Escribe las reglas antes del prompt

  • Objetivo: qué hace el jugador para sumar puntos.
  • Controles: tocar, deslizar o usar las flechas del teclado.
  • Cómo se pierde: vidas, tiempo o un choque.
  • Cómo sube la dificultad: más velocidad o más objetos con el tiempo.
  • Qué se ve en pantalla: el marcador, las vidas y un botón para volver a jugar.

El prompt para crear tu juego

En VibeDream, haz clic en New Project, elige Direct Prompt y pega la descripción. La interfaz está en inglés, pero puedes escribir en español. Este es un ejemplo concreto:

Crea un juego de navegador llamado Atrapa Mangos.
El jugador mueve una canasta en la parte de abajo deslizando el dedo o con las flechas del teclado.
Caen mangos (1 punto) y chiles (quitan una vida). Hay 3 vidas.
Cada 15 segundos todo cae un poco más rápido.
Muestra el marcador y las vidas arriba, y al perder una pantalla con el puntaje y un botón Jugar otra vez.
Colores alegres, se debe jugar bien en celular en vertical.
Textos en español.
El espacio de trabajo de VibeDream con el chat a la izquierda y un juego de atrapar frutas en la vista previa a la derecha
El juego corre en la vista previa junto al chat.

Prueba y ajusta la dificultad

Juega varias partidas en la vista previa y en el modo de celular. Anota lo que se siente mal y pídelo de uno en uno:

  • "Los mangos caen demasiado rápido al inicio. Empieza más lento."
  • "La canasta es muy pequeña en el celular. Hazla un 30 por ciento más ancha."
  • "Agrega un sonido corto al atrapar un mango y otro al perder una vida."
  • "Guarda el mejor puntaje en el dispositivo y muéstralo en la pantalla final."
Un juego de atrapar frutas en la pantalla de un celular, con el puntaje arriba
El mismo juego en el celular, directo en el navegador.

Publicar y compartir tu juego

Cuando el juego se sienta bien, haz clic en Put it online. En 1 a 3 minutos queda en una dirección como atrapamangos.vibedreams.ai, con HTTPS, lista para mandar por WhatsApp o compartir en redes. Al publicarlo, el juego también tiene su propia página para jugar con una tabla de puntuaciones. Publicar y actualizar cuestan 5 créditos cada vez, y la versión publicada solo cambia cuando haces clic en Update it. Los planes empiezan en 49 dólares al mes con 60 créditos; mira la página de precios. VibeDream crea juegos para el navegador, no apps para la App Store o Google Play.

Para entender mejor la herramienta que mueve estos juegos, lee la guía en inglés sobre Phaser. Y si te interesa la idea general de crear software hablando con una IA, revisa qué es vibe coding.

Preguntas frecuentes

¿Listo para crear tu app?

Describe tu idea y mírala funcionando en una vista previa en vivo.

Empezar a crear

Más guías