Misión C16Nivel Creadores (13–15 años) Computador 20–30 min
Juego en el navegador
Proyecto web: juego con canvas y requestAnimationFrame
🗺️
Tu Misión de Hoy
¡Proyecto! Un juego que cualquiera puede jugar abriendo una página: usarás <canvas> para dibujar y un bucle de animación.
🧰
Checklist interactivoQué Necesitas en Casa
Revisa los materiales juntos y marca las casillas a medida que los tengan listos:
Trinket → New Trinket → HTML (vista previa inmediata) o VS Code web
2–3 sesiones
👣
Paso a Paso en Familia
🎮
Minijuego Interactivo: Reto C16
Aprende jugando: resuelve el reto interactivo directamente aquí abajo.
Juego de reflejos con requestAnimationFrame: haz clic en el blanco 🎯
Puntos: 0 / 3
🏆 Reto Extra de Exploración
- Guarda el récord en
localStorage.
- Añade sonido con new Audio("…").play().🐞 Si algo no funciona (¡Hora de depurar!)
- Todo deja rastro → falta
clearRect al comienzo de cada vuelta.
- El juego va a distinta velocidad según el equipo → usa el tiempo transcurrido (avanzado).💬 Muéstraselo a tu Familia
Pásale el juego a tu familia para que lo pruebe.
¿Terminaron la misión? Estampa tu sello para avanzar.
Guía para el Adulto Acompañante
Tu rol es guiar con preguntas, no dar la respuesta.
🎯Objetivo
Proyecto web interactivo: canvas, bucle de animación, eventos y colisiones.
📋Antes de empezar
Reserve varias sesiones.
❓Preguntas para hacer
- ¿Qué hace
requestAnimationFrame?
- ¿Cómo detectas un choque entre rectángulos?
- ¿Qué fue lo más difícil?
Si se atasca (de menos a más ayuda):
1. Recuérdele el bucle de juego de C09.
2. Empiecen con un cuadrado que se mueve.
3. Den el esqueleto completo.💡Sin computador / solo celular
Esta misión necesita computador.
⭐Sello del pasaporte
✅ el juego funciona en el navegador con puntaje y fin.
🧠Conceptos
Navegación del Programa
🤖
Jugar ➔¿Practicar con el Robot?
Prueba el simulador de cuadrícula 5x5