Taller de Programación • HTML5 Canvas & JavaScript

🎮 Simulador de Videojuegos: Programa el Movimiento

¿Alguna vez te has preguntado cómo hacen Mario, Sonic o Minecraft para moverse cuando presionas una tecla? Aquí no eres un simple jugador: eres el programador del motor de físicas. Modifica el código de JavaScript y observa cómo tu robot responde en tiempo real a las matemáticas y a la gravedad.

🧠 La Ciencia Detrás del Movimiento en Videojuegos y Páginas Web

Conceptos matemáticos y de computación que todo creador de juegos debe dominar:

📐

1. El Plano Cartesiano de la Pantalla

¡Cuidado! A diferencia de tu clase de matemáticas, en las pantallas digitales la esquina superior izquierda es (X = 0, Y = 0).
• Avanzar a la derecha = Sumar a X
• Bajar hacia el suelo = Sumar a Y
• ¡Saltar hacia arriba = Restar a Y!

⚡

2. El Ciclo del Juego (Game Loop)

La computadora ejecuta la función actualizarPersonaje() 60 veces por segundo (60 FPS). En cada fotograma calcula la nueva posición: x = x + velocidadX.

🍎

3. La Simulación de la Gravedad

En el mundo real, la gravedad jala las cosas hacia el centro de la Tierra. En el código, simplemente sumamos una pequeña fuerza constante a la velocidad vertical: vy += gravedad;.

🧱

4. Colisiones con Plataformas

Para evitar que el robot caiga al centro de la Tierra, comprobamos si sus pies tocan una plataforma. Si es así, cambiamos enSuelo = true y detenemos su caída con vy = 0.

🛠️ Laboratorio de Físicas y Movimiento en Vivo

Elige una misión para aprender paso a paso, modifica las variables y haz clic en "Aplicar Código al Juego".

Misiones Didácticas:

🟨 movimiento.js (Lógica del Personaje)

Monedas: 0 / 3

🟢 En Suelo

X: 60 | Y: 320 | Vx: 0.0 | Vy: 0.0

Controles (o usa flechas / WASD):

🧪 Experimentos de Programación: ¡Cambia las Leyes de la Física!

Prueba hacer estos cambios en el código de movimiento.js y observa los resultados inmediatos:

🌙 Gravedad Lunar Experimento 1

En la línea donde dice const gravedad = 0.5; cámbiala por 0.1. ¡Tu robot saltará casi flotando en el espacio como los astronautas en la Luna!

⚡ Velocidad Supersónica Experimento 2

Cambia const velocidadCaminar = 5; por 15. El robot se moverá como un rayo. Observa cómo la fricción necesita ajustarse para no derrapar fuera de la plataforma.

🪶 El Vuelo Infinito Experimento 3

Borra && personaje.enSuelo en la condición del salto. Ahora cada vez que presiones salto, ¡recibirás impulso en el aire y podrás volar como en Flappy Bird!

¿Quieres aprender cómo se conectan HTML y JavaScript para hacer esto? 💡

Explora las lecciones completas de etiquetas de estructura y algoritmos lógicos:

🧱 Aprender HTML ⚡ Aprender JavaScript 🏠 Volver al Inicio