Aaaa
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Courtois y Mecheros</title> <style> body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; } canvas { display: block; } #game-over { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 2; display: none; } #game-over button { margin-top: 20px; padding: 10px 20px; font-size: 18px; background-color: white; color: black; border: none; cursor: pointer; } #game-over button:hover { background-color: lightgray; } #score { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); color: white; padding: 10px; border-radius: 5px; font-size: 20px; } </style></head><body> <div id="game-over"> <h1>Un mechero te dio</h1> <p id="final-score"></p> <button onclick="restartGame()">Volver a jugar</button> </div> <div id="score">Puntos: 0</div> <canvas id="gameCanvas"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight;
let score = 0; let courtois = { x: canvas.width / 2, y: canvas.height - 100, radius: 30,isHit: false }; let mecheros = []; let speed = 4; // Velocidad inicial let maxMecheros = 2; // Número inicial de mecheros const maxLimitMecheros = 20; // Límite máximo de mecheros
function spawnMechero() { if (mecheros.length < maxMecheros) { const x = Math.random() * canvas.width; const y = -50; const speedY = speed + Math.random() * 2; mecheros.push({ x, y, speedY }); } }
function updateMecheros() { for (let i = 0; i < mecheros.length; i++) { mecheros[i].y += mecheros[i].speedY;
// Colisión const dx = mecheros[i].x - courtois.x; const dy = mecheros[i].y - courtois.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < courtois.radius) { courtois.isHit = true; endGame(); return; } // Eliminar mecheros fuera de la pantalla if (mecheros[i].y > canvas.height) { mecheros.splice(i, 1); i--; } } }
function drawMecheros() { for (const mechero of mecheros) { ctx.drawImage(mecheroImage, mechero.x - 20, mechero.y - 20, 40,40); } }
function drawCourtois() { ctx.save(); if (courtois.isHit) { ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(courtois.x, courtois.y, courtois.radius, 0, Math.PI * 2); ctx.fill(); } else { ctx.drawImage( courtoisImage, courtois.x - courtois.radius, courtois.y - courtois.radius, courtois.radius * 2, courtois.radius * 2 ); } ctx.restore(); }
function updateScore() { score += 2; document.getElementById('score').innerText = `Puntos: ${score}`; }
function increaseDifficulty() { if (maxMecheros < maxLimitMecheros) maxMecheros += 2; speed += 0.5; }
function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(background, 0, 0, canvas.width, canvas.height); updateMecheros(); drawMecheros(); drawCourtois(); }
function startGame() { score = 0; courtois.isHit = false; mecheros = []; maxMecheros = 2; speed = 4; gameInterval = setInterval(gameLoop, 16); spawnInterval = setInterval(spawnMechero, 1000); difficultyInterval = setInterval(increaseDifficulty, 5000); scoreInterval = setInterval(updateScore, 1000); }
function endGame() { clearInterval(gameInterval); clearInterval(spawnInterval); clearInterval(difficultyInterval); clearInterval(scoreInterval); document.getElementById('final-score').innerText = `Puntos obtenidos: ${score}`; document.getElementById('game-over').style.display = 'flex'; }
function restartGame() { document.getElementById('game-over').style.display = 'none'; startGame(); }
startGame(); </script></body></html>
