Clicker Game

Score: 0

body { margin: 0; overflow: hidden; background-color: #f0f0f0; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { display: flex; flex-direction: column; align-items: center; } .target { width: 100px; height: 100px; background-color: #e74c3c; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; } .target:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.3); transform: scale(1.05); } .target:active { transform: scale(0.95); box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .score { margin-top: 20px; font-size: 24px; color: #333; text-shadow: 1px 1px 0 #fff; } .particle-canvas { position: absolute; top: 0; left: 0; pointer-events: none; /* Make canvas non-interactive */ } document.addEventListener('DOMContentLoaded', () => { const target = document.getElementById('target'); const scoreDisplay = document.getElementById('score'); const particleCanvas = document.getElementById('particleCanvas'); const ctx = particleCanvas.getContext('2d'); let score = 0; particleCanvas.width = window.innerWidth; particleCanvas.height = window.innerHeight; function updateScore() { scoreDisplay.textContent = `Score: ${score}`; } function createParticles(x, y) { const particles = []; for (let i = 0; i < 30; i++) { particles.push({ x: x, y: y, size: Math.random() * 4 + 1, speedX: Math.random() * 3 - 1.5, speedY: Math.random() * 3 - 1.5, color: `hsl(${Math.random() * 360}, 100%, 50%)`, opacity: 1, life: 20 }); } return particles; } function drawParticles(particlesArray) { particlesArray.forEach((p, index) => { ctx.fillStyle = p.color; ctx.globalAlpha = p.opacity; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); p.x += p.speedX; p.y += p.speedY; p.opacity -= 0.05; p.life -= 1; if (p.opacity <= 0 || p.life <= 0) { particlesArray.splice(index, 1); } }); if (particlesArray.length > 0) { requestAnimationFrame(() => drawParticles(particlesArray)); } } target.addEventListener('click', (e) => { score++; updateScore(); // Particle effect on click const rect = target.getBoundingClientRect(); const clickX = e.clientX - rect.left + target.offsetWidth / 2; const clickY = e.clientY - rect.top + target.offsetHeight / 2; const particles = createParticles(rect.left + clickX, rect.top + clickY); drawParticles(particles); }); window.addEventListener('resize', () => { particleCanvas.width = window.innerWidth; particleCanvas.height = window.innerHeight; }); });