🎨 Canvas: El Lienzo Mágico
¿Qué es Canvas?
Canvas es un elemento HTML que permite dibujar gráficos, animaciones y juegos usando JavaScript. ¡Es como tener un lienzo digital para crear cualquier cosa que imagines!
// Básico de Canvas const canvas = document.getElementById('miCanvas'); const ctx = canvas.getContext('2d'); // Dibujar un rectángulo ctx.fillStyle = '#f59e0b'; ctx.fillRect(50, 50, 100, 100); // Dibujar un círculo ctx.beginPath(); ctx.arc(200, 100, 50, 0, Math.PI * 2); ctx.fillStyle = '#10b981'; ctx.fill();
🎯 ¡Atrapa las Estrellas!
Usa el mouse para atrapar las estrellas ⭐ antes de que desaparezcan. ¡Evita los obstáculos rojos! 💥
0
Puntos
1
Nivel
❤️❤️❤️
Vidas
60
Tiempo
📚 Conceptos de Programación de Juegos
🔄 Game Loop (Bucle del Juego)
El corazón de cualquier juego. Se ejecuta continuamente para actualizar y dibujar el juego.
// Game Loop básico function gameLoop() { update(); // Actualizar lógica draw(); // Dibujar en pantalla requestAnimationFrame(gameLoop); } function update() { // Mover personajes, detectar colisiones player.x += player.velocidad; } function draw() { // Limpiar canvas y dibujar todo ctx.clearRect(0, 0, canvas.width, canvas.height); drawPlayer(); }
💥 Detección de Colisiones
Verificar cuando dos objetos se tocan en el juego.
// Detectar colisión entre rectángulos function detectarColision(obj1, obj2) { return obj1.x < obj2.x + obj2.width && obj1.x + obj1.width > obj2.x && obj1.y < obj2.y + obj2.height && obj1.y + obj1.height > obj2.y; }
🎯 Quiz - Programación de Juegos
1. ¿Qué método limpia el canvas?
2. ¿Para qué sirve requestAnimationFrame?
3. ¿Cómo se dibuja un círculo en canvas?
⭐
⭐
⭐