🚀 Cómo se Creó la Simulación "Misión Labardén" 🪐

¡Hola, Capitán/Capitana y equipo Labardén! Aquí les contamos un poco sobre cómo construimos esta simulación interactiva para visualizar el fascinante viaje a Marte.

1. El Objetivo Principal 🎯

• Crear una experiencia educativa y divertida para entender los conceptos clave de un viaje interplanetario:
  • Ventanas de lanzamiento.
  • Órbitas de transferencia (Hohmann).
  • Correcciones de trayectoria (TCM).
  • Inserción orbital (MOI).
  • El papel fundamental de la gravedad.
• Hacerlo interactivo, donde las decisiones del jugador afecten el resultado de la misión.
• Incluir una simulación visual que complemente la explicación narrativa.

2. Las Tecnologías Utilizadas 💻

• HTML (HyperText Markup Language): Es el "esqueleto" de la página. Define la estructura básica: los títulos, los párrafos de explicación, los botones de decisión, el contenedor del juego y el <canvas> (lienzo) para la simulación.
• CSS (Cascading Style Sheets) con Tailwind CSS: Es el "maquillaje" y la "ropa". Se encarga de toda la apariencia visual:
  • Colores espaciales (azules oscuros, grises).
  • Tipografía (fuente Inter).
  • Diseño responsivo (para que se vea bien en computadoras, tablets y celulares).
  • Estilos de los botones (colores, bordes redondeados, efectos al pasar el mouse).
  • Tailwind CSS: Es una herramienta que nos permite aplicar estilos rápidamente usando clases predefinidas directamente en el HTML (ej. bg-blue-500, text-white, rounded-lg). ¡Muy práctico!
• JavaScript: Es el "cerebro" y los "músculos". Se encarga de toda la lógica y la interactividad:
  • Manejo del Juego: Cambiar entre fases, mostrar/ocultar textos y botones.
  • Decisiones: Detectar qué botón se presiona, evaluar si la decisión es correcta o incorrecta.
  • Mensajes: Mostrar mensajes de éxito, advertencia o error.
  • Simulación Orbital (Canvas API):
    • Dibujar en el elemento <canvas>: el Sol, la Tierra, Marte, las órbitas, la nave, estrellas, efectos.
    • Animar el movimiento: Hacer que los planetas giren y la nave viaje usando requestAnimationFrame para una animación fluida.
    • Física Simplificada: Calcular posiciones usando ángulos y radios, simular la elipse de transferencia Hohmann (aproximada), y representar los diferentes estados de la nave.
    • Interactividad del Canvas: Permitir rotar la vista con el mouse o el dedo.

3. La Lógica del Juego y la Simulación 🧠⚙️

• Fases: El juego se divide en etapas lógicas (Inicio, Lanzamiento, Viaje, Corrección, Llegada, Éxito/Fallo).
• Estados: La simulación tiene diferentes simulationState ('idle', 'transfer', 'orbiting_mars', etc.) que determinan cómo se mueven y dibujan los objetos.
• Variables Clave: Guardamos las decisiones del jugador (launchWindowChoice, trajectoryChoice, moiChoice) para que afecten el desarrollo.
• Coherencia: Intentamos que la simulación visual refleje las decisiones (alineación inicial, trayectoria, resultado final).
• Simplificación: ¡Importante! La física real es mucho más compleja. Usamos simplificaciones para hacerlo visualmente comprensible.

4. El Rol de la Inteligencia Artificial (Gemini): ¡Nuestro Copiloto de Código! ✨

¡Esta simulación se construyó con la ayuda de Gemini! Fue un proceso de "live coding" conversacional:

• Generación Inicial: Le pedimos a Gemini que creara la estructura básica del juego.
• Refinamiento Iterativo: Fuimos pidiendo mejoras paso a paso ("añade un canvas", "mejora la física", "añade estrellas", "cambia los estilos").
• Explicación de Código: Le preguntamos a Gemini cómo funcionaban ciertas partes o cómo implementar algo nuevo.
• Depuración: Describimos problemas a Gemini para que sugiriera correcciones.

Gemini actuó como un programador asistente muy rápido, generando y modificando código complejo (HTML, CSS, JavaScript) en tiempo real.

5. Alojamiento 🌐

Para compartir esto, subimos los archivos HTML a GitHub Pages, un servicio gratuito de GitHub. Luego, configuramos el dominio personalizado julieta.podeley.ar ajustando los registros DNS en el proveedor del dominio para que apunten a los servidores de GitHub.

← Volver al Inicio