DEV Community

Cover image for Cavernícolas, dinosaurios y código: Cómo construí un videojuego usando Kiro
Axel Espinosa
Axel Espinosa

Posted on • Originally published at linkedin.com

Cavernícolas, dinosaurios y código: Cómo construí un videojuego usando Kiro

#kiro #ai #vibecoding #programming

Quería hacer un videojuego, pero no sabía por dónde empezar. No tenía experiencia en desarrollo de juegos y tampoco estaba familiarizado con los conceptos necesarios. Usé Kiro y terminé construyendo un clon del dinosaurio de Chrome con un cavernícola huyendo de un T-Rex.

En este artículo te cuento cómo lo hice: los problemas que aparecieron, cómo los resolví y los prompts que usé por si quieres replicarlo.

Vibecoding

¿Cómo construyes un juego sin saber hacer juegos? Con vibecoding.

El vibecoding es una forma de prototipar y darle vida a tus ideas sin seguir una metodología formal. Tú describes lo que quieres y la IA lo construye. No es para producción, pero funciona perfecto para algo que quieres probar rápido.

El juego lo creé con Kiro, un editor que convierte tus ideas en código. Mi rol fue simple: supervisar que los resultados me gustaran. Yo dirigía; Kiro ejecutaba.

La idea

Quería construir una versión del clásico dinosaurio de Chrome. Pero en vez de un dinosaurio saltando cactus, quería un cavernícola huyendo de un T-Rex. Algo con personalidad propia.

La mecánica:

  • Un cavernícola corre de izquierda a derecha
  • Un T-Rex lo persigue desde atrás
  • Aparecen obstáculos: cactus que hay que saltar, pterodáctilos que hay que esquivar agachándose
  • Cada colisión atrasa al cavernícola y el dinosaurio se acerca
  • Si el dinosaurio te alcanza, game over 💀

Conceptos rápidos

Antes de contarte el proceso, quiero repasar tres conceptos para que tengas contexto de lo que hace el código por debajo. Si ya los conoces, salta directo a "El proceso".

POO (Programación Orientada a Objetos)

¿Recuerdas esa clase donde veías diagramas UML y hablaban de herencia (lamentablemente no monetaria)? Pues ese paradigma finalmente se usa en algo divertido.

En los videojuegos, la POO es clave porque cada elemento del juego (el cavernícola, el dinosaurio, los obstáculos) es un objeto con su propio estado y comportamiento. Eso facilita mucho el modelo mental cuando tienes decenas de cosas moviéndose en pantalla. Si quieres un repaso completo, aquí tienes.

Por si no recuerdas, una clase se ve así:

class Game {
  constructor(props) {
    this.name = "dino-chase";
  }
}
Enter fullscreen mode Exit fullscreen mode

FPS (Frames Per Second)

FPS ejemplo

Concepto sencillo pero poco entendido. Los FPS son el número de imágenes que tu computadora logra mostrar en un segundo.

Imagina un cuaderno donde dibujas en cada hoja una secuencia de una persona moviéndose. Cuando pasas las hojas rápido, el dibujo parece cobrar vida. Eso son los FPS.

Lo más común es 30, 60 y 120 FPS. Cuantos más FPS, más fluidos se sienten los movimientos. Y eso depende mucho del hardware donde se ejecuta el juego.

Game Loop

Gameloop diagrama

El game loop es el corazón de cualquier videojuego. Es un bucle que se repite continuamente y hace tres cosas:

  1. Recibe los eventos del usuario (presionar una tecla, mover el mouse)
  2. Actualiza el estado interno de los personajes y el mapa (por eso necesitamos POO)
  3. Redibuja la pantalla con las nuevas posiciones, vidas, puntajes, etc.

Este ciclo se repite hasta que el juego termina.

El proceso

Aquí es donde se pone interesante. El juego no salió bien a la primera. Ni a la segunda. Fueron varias iteraciones, cada una resolviendo algo que solo descubrí jugando.

Si quieres replicar lo que hice, puedes usar Kiro. En este tutorial aprendes a instalar Kiro y, si te registras, obtienes créditos gratis para poder replicar lo que hice. No te vas a gastar ni la mitad de créditos haciendo este juego.

0. Preparar el proyecto

Antes del primer prompt necesitas un proyecto de Vite y unos sonidos. Abre tu terminal y corre esto:

pnpm create vite@latest game-with-kiro -- --template vanilla
cd game-with-kiro
pnpm install
Enter fullscreen mode Exit fullscreen mode

Después crea la carpeta public/game-assets/audio/ y agrega 3 archivos .wav. El juego los va a usar para reproducir efectos de sonido cuando el cavernícola salte, choque con un obstáculo o agarre un power-up:

  • jump.wav para el sonido de salto
  • hitHurt.wav para cuando te golpeas con algo
  • powerUp.wav para futuros power-ups

Los sonidos los puedes encontrar en mi repositorio. O puedes generar los tuyos en sfxr.me en 2 minutos. Es importante que los tengas listos antes de empezar porque en el primer prompt le vamos a decir a Kiro que los use.

Con eso listo, ya puedes empezar con los prompts.

1. El prompt inicial

Este fue el prompt más importante. Le expliqué a Kiro exactamente qué quería construir:

Quiero crear un videojuego en el navegador. El juego se trata de un clon del juego que tiene Chrome cuando te quedas sin internet.

Quiero hacer mi versión inspirada en ese juego. Quiero que el dinosaurio persiga a un cavernícola y que con cada obstáculo que no logre esquivar, el cavernícola se retrase por milisegundos para que al dinosaurio le dé tiempo de atraparlo.

Conforme vayas avanzando los obstáculos deben acercarse a ti más rápido pero siempre permitiéndole al jugador esquivarlos.

El diseño del juego es pixel art minimalista, usando solo tonos de gris. El juego usa la tecla espaciadora o las flechas del teclado.
Los obstáculos son infinitos: cactus en el suelo y pterodáctilos volando donde el cavernícola tenga que agacharse o saltarlos.

Consideraciones:
- Utiliza los sonidos que tengo en la carpeta public/game-assets/audio/
- Todo el trabajo debe ser hecho en la carpeta src/
- Utilizamos Vite
- Utilizamos pnpm
- Los sprites deben ser dibujados con canvas no usar imágenes externas
Enter fullscreen mode Exit fullscreen mode

Kiro creó todo el proyecto. Corrí pnpm dev, abrí http://localhost:5173 y ya había algo funcionando.

¿Pero fue suficiente? No del todo.

2. Simplificar el fondo

El primer problema que encontré: el fondo tenía demasiados elementos. Volcanes, gradientes, parallax. Se veía laggeado y no se sentía como el juego original.

El fondo se ve laggeado con cada actualización. Mantenlo minimalista como el juego original de Chrome: fondo gris claro sólido, nubes simples, una línea de suelo. Sin volcanes ni parallax complejo.
Enter fullscreen mode Exit fullscreen mode

3. Los obstáculos tardaban mucho en aparecer

El juego se sentía aburrido. Pasaban segundos sin que apareciera nada.

Necesito que los obstáculos no tarden tanto en aparecer. Que a veces haya que saltar obstáculos seguidos o agacharse para que sea un poco más difícil.
Enter fullscreen mode Exit fullscreen mode

Con eso ya se sentía como un juego de verdad.

4. Obstáculos imposibles de esquivar

A veces aparecían dos obstáculos encimados, o uno aparecía justo cuando estaba cayendo de un salto. Imposible esquivarlos.

Tenemos un bug: cuando el cavernícola salta, a veces aparece un obstáculo tan cerca que ya no me permite saltar de nuevo y me cuenta como un golpe. Además dos obstáculos aparecen al mismo tiempo. Necesito que eso se arregle.
Enter fullscreen mode Exit fullscreen mode

Kiro cambió el sistema de spawn para usar distancia mínima entre obstáculos en vez de tiempo. Mucho mejor.

Pero algo seguía sintiéndose raro. 🤔

5. Mejorar la respuesta de los controles

Este fue un momento clave. Presionaba saltar en el momento correcto, pero el juego no respondía porque el cavernícola todavía estaba en el aire del salto anterior.

Implementa un input buffer porque cuando aparecen combos parece que no logra saltar los obstáculos aunque yo le aplaste la tecla en el tiempo adecuado.
Enter fullscreen mode Exit fullscreen mode

Kiro implementó dos técnicas clásicas de platformers:

  • Input Buffer (150ms): Si presionas saltar mientras estás en el aire, el juego recuerda ese input y salta automáticamente cuando aterrices.
  • Coyote Time (80ms): Tienes una ventana pequeña para saltar incluso después de empezar a caer.

Esto hizo que el juego se sintiera responsivo. Los combos de obstáculos ahora sí se podían esquivar.

Perfecto. La mecánica básica ya funcionaba. Pero faltaba algo para competir con amigos.

6. El contador y high score

Sin puntaje no hay competencia.

Implementa el counter del juego con high score guardado en localStorage. El formato debe ser de 5 dígitos como el juego original de Chrome.
Enter fullscreen mode Exit fullscreen mode

Ahora sí podía retar a mis amigos.

7. El efecto dominó

Este fue el bug más difícil. Me tomó varias iteraciones resolverlo.

El problema era un ciclo vicioso:

  1. Chocas con un obstáculo → el cavernícola se atrasa
  2. Al atrasarte, el siguiente obstáculo ya está encima tuyo
  3. Chocas de nuevo → te atrasas más
  4. Se repite hasta game over

Era injugable. Le pedí esto a Kiro:

Si choco varias veces es imposible sortear los objetos siguientes porque queda muy cerca de ellos. Necesito que al colisionar se limpien los obstáculos cercanos y haya un periodo de inmunidad para recuperarse.
Enter fullscreen mode Exit fullscreen mode

La solución combinó varias técnicas:

  • Inmunidad de 500ms después de cada colisión
  • Limpieza de obstáculos en un radio de 250px al colisionar
  • Recuperación de posición más rápida, proporcional a la velocidad del juego
  • Spawn basado en la posición del jugador, no del borde del canvas

Ahora tocaba preocuparme del dinosaurio.

8. Balancear al dinosaurio

El T-Rex alcanzaba al cavernícola demasiado rápido, incluso sin colisiones. La presión tenía que venir de mis errores, no del paso del tiempo.

El dinosaurio alcanza al cavernícola muy rápido. Haz que empiece más atrás y avance más lento. La presión debe venir de las colisiones, no del avance natural del dinosaurio.
Enter fullscreen mode Exit fullscreen mode

Kiro redujo la velocidad de avance del dinosaurio de 0.2 a 0.08. Ahora la tensión viene de tus errores, no del reloj.

9. Pterodáctilos a dos alturas

Para darle más variedad, agregué pterodáctilos a diferentes alturas. Unos que hay que saltar y otros donde hay que agacharse.

Quiero que haya pterodáctilos a dos alturas: altos donde hay que agacharse y bajos donde hay que saltar. Asegúrate de que las figuras estén bien calibradas para que ambas acciones funcionen a cualquier velocidad del juego.
Enter fullscreen mode Exit fullscreen mode

Estructura final del proyecto

Después de todas las iteraciones, la estructura quedó así:

├── src/
│   ├── main.js          # Entry point, pantallas inicio/game over
│   ├── game.js          # Game loop, colisiones, score, renderizado
│   ├── caveman.js       # Jugador: salto, agacharse, input buffer, inmunidad
│   ├── dinosaur.js      # Enemigo perseguidor
│   ├── obstacles.js     # Manager + CactusSmall, CactusBig, Pterodactyl
│   ├── background.js    # Nubes y decoraciones del suelo
│   ├── audio.js         # Gestión de sonidos
│   └── style.css        # Estilos de UI
├── public/game-assets/
│   └── audio/           # Archivos .wav
├── index.html
└── package.json
Enter fullscreen mode Exit fullscreen mode

Lo que aprendí

No sabía hacer un videojuego. No sabía qué conceptos necesitaba ni por dónde empezar. Con ayuda de la IA logré construir algo que de otra forma me hubiera tomado semanas de investigación, y probablemente lo hubiera abandonado por frustración.

Pero aquí viene el detalle: la IA no lo hizo sola. Fueron 9 iteraciones. Cada una requirió que yo jugara, identificara problemas y supiera explicar qué estaba mal. La IA ejecuta, pero tú diriges.

Si estás estudiando programación y sientes que la IA viene a dejarte sin oportunidades, no pienses eso. Aprende a usarla. Empodérate con ella. Ahora puedes crear ideas más rápido y dedicarle tiempo a lo que realmente importa: entender los fundamentos.

Ojo, es importante que, aunque la IA escriba el código, tú seas capaz de leerlo y modificarlo cuando algo salga mal. Porque todavía no es perfecta.

Sigue aprendiendo y no le tengas miedo a la IA. Úsala como lo que es: una herramienta que amplifica lo que ya sabes y una aliada para aprender construyendo.

Si te animas a hacer tu propia versión, déjame el link a tu repositorio en los comentarios o puedes escribirme en LinkedIn si tienes alguna duda.

También te dejo el link al repositorio de mi juego 👉 Repositorio con juego

Top comments (0)