Superhero Fly #gameCanvas { border: 1px solid black; background: skyblue; } const canvas = document.getElementById(‘gameCanvas’); const ctx = canvas.getContext(‘2d’); // Superhéroe const superhero = { x: 50, y: 300, width: 30, height: 30, gravity: 0.5, lift: -10, velocity: 0 }; // Edificios (obstáculos) let buildings = []; const buildingWidth = 50; const gap = 150; let frameCount = 0; // Control del juego let score = 0; let gameOver = false; // Evento para hacer volar al superhéroe document.addEventListener(‘keydown’, (e) => { if (e.code === ‘Space’) { superhero.velocity = superhero.lift; } }); // Crear nuevos edificios function spawnBuilding() { const height = Math.random() * (canvas.height – gap – 100) + 50; buildings.push({ x: canvas.width, topHeight: height, bottomHeight: canvas.height – height – gap }); } // Detección de colisiones function checkCollision() { for (let building of buildings) { if (superhero.x + superhero.width > building.x && superhero.x < building.x + buildingWidth) { if (superhero.y canvas.height – building.bottomHeight) { return true; } } } // Colisión con los bordes if (superhero.y = canvas.height) { return true; } return false; } // Bucle principal del juego function gameLoop() { if (gameOver) { ctx.fillStyle = ‘red’; ctx.font = ’30px Arial’; ctx.fillText(‘Game Over! Score: ‘ + score, 80, 300); return; } // Limpiar canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Actualizar superhéroe superhero.velocity += superhero.gravity; superhero.y += superhero.velocity; // Dibujar superhéroe (rectángulo rojo con capa) ctx.fillStyle = ‘red’; ctx.fillRect(superhero.x, superhero.y, superhero.width, superhero.height); ctx.fillStyle = ‘blue’; ctx.fillRect(superhero.x – 10, superhero.y + 5, 10, 15); // Capa // Generar edificios frameCount++; if (frameCount % 100 === 0) { spawnBuilding(); } // Actualizar y dibujar edificios for (let i = buildings.length – 1; i >= 0; i–) { buildings[i].x -= 2; // Dibujar edificios ctx.fillStyle = ‘gray’; ctx.fillRect(buildings[i].x, 0, buildingWidth, buildings[i].topHeight); ctx.fillRect(buildings[i].x, canvas.height – buildings[i].bottomHeight, buildingWidth, buildings[i].bottomHeight); // Actualizar puntuación if (buildings[i].x + buildingWidth === superhero.x) { score++; } // Eliminar edificios fuera de pantalla if (buildings[i].x + buildingWidth < 0) { buildings.splice(i, 1); } } // Mostrar puntuación ctx.fillStyle = 'black'; ctx.font = '20px Arial'; ctx.fillText('Score: ' + score, 10, 30); // Verificar colisión if (checkCollision()) { gameOver = true; } requestAnimationFrame(gameLoop); } // Iniciar el juego spawnBuilding(); gameLoop(); ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​