🧟 Zombie Game - Aventura de Supervivencia con IA

Un proyecto de midudev - Creador de contenido especializado en programación y desarrollo web

🌐 Sígueme en mis redes sociales

---

Un juego de aventura conversacional de supervivencia zombie con narrativa generada por IA y gráficos en estilo pixel art. Cada decisión que tomes influirá en tu historia de supervivencia en un mundo post-apocalíptico.

Este proyecto forma parte del contenido educativo de midudev, donde exploramos las últimas tecnologías web y las posibilidades de la Inteligencia Artificial en el desarrollo de aplicaciones interactivas.

🎮 Características

• Narrativa Generada por IA: Cada historia es única gracias a Google Gemini
• Imágenes Dinámicas: Visuales en estilo pixel art generadas automáticamente
• Aventura Conversacional: Interactúa usando lenguaje natural
• Supervivencia Zombie: Toma decisiones críticas para sobrevivir
• Interfaz Moderna: UI responsive y elegante con TailwindCSS
• AI-Native Components: Construido con AI Elements, la librería de componentes especializada en aplicaciones de IA

🚀 Demo

¡Experimenta el apocalipsis zombie como nunca antes! Cada partida es una aventura completamente diferente.

🛠️ Tecnologías

• Framework: Next.js 15 con Turbopack
• Frontend: React 19 con TypeScript
• Estilos: TailwindCSS 4
• IA: Google Gemini para narrativa e imágenes
• UI Components: AI Elements de Vercel
• Linting: Biome

📦 Instalación

1. Clona el repositorio

git clone https://github.com/midudev/zombie-game.git
cd zombie-game

2. Instala las dependencias

pnpm install

3. Configura las variables de entorno

cp .env.example .env.local

Añade tu clave de API de Google AI:

GOOGLE_GENERATIVE_AI_API_KEY=tu_clave_aqui

4. Inicia el servidor de desarrollo

pnpm dev

5. Abre tu navegador

Visita http://localhost:3000 y comienza tu aventura de supervivencia.

🎯 Cómo Jugar

1. Inicio: El juego comenzará automáticamente con una escena inicial del apocalipsis zombie
2. Interactúa: Describe qué quieres hacer, adónde ir, qué examinar o cómo reaccionar
3. Sobrevive: Cada decisión afectará tu historia y tus posibilidades de supervivencia
4. Explora: El mundo se genera dinámicamente basado en tus acciones

Ejemplos de Acciones

• “Busco un arma en la habitación”
• “Me dirijo hacia la salida de emergencia”
• “Examino los sonidos que vienen del pasillo”
• “Intento comunicarme con otros supervivientes”

🏗️ Estructura del Proyecto

src/
├── app/
│   ├── api/
│   │   ├── generate-image/     # Generación de imágenes con IA
│   │   └── generate-story/     # Generación de narrativa con IA
│   ├── componentes/
│   │   ├── game-input.tsx      # Input del jugador
│   │   ├── game-loader.tsx     # Indicador de carga
│   │   └── game-message.tsx    # Mensajes del juego
│   ├── hooks/
│   │   └── use-zombie-game.ts  # Lógica principal del juego
│   └── page.tsx                # Página principal
├── components/
│   └── ui/                     # Componentes UI reutilizables
└── lib/
    ├── consts.ts              # Constantes del juego
    ├── prompts.ts             # Prompts para la IA
    ├── types.ts               # Tipos TypeScript
    └── utils.ts               # Utilidades

🔧 Scripts Disponibles

• pnpm dev - Inicia el servidor de desarrollo con Turbopack
• pnpm build - Construye la aplicación para producción
• pnpm start - Inicia el servidor de producción
• pnpm lint - Ejecuta el linter con Biome
• pnpm format - Formatea el código con Biome

🌟 Características Técnicas

• Server Components: Aprovecha las últimas características de React 19
• Streaming: Respuestas de IA en tiempo real
• Optimización: Turbopack para builds ultrarrápidos
• AI-First Design: Componentes nativos para IA con AI Elements de Vercel
• Responsive: Diseño adaptable a todos los dispositivos
• Type Safety: TypeScript estricto para mayor confiabilidad

🤝 Contribuir

¡Las contribuciones son bienvenidas! Si tienes ideas para mejorar el juego:

1. Fork el proyecto
2. Crea una rama para tu característica (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

👨‍💻 Autor

Miguel Ángel Durán - @midudev

Creador de contenido especializado en programación y desarrollo web con una comunidad de más de 1 millón de desarrolladores en YouTube y otras plataformas.

🌐 Más redes sociales

💖 Apoyo

Si te gusta este proyecto, puedes apoyar mi trabajo:

---