Jasne, rozbudujmy grę o kilka dodatkowych funkcji, takich jak ulepszenia i automatyczne kliknięcia. Kapibara Kliker Pro!

Kapibara Kliker Pro!

Wynik: 0

Kliknięć/sek: 0 | Moc kliknięcia: 1

Ulepszenia

body { font-family: 'Roboto', sans-serif; display: flex; justify-content: center; align-items: flex-start; /* Align top */ min-height: 100vh; margin: 0; padding-top: 30px; /* Add some space at the top */ background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%); /* Green gradient */ overflow-y: auto; /* Allow scrolling if content overflows */ } #game-container { text-align: center; background-color: rgba(255, 255, 255, 0.95); padding: 30px 40px; border-radius: 25px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.4); width: 90%; max-width: 600px; /* Limit max width */ } h1 { font-family: 'Pacifico', cursive; color: #388e3c; /* Darker green */ font-size: 3.5em; margin-bottom: 15px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); } #main-game { margin-bottom: 30px; } #score-display { font-size: 2.2em; font-weight: bold; color: #2e7d32; /* Even darker green */ margin-bottom: 5px; background-color: #e8f5e9; /* Light green background */ padding: 12px 25px; border-radius: 15px; display: inline-block; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } #stats-display { font-size: 1em; color: #555; margin-bottom: 25px; } #score { font-size: 1.3em; vertical-align: middle; } #capybara-area { margin-top: 10px; } #capybara-container { position: relative; display: inline-block; } #capybara { width: 280px; /* Slightly larger */ height: auto; cursor: pointer; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); transition: transform 0.1s ease-out, box-shadow 0.2s ease; background-color: #eee; /* Placeholder bg */ } #capybara:hover { transform: scale(1.04); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); } #capybara:active { transform: scale(0.97); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } /* Floating text styles */ #floating-text-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; border-radius: 50%; } .floating-text { position: absolute; font-size: 1.5em; font-weight: bold; color: rgba(255, 215, 0, 0.9); /* Gold color */ text-shadow: 1px 1px 2px rgba(0,0,0,0.5); animation: float-up 1s ease-out forwards; user-select: none; /* Prevent text selection */ white-space: nowrap; } @keyframes float-up { 0% { transform: translateY(0) scale(0.8); opacity: 1; } 100% { transform: translateY(-80px) scale(1.2); /* Float higher */ opacity: 0; } } /* Upgrades Section */ #upgrades-section { margin-top: 30px; padding-top: 20px; border-top: 2px dashed #ccc; } #upgrades-section h2 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #4caf50; /* Material green */ margin-bottom: 20px; font-size: 1.8em; } .upgrade-controls { display: flex; justify-content: center; gap: 15px; /* Space between buttons */ flex-wrap: wrap; /* Allow wrapping on smaller screens */ margin-bottom: 20px; } #upgrades-section button { font-family: 'Roboto', sans-serif; font-size: 0.9em; padding: 12px 18px; cursor: pointer; border: none; border-radius: 8px; background-color: #ff9800; /* Orange */ color: white; transition: background-color 0.2s ease, transform 0.1s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); line-height: 1.4; /* Improve readability */ } #upgrades-section button:hover:not(:disabled) { background-color: #fb8c00; /* Darker orange */ transform: translateY(-2px); } #upgrades-section button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 3px rgba(0,0,0,0.1); } #upgrades-section button:disabled { background-color: #bdbdbd; /* Grey */ cursor: not-allowed; opacity: 0.7; } #reset-progress-btn { margin-top: 15px; background-color: #f44336; /* Red */ font-size: 0.8em; padding: 8px 15px; } #reset-progress-btn:hover { background-color: #d32f2f; /* Darker red */ } // --- DOM Elements --- const scoreDisplay = document.getElementById('score'); const cpsDisplay = document.getElementById('cps'); const clickPowerDisplay = document.getElementById('click-power'); const capybaraImage = document.getElementById('capybara'); const floatingTextContainer = document.getElementById('floating-text-container'); const upgradeClickBtn = document.getElementById('upgrade-click-btn'); const upgradeClickCostDisplay = document.getElementById('upgrade-click-cost'); const upgradeAutoClickBtn = document.getElementById('upgrade-autoclick-btn'); const upgradeAutoClickCostDisplay = document.getElementById('upgrade-autoclick-cost'); const resetProgressBtn = document.getElementById('reset-progress-btn'); // --- Game State Variables --- let score = 0; let clickPower = 1; let autoClickRate = 0; // Clicks per second from autoclickers let upgradeClickCost = 10; let upgradeAutoClickCost = 50; // --- Initialization --- loadGame(); // Load saved progress updateDisplays(); checkButtons(); // --- Main Game Loop (for auto-clickers) --- setInterval(() => { increaseScore(autoClickRate); // Add score from auto-clickers every second checkButtons(); // Check if buttons should be enabled/disabled // Note: updateDisplays() is called within increaseScore }, 1000); // --- Event Listeners --- capybaraImage.addEventListener('click', (event) => { increaseScore(clickPower); createFloatingText(`+${clickPower}`, event.clientX, event.clientY); checkButtons(); // Check buttons after score increases }); upgradeClickBtn.addEventListener('click', () => { if (score >= upgradeClickCost) { score -= upgradeClickCost; clickPower++; upgradeClickCost = Math.ceil(upgradeClickCost * 1.15); // Increase cost updateDisplays(); checkButtons(); saveGame(); } }); upgradeAutoClickBtn.addEventListener('click', () => { if (score >= upgradeAutoClickCost) { score -= upgradeAutoClickCost; autoClickRate++; upgradeAutoClickCost = Math.ceil(upgradeAutoClickCost * 1.20); // Increase cost more steeply updateDisplays(); checkButtons(); saveGame(); } }); resetProgressBtn.addEventListener('click', () => { if (confirm("Czy na pewno chcesz zresetować cały postęp? Tej akcji nie można cofnąć!")) { localStorage.removeItem('capybaraClickerSave'); // Reset variables to initial state score = 0; clickPower = 1; autoClickRate = 0; upgradeClickCost = 10; upgradeAutoClickCost = 50; // Update UI updateDisplays(); checkButtons(); alert("Postęp został zresetowany."); } }); // --- Core Functions --- function increaseScore(amount) { if (amount > 0) { score += amount; updateDisplays(); // Update score display immediately // Saving frequently can be resource intensive, consider saving less often // saveGame(); } } function updateDisplays() { scoreDisplay.textContent = Math.floor(score); // Display whole numbers cpsDisplay.textContent = autoClickRate; clickPowerDisplay.textContent = clickPower; upgradeClickCostDisplay.textContent = upgradeClickCost; upgradeAutoClickCostDisplay.textContent = upgradeAutoClickCost; } function checkButtons() { upgradeClickBtn.disabled = score < upgradeClickCost; upgradeAutoClickBtn.disabled = score < upgradeAutoClickCost; } function createFloatingText(text, clickX, clickY) { const floatingText = document.createElement('div'); floatingText.classList.add('floating-text'); floatingText.textContent = text; // Position relative to the container, centered near the click const rect = floatingTextContainer.getBoundingClientRect(); const x = clickX - rect.left; const y = clickY - rect.top; floatingText.style.left = `${x}px`; floatingText.style.top = `${y}px`; // Center the text element itself on the coordinates floatingText.style.transform = 'translate(-50%, -50%)'; floatingTextContainer.appendChild(floatingText); // Remove after animation floatingText.addEventListener('animationend', () => { floatingText.remove(); }); } // --- Save/Load --- function saveGame() { const gameState = { score: score, clickPower: clickPower, autoClickRate: autoClickRate, upgradeClickCost: upgradeClickCost, upgradeAutoClickCost: upgradeAutoClickCost, }; localStorage.setItem('capybaraClickerSave', JSON.stringify(gameState)); // console.log("Game Saved"); // For debugging } function loadGame() { const savedState = localStorage.getItem('capybaraClickerSave'); if (savedState) { try { const gameState = JSON.parse(savedState); score = gameState.score || 0; clickPower = gameState.clickPower || 1; autoClickRate = gameState.autoClickRate || 0; upgradeClickCost = gameState.upgradeClickCost || 10; upgradeAutoClickCost = gameState.upgradeAutoClickCost || 50; // console.log("Game Loaded"); // For debugging } catch (e) { console.error("Error loading saved game state:", e); // Optionally reset to default if loading fails resetToDefaults(); } } else { // console.log("No save game found, starting new game."); resetToDefaults(); // Ensure defaults if no save exists } updateDisplays(); // Ensure UI reflects loaded or default state checkButtons(); } function resetToDefaults() { score = 0; clickPower = 1; autoClickRate = 0; upgradeClickCost = 10; upgradeAutoClickCost = 50; } // Save game periodically and on window close for safety setInterval(saveGame, 15000); // Save every 15 seconds window.addEventListener('beforeunload', saveGame); // Save when closing tab/browser