🎮 Videojuegos

Pong

Crea el juego de Pong creado por Atari en 1972.

• Pong con GPT-4.
• Pong con Gemini 2.5.
• Pong con Gemini 3.

Mario Bros

Crea un juego en Vanilla HTML, CSS y JS donde el personaje principal sea Mario, que pueda moverse hacia la derecha y saltar sobre plataformas.

El juego debe tener un fondo azul, un suelo verde y bloques flotantes. Mario se controla con las flechas izquierda/derecha y espacio para saltar.

Si cae fuera de la pantalla, la partida se reinicia automáticamente. Todo en un solo archivo HTML, usando canvas y sin imágenes externas.

Termina el primer nivel del juego.

Toma como referencia el gameplay que te agrego en este video de YouTube:

• https://www.youtube.com/watch?v=cWOkHQXw0JQ

Tetris

Crea un juego completo de Tetris en un solo archivo HTML (con CSS y JavaScript integrados, sin librerías externas).

Naves 3D

Crea un juego web de naves espaciales 3D pulido, de bajo poligonaje y estilo "Caja de Juguetes", estructurado como una aplicación React de múltiples archivos. El juego debe presentar una estética brillante y juguetona con las siguientes especificaciones:

Pila Principal (Core Stack): React, React Three Fiber, @react-three/drei, @react-three/postprocessing, y Zustand para la gestión de estados.

1. Estilo Visual y Atmósfera

• Estética: Un entorno brillante y vibrante que se asemeja a un juego de juguetes digital. Utiliza geometría gruesa y una paleta de colores pastel compuesta por azules suaves, verdes menta, amarillos soleados y rojos coral.
• Materiales e Iluminación: Utiliza MeshStandardMaterial en todas las mallas. La iluminación debe usar AmbientLight (intensidad 0.5) y DirectionalLight (intensidad 1.0, con sombras proyectadas) para simular un día soleado.
• Post-Procesamiento: Utiliza el EffectComposer con SSAO (Screen Space Ambient Occlusion) para hacer que la geometría resalte.
• Entorno: Un fondo sólido de Azul Celeste (propiedad color en Canvas o background attach). Agrega nubes de aspecto volumétrico (compuestas por grupos de esferas blancas agrupadas) y montañas geométricas de bajo poligonaje que se mueven más allá del jugador para simular velocidad.
• Assets: Crea la Nave del Jugador y los Enemigos mediante programación utilizando grupos de BoxGeometry y ConeGeometry. No utilices modelos externos.

2. Mecánicas de Jugabilidad

• Perspectiva: Cámara fija detrás de la nave (Tercera persona), ligeramente elevada.
• Bucle Central (Core Loop): El jugador se mueve en X/Y. Los enemigos aparecen a una profundidad Z negativa y se mueven hacia una Z positiva. Establece la velocidad del juego a una dificultad media (velocidad atractiva pero justa para el movimiento de los enemigos y las tasas de aparición).
• Combate:
  • La barra espaciadora dispara proyectiles (esferas amarillas).
  • Colisión: Utiliza comprobaciones sencillas basadas en la distancia (p. ej., position.distanceTo() dentro del bucle useFrame) para la detección de colisiones entre balas/enemigos y nave/enemigos.
• Explosión: Cuando un enemigo muere, genera un grupo temporal de cubos pequeños (partículas) que se expanden y se desvanecen.
• UI (Interfaz de Usuario): Una superposición HTML que muestra la Puntuación (Score) (arriba a la izquierda) y una pantalla de Game Over con un botón de Reinicio (Restart). Utiliza una fuente redondeada y sans-serif.

3. Controles

• Estado: Utiliza Zustand para gestionar las entradas, la puntuación y el estado de juego terminado para evitar que el Canvas se vuelva a renderizar.
• Escritorio: WASD o Teclas de Flecha. Utiliza lerp en la posición de la nave para un movimiento suave y flotante.
• Móvil: Detecta el toque. Tocar la mitad izquierda de la pantalla actúa como un D-pad virtual (arrastre relativo que mueve la nave). Tocar la mitad derecha dispara.

4. Estructura del Código

• Proporciona la solución en múltiples archivos.
• Asegúrate de que el Canvas sea responsivo y llene el contenedor padre.

Ecos del Guardían

• Conceptualización & UX Research.
• Prototipo en Figma.
• Prompt en Chat GPT.
• Videojuego en Lovable:
  • Nivel 1.
  • Nivel 2.
  • Nivel 3.