File size: 3,174 Bytes
083db13 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
document.addEventListener('DOMContentLoaded', () => {
// Game state
let balance = localStorage.getItem('coinBalance') ? parseInt(localStorage.getItem('coinBalance')) : 0;
let totalTaps = localStorage.getItem('totalTaps') ? parseInt(localStorage.getItem('totalTaps')) : 0;
let coinsPerTap = 1;
// DOM elements
const character = document.getElementById('character');
const balanceDisplay = document.querySelector('#balance span');
const totalTapsDisplay = document.getElementById('total-taps');
const coinsPerTapDisplay = document.getElementById('coins-per-tap');
const coinEffect = document.getElementById('coin-effect');
// Initialize displays
updateDisplays();
// Tap handler
character.addEventListener('click', (e) => {
// Increment counters
totalTaps++;
balance += coinsPerTap;
// Save to localStorage
localStorage.setItem('coinBalance', balance);
localStorage.setItem('totalTaps', totalTaps);
// Update displays
updateDisplays();
// Create coin effect
createCoinEffect(e);
// Add temporary animation class
character.classList.add('animate-pulse');
setTimeout(() => {
character.classList.remove('animate-pulse');
}, 200);
});
function updateDisplays() {
balanceDisplay.textContent = balance.toLocaleString();
totalTapsDisplay.textContent = totalTaps.toLocaleString();
coinsPerTapDisplay.textContent = coinsPerTap;
}
function createCoinEffect(e) {
// Get character position
const rect = character.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
// Create multiple coins
for (let i = 0; i < 3; i++) {
const coin = document.createElement('div');
coin.classList.add('coin');
// Position randomly around the click point
const offsetX = (Math.random() - 0.5) * 40;
const offsetY = (Math.random() - 0.5) * 40;
coin.style.left = `${centerX + offsetX}px`;
coin.style.top = `${centerY + offsetY}px`;
// Random delay for animation
coin.style.animationDelay = `${i * 0.1}s`;
document.body.appendChild(coin);
// Remove coin after animation
setTimeout(() => {
coin.remove();
}, 800);
}
}
// Check for saved data on load
if (totalTaps > 0) {
// Show welcome back message
const welcomeBack = document.createElement('div');
welcomeBack.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-full shadow-lg z-50 animate-bounce';
welcomeBack.textContent = `Welcome back! You have ${balance} coins!`;
document.body.appendChild(welcomeBack);
setTimeout(() => {
welcomeBack.remove();
}, 3000);
}
}); |