Alien Monster Hunter

Juego web arcade de naves hecho con HTML, CSS y JavaScript vanilla sobre Vite.

La idea es sobrevivir a oleadas de alienigenas, derrotar al jefe final y sumar la mayor cantidad de puntos posible. El juego incluye modo de 1 jugador y 2 jugadores, varias dificultades, power-ups, sistema de temperatura del arma y ranking global conectado a MockAPI.

Características

• Modo solo y cooperativo local para 2 jugadores.
• Tres dificultades: Cadete, Capitan y Leyenda.
• Oleadas progresivas de enemigos y jefe final.
• Sistema de disparo con sobrecalentamiento y ventana de vent.
• Dash, invulnerabilidad temporal y power-ups.
• Leaderboard remoto con filtro por modo de juego.
• Audio procedural con musica y efectos generados en Web Audio API.
• Interfaz arcade responsive para escritorio.
• Build empaquetado en un solo archivo mediante vite-plugin-singlefile.

Cómo Jugar

1. Ingresa tu nombre de piloto.
2. Elige la dificultad.
3. Selecciona el modo 1 Jugador o 2 Jugadores.
4. Presiona START MISSION.
5. Elimina enemigos, evita proyectiles y administra la temperatura del arma.
6. Derrota al jefe final para ganar la partida.

Controles

1 jugador

• A / D o ← / →: mover.
• W o Space: disparar.
• R: ventear temperatura.
• Shift + ← / → o Shift + A / D: dash.
• P: pausar.

2 jugadores

• Jugador 1:
  • A / D: mover.
  • W: disparar.
  • R: ventear.
  • Shift + A / D: dash.
• Jugador 2:
  • ← / →: mover.
  • Space: disparar.
  • /: ventear.
  • Shift + ← / →: dash.
• P: pausar.

Audio

El juego usa Web Audio API para musica y efectos. Por politicas del navegador, el audio se desbloquea en la primera interaccion del usuario.

• Puedes activar o desactivar la musica desde la interfaz.
• La musica cambia segun el estado del juego: intro, partida, pausa, victoria y derrota.

Leaderboard

El ranking se consulta y se guarda en:

• MockAPI: https://645fecb5fe8d6fb29e2902d5.mockapi.io/api/leaderboard

Si la API no responde, el juego sigue funcionando y muestra los registros disponibles en memoria durante la sesion actual.

Cómo Clonar el Proyecto

git clone git@github.com:keevh/Alien-Monster-Hunter.git
cd Alien-Monster-Hunter

Si prefieres usar HTTPS:

git clone https://github.com/keevh/Alien-Monster-Hunter.git
cd Alien-Monster-Hunter

Cómo Ejecutarlo

Este proyecto usa Vite, asi que primero instala dependencias:

pnpm install

Inicia el entorno de desarrollo:

pnpm dev

Luego abre:

http://localhost:3000

Build de Producción

pnpm build

Para previsualizar el build:

pnpm preview

Restricciones

• El juego esta pensado para desktop.
• En moviles y dispositivos tactiles se muestra un aviso de dispositivo no soportado.
• Requiere navegador con soporte para ES Modules, fetch y Web Audio API.

Estructura del Proyecto

Alien-Monster-Hunter/
├── src/
│   ├── audio.js
│   ├── game.js
│   ├── index.css
│   ├── main.js
│   ├── stars.js
│   ├── state.js
│   ├── ui.js
│   └── utils.js
├── favicon.svg
├── index.html
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── vite.config.js
└── README.md

Qué Hace Cada Parte

• index.html: contenedor base y punto de entrada del juego.
• src/main.js: inicializacion general, deteccion de mobile, audio unlock y montaje de UI.
• src/game.js: loop principal, logica de enemigos, jugadores, power-ups, colisiones y estados de partida.
• src/ui.js: pantallas de intro, HUD, pausa, victoria, derrota y leaderboard.
• src/state.js: estado global, dificultades, mecanicas y persistencia del ranking remoto.
• src/audio.js: musica y efectos generados por sintesis con Web Audio API.
• src/stars.js: fondo animado de estrellas.
• src/utils.js: helpers de UI y SVGs de enemigos.
• src/index.css: estilos visuales del juego.
• vite.config.js: configuracion de Vite, Tailwind y build single-file.

Tecnologías

• HTML5
• CSS
• JavaScript vanilla con ES Modules
• Vite
• Tailwind CSS v4
• Web Audio API
• MockAPI

Imagenes

Contribuir

Si encuentras un bug o quieres proponer una mejora:

1. Abre un Issue con el problema o la idea.
2. Crea un Pull Request con tu cambio.

Antes de enviar un PR, intenta dejar claro:

• Qué problema resuelve.
• Qué archivos modifica.
• Cómo se puede probar.

Autor

Kevin Gallardo - GitHub