84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
const gameArea = document.getElementById('game-area');
|
|
const scoreSpan = document.getElementById('score');
|
|
const timerSpan = document.getElementById('timer');
|
|
const startBtn = document.getElementById('start-btn');
|
|
const gameOverDiv = document.getElementById('game-over');
|
|
const finalScoreSpan = document.getElementById('final-score');
|
|
|
|
let score = 0;
|
|
let timer = 20; // duración del juego en segundos
|
|
let interval, timeout;
|
|
let playing = false;
|
|
|
|
function startGame() {
|
|
score = 0;
|
|
timer = 20;
|
|
scoreSpan.textContent = score;
|
|
timerSpan.textContent = timer;
|
|
gameArea.innerHTML = '';
|
|
gameOverDiv.classList.add('hidden');
|
|
startBtn.disabled = true;
|
|
playing = true;
|
|
|
|
// Iniciar contador regresivo
|
|
interval = setInterval(() => {
|
|
timer--;
|
|
timerSpan.textContent = timer;
|
|
if (timer <= 0) {
|
|
endGame();
|
|
}
|
|
}, 1000);
|
|
|
|
spawnCircle();
|
|
}
|
|
|
|
function endGame() {
|
|
playing = false;
|
|
clearInterval(interval);
|
|
clearTimeout(timeout);
|
|
gameArea.innerHTML = '';
|
|
startBtn.disabled = false;
|
|
|
|
// Mostrar resultado final
|
|
finalScoreSpan.textContent = score;
|
|
gameOverDiv.classList.remove('hidden');
|
|
}
|
|
|
|
function spawnCircle() {
|
|
if (!playing || timer <= 0) return;
|
|
|
|
// Crear círculo y posicionarlo aleatoriamente
|
|
const circle = document.createElement('div');
|
|
circle.className = 'circle';
|
|
|
|
// Cálculo de posición dentro de gameArea
|
|
const areaRect = gameArea.getBoundingClientRect();
|
|
const radius = 25; // la mitad de 50px
|
|
const maxLeft = gameArea.clientWidth - circle.offsetWidth;
|
|
const maxTop = gameArea.clientHeight - circle.offsetHeight;
|
|
const left = Math.floor(Math.random() * maxLeft);
|
|
const top = Math.floor(Math.random() * maxTop);
|
|
|
|
circle.style.left = left + 'px';
|
|
circle.style.top = top + 'px';
|
|
|
|
// Evento de clic
|
|
circle.onclick = function() {
|
|
score++;
|
|
scoreSpan.textContent = score;
|
|
gameArea.removeChild(circle);
|
|
spawnCircle();
|
|
};
|
|
|
|
gameArea.appendChild(circle);
|
|
|
|
// Si no lo clickean en 1.2s, desaparece y aparece otro
|
|
timeout = setTimeout(() => {
|
|
if (playing && gameArea.contains(circle)) {
|
|
gameArea.removeChild(circle);
|
|
spawnCircle();
|
|
}
|
|
}, 1200);
|
|
}
|
|
|
|
startBtn.onclick = startGame; |