Rain Lad: นักจับท้องฟ้า

Time 15s

Score 0

Combo 0x

⚡ Speed Tap

Tap as many targets as you can in 15 seconds!

`; document.body.appendChild(container); const arenaEl = document.getElementById('arena'); const overlayEl = document.getElementById('overlay'); const startBtn = document.getElementById('start-btn'); const timerVal = document.getElementById('timer-val'); const scoreVal = document.getElementById('score-val'); const comboVal = document.getElementById('combo-val'); const titleEl = document.getElementById('title'); const descEl = document.getElementById('description'); // 6. Game Core Engine function startGame() { triggerHaptic('medium'); score = 0; combo = 0; hits = 0; misses = 0; timeLeft = GAME_DURATION; scoreVal.textContent = '0'; comboVal.textContent = '0x'; timerVal.textContent = `${timeLeft}s`; overlayEl.style.display = 'none'; // Start 1-second countdown loop gameTimer = setInterval(() => { timeLeft--; timerVal.textContent = `${timeLeft}s`; if (timeLeft <= 0) { endGame(); } }, 1000); spawnTarget(); } function spawnTarget() { if (activeTarget) { activeTarget.remove(); activeTarget = null; } const target = document.createElement('div'); target.className = 'target'; // Random coordinates within the arena boundaries const targetSize = 64; const maxX = arenaEl.clientWidth - targetSize - 20; const maxY = arenaEl.clientHeight - targetSize - 20; const randomX = Math.max(10, Math.floor(Math.random() * maxX)); const randomY = Math.max(10, Math.floor(Math.random() * maxY)); target.style.left = `${randomX}px`; target.style.top = `${randomY}px`; // Handle Tap / Click on Target target.addEventListener('pointerdown', (e) => { e.stopPropagation(); hitTarget(target, randomX, randomY); }); arenaEl.appendChild(target); activeTarget = target; // Despawn target after dynamic delay based on remaining time (speeds up as time passes) const despawnTime = Math.max(450, 900 - (GAME_DURATION - timeLeft) * 25); clearTimeout(targetTimer); targetTimer = setTimeout(() => { if (activeTarget === target) { missTarget(); } }, despawnTime); } function hitTarget(target, x, y) { triggerHaptic('light'); hits++; combo++; score += 10 + combo * 2; // Show floating combo text showComboText(x, y, `+${10 + combo * 2}`); scoreVal.textContent = score; comboVal.textContent = `${combo}x`; clearTimeout(targetTimer); spawnTarget(); } function missTarget() { triggerHaptic('error'); misses++; combo = 0; comboVal.textContent = '0x'; if (activeTarget) { activeTarget.remove(); activeTarget = null; } spawnTarget(); } function showComboText(x, y, text) { const badge = document.createElement('div'); badge.className = 'combo-badge'; badge.textContent = text; badge.style.left = `${x + 15}px`; badge.style.top = `${y}px`; arenaEl.appendChild(badge); setTimeout(() => badge.remove(), 600); } function endGame() { clearInterval(gameTimer); clearTimeout(targetTimer); if (activeTarget) { activeTarget.remove(); activeTarget = null; } triggerHaptic('success'); if (score > highScore) { highScore = score; localStorage.setItem('speed_game_highscore', highScore); } const totalTaps = hits + misses; const accuracy = totalTaps > 0 ? Math.round((hits / totalTaps) * 100) : 0; const cps = (hits / GAME_DURATION).toFixed(1); // Clicks Per Second titleEl.textContent = '⏱️ Game Over!'; descEl.innerHTML = ` Score: ${score} pts
High Score: ${highScore} pts
Accuracy: ${accuracy}%
Speed: ${cps} taps/sec `; startBtn.textContent = 'PLAY AGAIN'; overlayEl.style.display = 'flex'; } // Handle Misses when clicking blank arena space arenaEl.addEventListener('pointerdown', (e) => { if (e.target === arenaEl && timeLeft > 0 && overlayEl.style.display === 'none') { missTarget(); } }); startBtn.addEventListener('click', startGame); })();