Jasne, dodajmy kilka ulepszeń wizualnych. Prosta Gra Clicker

🖱️ Clicker Mania 🖱️

💰 Clicksy: 0

⚙️ Clicks/sek: 0

✨ Mnożnik: x1

Ulepszenia Sklepu

🤖 Auto Clicker (0)

Koszt: 10 Clicksów

🥚 Kup Jajko (Zwiększa mnożnik)

Koszt: 50 Clicksów

body { font-family: 'Poppins', sans-serif; /* Użycie nowej czcionki */ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #ece9e6 0%, #ffffff 100%); /* Subtelny gradient tła */ color: #333; user-select: none; } .game-container { background-color: #fff; padding: 30px 40px; /* Więcej paddingu */ border-radius: 15px; /* Bardziej zaokrąglone rogi */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Mocniejszy cień */ text-align: center; width: 90%; max-width: 450px; /* Nieco szerszy kontener */ border: 1px solid #eee; } h1 { color: #2a5298; /* Ciemniejszy niebieski */ margin-bottom: 25px; font-weight: 700; /* Grubsza czcionka */ } .stats-container { background-color: #f8f9fa; /* Jaśniejsze tło dla statystyk */ padding: 20px; border-radius: 8px; margin-bottom: 30px; border: 1px solid #e9ecef; display: flex; /* Użycie flexboxa dla lepszego układu */ justify-content: space-around; /* Równomierne rozmieszczenie */ flex-wrap: wrap; /* Zawijanie na mniejszych ekranach */ } .stat-item { margin: 5px 10px; /* Odstępy między statystykami */ text-align: center; } .stat-label { display: block; /* Etykieta nad wartością */ font-size: 0.9em; color: #6c757d; /* Szary kolor etykiety */ margin-bottom: 3px; } .stat-value { font-weight: 600; /* Pogrubiona wartość */ font-size: 1.2em; color: #007bff; } .actions { margin-bottom: 30px; } #click-button { padding: 18px 40px; /* Większy przycisk */ font-size: 1.6em; font-weight: 600; cursor: pointer; background: linear-gradient(45deg, #28a745, #218838); /* Gradient dla przycisku */ color: white; border: none; border-radius: 8px; /* Zaokrąglenie */ box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4); /* Cień */ transition: all 0.2s ease; /* Płynniejsze przejścia */ outline: none; /* Usunięcie domyślnego obramowania focus */ } #click-button:hover { background: linear-gradient(45deg, #218838, #1e7e34); /* Ciemniejszy gradient w hover */ box-shadow: 0 6px 12px rgba(40, 167, 69, 0.5); /* Większy cień w hover */ transform: translateY(-2px); /* Lekkie uniesienie */ } #click-button:active { transform: translateY(1px) scale(0.98); /* Efekt wciśnięcia */ box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3); /* Mniejszy cień przy wciśnięciu */ } .upgrades { margin-top: 30px; border-top: 2px solid #eee; /* Grubsza linia oddzielająca */ padding-top: 25px; } .upgrades h2 { color: #5a5a5a; /* Ciemniejszy szary dla nagłówka ulepszeń */ margin-bottom: 20px; font-size: 1.4em; } .upgrade-item { background-color: #ffffff; /* Białe tło dla elementu ulepszenia */ border: 1px solid #dee2e6; padding: 15px 20px; margin-bottom: 15px; border-radius: 8px; display: flex; /* Flexbox dla układu */ justify-content: space-between; /* Elementy na przeciwległych końcach */ align-items: center; /* Wyśrodkowanie w pionie */ transition: box-shadow 0.2s ease; } .upgrade-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Lekki cień w hover */ } .upgrade-info { text-align: left; /* Tekst wyrównany do lewej */ } .upgrade-name { font-weight: 600; margin: 0 0 5px 0; /* Mniejszy margines dolny */ color: #343a40; } .upgrade-cost { margin: 0; font-size: 0.9em; color: #6c757d; } .upgrade-item button { padding: 10px 18px; /* Dopasowany padding */ font-size: 1em; font-weight: 600; cursor: pointer; background: linear-gradient(45deg, #ffc107, #e0a800); /* Gradient dla przycisku ulepszenia */ color: #333; border: none; border-radius: 5px; box-shadow: 0 2px 5px rgba(255, 193, 7, 0.3); transition: all 0.2s ease; outline: none; } .upgrade-item button:hover { background: linear-gradient(45deg, #e0a800, #c69500); box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4); transform: translateY(-1px); } .upgrade-item button:disabled { background: #e9ecef; /* Jaśniejszy szary dla nieaktywnego */ color: #adb5bd; cursor: not-allowed; box-shadow: none; transform: none; } .upgrade-item button:active:not(:disabled) { transform: translateY(0px) scale(0.98); box-shadow: 0 1px 3px rgba(255, 193, 7, 0.2); } // --- Elementy DOM --- const clicksDisplay = document.getElementById('clicks-display'); const cpsDisplay = document.getElementById('cps-display'); const multiplierDisplay = document.getElementById('multiplier-display'); const clickButton = document.getElementById('click-button'); const autoClickerCountDisplay = document.getElementById('auto-clicker-count'); const autoClickerCostDisplay = document.getElementById('auto-clicker-cost'); const buyAutoClickerButton = document.getElementById('buy-auto-clicker'); const eggCostDisplay = document.getElementById('egg-cost'); const buyEggButton = document.getElementById('buy-egg'); // --- Stan Gry --- let clicks = 0; let clickMultiplier = 1; let autoClickers = 0; let autoClickerCost = 10; let eggCost = 50; // --- Funkcje Gry --- // Formatowanie dużych liczb (opcjonalne, dla czytelności) function formatNumber(num) { // Proste formatowanie, można rozbudować if (num < 1000) return Math.floor(num); if (num < 1000000) return (num / 1000).toFixed(1) + 'K'; if (num < 1000000000) return (num / 1000000).toFixed(1) + 'M'; return (num / 1000000000).toFixed(1) + 'B'; } // Aktualizacja wyświetlaczy function updateDisplay() { clicksDisplay.textContent = formatNumber(clicks); cpsDisplay.textContent = formatNumber(autoClickers); multiplierDisplay.textContent = formatNumber(clickMultiplier); autoClickerCountDisplay.textContent = autoClickers; // Licznik bez formatowania autoClickerCostDisplay.textContent = formatNumber(autoClickerCost); eggCostDisplay.textContent = formatNumber(eggCost); // Włącz/wyłącz przyciski w zależności od ilości Clicksów buyAutoClickerButton.disabled = clicks < autoClickerCost; buyEggButton.disabled = clicks < eggCost; } // Obsługa kliknięcia głównego przycisku function handleClick() { clicks += 1 * clickMultiplier; updateDisplay(); // Dodajmy prostą animację kliknięcia (opcjonalne) clickButton.style.transform = 'translateY(1px) scale(0.98)'; setTimeout(() => { // Sprawdź, czy przycisk nie jest w stanie hover (aby uniknąć konfliktu) if (!clickButton.matches(':hover')) { clickButton.style.transform = 'translateY(0) scale(1)'; } else { clickButton.style.transform = 'translateY(-2px)'; // Wróć do stanu hover } }, 80); // Krótki czas trwania animacji } // Obsługa kupna Auto Clickera function buyAutoClicker() { if (clicks >= autoClickerCost) { clicks -= autoClickerCost; autoClickers++; // Zwiększ koszt następnego Auto Clickera (np. o 15%) autoClickerCost = Math.ceil(autoClickerCost * 1.15); updateDisplay(); } } // Obsługa kupna Jajka (prosta wersja - zwiększa mnożnik) function buyEgg() { if (clicks >= eggCost) { clicks -= eggCost; clickMultiplier++; // Zwiększ mnożnik za każde jajko // Zwiększ koszt następnego jajka eggCost = Math.ceil(eggCost * 1.5); updateDisplay(); } } // Logika Auto Clickerów (działająca co sekundę) function autoClickerTick() { clicks += autoClickers; // Dodaj Clicksy za każdy posiadany Auto Clicker updateDisplay(); // Aktualizuj co sekundę, nawet jeśli nie ma kliknięć } // --- Inicjalizacja Gry --- // Dodanie nasłuchiwaczy zdarzeń clickButton.addEventListener('click', handleClick); buyAutoClickerButton.addEventListener('click', buyAutoClicker); buyEggButton.addEventListener('click', buyEgg); // Uruchomienie pętli Auto Clickerów (co 1000ms = 1 sekunda) setInterval(autoClickerTick, 1000); // Pierwsze wywołanie aktualizacji wyświetlacza updateDisplay();