🎮 Creando un videojuego desde cero
Después de aprender los conceptos básicos de OpenCode y cómo interactuar con la herramienta, llega el momento de construir algo real.
En esta clase vamos a crear nuestro primer proyecto práctico: un pequeño videojuego desarrollado con HTML, CSS y JavaScript utilizando un modelo gratuito.
El objetivo no es crear un juego complejo, sino entender cómo trabajar con OpenCode para generar código, probar resultados e iterar sobre ellos.
🚀 Empezando un proyecto real
Hasta ahora hemos visto cómo movernos por la interfaz y cómo comunicarnos con el agente.
Ahora toca pedirle una tarea completa.
La propuesta es sencilla:
- Crear un juego pequeño
- Utilizar únicamente HTML, CSS y JavaScript
- Evitar dependencias externas
- Mantener una implementación simple
- Comprobar cómo responde un modelo gratuito
Este tipo de ejercicio permite entender rápidamente el potencial de los agentes de código.
📋 Trabajando con prompts largos
OpenCode permite pegar contenido directamente desde otras fuentes.
Por ejemplo:
- Prompts extensos
- Fragmentos de documentación
- Archivos completos
- Imágenes
- Diferentes tipos de recursos
Cuando se pega una gran cantidad de texto, la herramienta muestra una advertencia indicando el número de líneas insertadas.
Esto es completamente normal y no implica que el contenido se haya perdido.
Al enviar el mensaje, OpenCode expande el texto y permite revisar exactamente qué se ha enviado al modelo.
🌍 ¿Por qué usar prompts en inglés?
Durante la demostración se utiliza un prompt en inglés por una razón práctica.
Los modelos suelen:
- Consumir menos tokens en inglés
- Responder con mayor precisión
- Aprovechar mejor el contexto disponible
Esto resulta especialmente útil cuando se trabaja con modelos gratuitos que tienen límites más reducidos.
Utilizar inglés no es obligatorio, pero puede ayudar a obtener mejores resultados con menos coste de contexto.
🕹️ Diseñando el videojuego
La idea inicial consiste en crear un juego inspirado en mecánicas sencillas similares al dinosaurio de Chrome.
Los requisitos son muy claros:
- HTML, CSS y JavaScript puros
- Dificultad progresiva
- Mecánica simple de salto
- Código fácil de entender
- Sin dependencias externas
En lugar de centrarse en la perfección, el objetivo es comprobar si el agente es capaz de construir una primera versión funcional.
⚡ Generación automática del proyecto
Una vez enviado el prompt, OpenCode comienza a trabajar.
Dependiendo del modelo utilizado, pueden ocurrir diferentes cosas.
Por ejemplo, algunos modelos generan automáticamente un archivo:
spec.mdEste archivo suele contener:
- La especificación del proyecto
- Requisitos funcionales
- Información de diseño
- Referencias sobre colores o comportamiento
No todos los modelos generan este archivo, pero cuando aparece sirve como contexto adicional para la tarea.
Después, el agente crea automáticamente:
- El HTML
- Los estilos CSS
- La lógica JavaScript
Todo ello en cuestión de segundos.
🏃 Ejecutando el proyecto
Una vez generado el código, OpenCode indica cómo ejecutar la aplicación.
Tras iniciar el entorno local y abrir el navegador, el resultado aparece inmediatamente.
Lo interesante es que:
- El juego funciona desde el primer intento
- No se ha escrito código manualmente
- Se ha utilizado un modelo gratuito
- El tiempo de desarrollo ha sido mínimo
Esto demuestra lo rápido que puede ser el proceso de prototipado con agentes de código.
🔄 Iterar es la verdadera clave
Generar una primera versión es solo el comienzo.
El siguiente paso consiste en mejorar el resultado.
En lugar de empezar desde cero, se le pide al agente que realice cambios específicos:
- Más dificultad
- Mejor feedback visual
- Sistema de puntuación más satisfactorio
- Ritmo más dinámico
- Mejor apariencia gráfica
- Sin añadir dependencias
Esta forma de trabajar se parece mucho a colaborar con otro desarrollador.
No se trata de pedir una solución perfecta desde el principio, sino de mejorar progresivamente el resultado.
📬 Enviando tareas mientras el modelo trabaja
Una característica interesante es que OpenCode permite seguir enviando mensajes mientras el modelo está procesando una tarea.
Las peticiones quedan en cola y se ejecutan posteriormente.
Esto permite:
- Preparar nuevas instrucciones
- Encadenar mejoras
- Mantener el flujo de trabajo
- Aprovechar mejor el tiempo de espera
Dependiendo del modelo, algunas tareas incluso pueden reorganizarse automáticamente si detecta oportunidades para resolverlas durante el proceso.
✨ Mejorando la experiencia del juego
Tras aplicar las mejoras, el resultado se vuelve más atractivo.
Se incorporan elementos que hacen que la experiencia sea más satisfactoria:
- Mejor feedback visual
- Indicadores de puntuación
- Mayor sensación de progresión
- Mejor ritmo de juego
Aunque sigue siendo un proyecto sencillo, ya se percibe una evolución clara respecto a la versión inicial.
Y todo ello sin abandonar el flujo conversacional con el agente.
🎯 Lo importante no es el juego
El videojuego es simplemente una excusa para aprender una metodología.
La lección realmente importante es entender cómo trabajar con OpenCode:
- Definir una idea.
- Generar una primera versión.
- Ejecutarla.
- Evaluar el resultado.
- Solicitar mejoras.
- Repetir el proceso.
Este ciclo de iteración es la base de prácticamente cualquier proyecto desarrollado con agentes de código.
📌 Ideas clave de esta clase
Quédate con estos conceptos:
- OpenCode puede generar proyectos completos desde un prompt
- Es posible trabajar perfectamente con modelos gratuitos
- Los prompts en inglés suelen consumir menos tokens
- Algunos modelos crean archivos de especificación automáticamente
- El código generado puede ejecutarse inmediatamente
- La iteración es más importante que el primer resultado
- Puedes enviar nuevas tareas mientras el modelo trabaja
- Los agentes permiten prototipar aplicaciones muy rápidamente
- El flujo ideal consiste en generar, probar y mejorar continuamente
🚀 Lo siguiente: proyectos cada vez más complejos
Ahora que ya has creado un proyecto funcional y has visto cómo iterar sobre él, el siguiente paso será aumentar la complejidad de los desarrollos.
A medida que los proyectos crecen, aprenderás a dar mejores instrucciones, aprovechar mejor el contexto y sacar más partido a los agentes de código.
💡 Tip: No intentes obtener el resultado perfecto en la primera petición. Los mejores resultados suelen aparecer después de varias iteraciones pequeñas y bien enfocadas.