Spaces:

themeht
/

tap-n-stack-coin-collector

Running

a tapping game that user taps on a character and for teach taps it gives a coin and the coins are stored in the user balance

083db13 verified about 1 year ago

Raw History Blame Contribute Delete

3.17 kB

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);
    }
});

	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);
	}
	});