Aprende composición de funciones navegando el océano matemático
Este juego enseña composición de funciones — uno de los conceptos más importantes del precálculo — a través de una simulación interactiva real.
Una función es como una máquina: le metes un número y te devuelve otro. La composición es encadenar dos máquinas: el resultado de la primera entra directo a la segunda.
(f ∘ g)(x) = f( g(x) )
↑
primero g(x),
luego ese resultado entra a f
| Paso | Acción | Función |
|---|---|---|
| 🧦 Primero | Ponerse los calcetines | g(x) |
| 👟 Luego | Ponerse los zapatos | f(x) |
| 🚶 Resultado | Salir de casa | (f∘g)(x) |
No puedes ponerte los zapatos sin los calcetines. El orden importa. Eso es composición.
Si g(x) = x + 3 y f(x) = 2x, con x = 4:
Paso 1 → g(4) = 4 + 3 = 7
Paso 2 → f(7) = 2 × 7 = 14
Respuesta: 14 ✓
Un barco navega a 20 mi/h paralelo a la orilla. El faro está 5 millas perpendicular a ella.
Usarás dos funciones encadenadas para calcular la distancia exacta al faro en cada instante:
| Función | Fórmula | Qué hace |
|---|---|---|
| g (primera) | g(t) = 20t |
Tiempo → distancia recorrida en la orilla |
| f (segunda) | f(d) = √(25 + d²) |
Distancia d → distancia directa al faro (Pitágoras) |
Función compuesta completa:
(f∘g)(t) = √( 25 + (20t)² )
En cada escena verás los datos del barco. Tu trabajo es resolver las funciones paso a paso eligiendo la respuesta correcta:
- Calcular
d = g(t) = 20t— ¿cuánto avanzó el barco? - Calcular
s = f(d) = √(25 + d²)— ¿a qué distancia está el faro?
| Escena | t (horas) | d = g(t) | s = f(d) |
|---|---|---|---|
| 1 | 1 h | 20 mi | ≈ 20.6 mi |
| 2 | 2 h | 40 mi | ≈ 40.3 mi |
| 3 | 3 h | 60 mi | ≈ 60.2 mi |
| 4 | 4 h | 80 mi | ≈ 80.2 mi |
| 5 | 5 h | 100 mi | ≈ 100.1 mi |
| 6 | 6 h | 120 mi | ≈ 120.1 mi |
- ⚙️
g(t) = 20t— convierte tiempo en distancia recorrida a lo largo de la orilla - 📐
f(d) = √(25 + d²)— usa el teorema de Pitágoras para hallar la distancia directa al faro - 🔗
(f∘g)(t) = √(25 + (20t)²)— la función compuesta en un solo paso - 🧭 Por qué el orden importa en la composición de funciones
| Tecnología | Uso |
|---|---|
| HTML5 | Estructura del juego |
| CSS3 | Estilos y animaciones |
| JavaScript | Lógica del juego |
Sin frameworks, sin dependencias. Solo abre
index.htmlen tu navegador y ¡a navegar!
# Clona el repositorio
git clone https://github.com/dbarrientos-dev/barco-faro-game-version-2.git
# Entra a la carpeta
cd barco-faro-game-version-2
# Abre el juego (o simplemente haz doble clic en index.html)
open index.htmlBasado en el trabajo de @aebenavides898-beep. Versión 2 mejorada por @dbarrientos-dev.