1
0

Clicker: Funktionen erweitert

This commit is contained in:
Akamaru
2025-10-31 21:08:48 +01:00
parent 2c575dd211
commit 0e0110ba31
3 changed files with 284 additions and 54 deletions

View File

@@ -80,117 +80,130 @@
<div class="tab-content" id="upgrades">
<div class="card" onclick="buyDoubleClick()" id="doubleClickCard">
<strong>Doppelte Klick-Power</strong><br>
<strong>Doppelte Klick-Power</strong>
<span id="doubleClickOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Verdoppelt deine Klick-Power</span><br>
<span style="color: var(--label-color)">Kosten: <span id="doubleClickCost">500</span></span>
<span style="color: var(--label-color)" id="doubleClickCostLabel">Kosten: <span id="doubleClickCost">500</span></span>
<div class="progress-container">
<div class="progress-bar" id="doubleClickProgress"></div>
</div>
</div>
<div class="card" onclick="buyIdleMultiplier()" id="idleMultiplierCard">
<strong>Idle-Multiplikator</strong><br>
<strong>Idle-Multiplikator</strong>
<span id="idleMultiplierOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Macht Idle-Generierung 2x effektiver</span><br>
<span style="color: var(--label-color)">Kosten: <span id="idleMultiplierCost">1000</span></span>
<span style="color: var(--label-color)" id="idleMultiplierCostLabel">Kosten: <span id="idleMultiplierCost">1000</span></span>
<div class="progress-container">
<div class="progress-bar" id="idleMultiplierProgress"></div>
</div>
</div>
<div class="card" onclick="buyClickMultiplier()" id="clickMultiplierCard">
<strong>Klick-Multiplikator</strong><br>
<strong>Klick-Multiplikator</strong>
<span id="clickMultiplierOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Macht alle Klicks 1,5x effektiver</span><br>
<span style="color: var(--label-color)">Kosten: <span id="clickMultiplierCost">2000</span></span>
<span style="color: var(--label-color)" id="clickMultiplierCostLabel">Kosten: <span id="clickMultiplierCost">2000</span></span>
<div class="progress-container">
<div class="progress-bar" id="clickMultiplierProgress"></div>
</div>
</div>
<div class="card" onclick="buyFastAutoClicker()" id="fastAutoClickerCard">
<strong>Schnelle Auto-Clicker</strong><br>
<strong>Schnelle Auto-Clicker</strong>
<span id="fastAutoClickerOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Auto-Clicker klicken alle 3s statt 5s</span><br>
<span style="color: var(--label-color)">Kosten: <span id="fastAutoClickerCost">5000</span></span>
<span style="color: var(--label-color)" id="fastAutoClickerCostLabel">Kosten: <span id="fastAutoClickerCost">5000</span></span>
<div class="progress-container">
<div class="progress-bar" id="fastAutoClickerProgress"></div>
</div>
</div>
<div class="card" onclick="buyAutoClickerBoost()" id="autoClickerBoostCard">
<strong>Auto-Clicker Boost</strong><br>
<strong>Auto-Clicker Boost</strong>
<span id="autoClickerBoostOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Auto-Clicker sind 2x stärker</span><br>
<span style="color: var(--label-color)">Kosten: <span id="autoClickerBoostCost">10000</span></span>
<span style="color: var(--label-color)" id="autoClickerBoostCostLabel">Kosten: <span id="autoClickerBoostCost">10000</span></span>
<div class="progress-container">
<div class="progress-bar" id="autoClickerBoostProgress"></div>
</div>
</div>
<div class="card" onclick="buyMegaClick()" id="megaClickCard">
<strong>Mega-Klick</strong><br>
<strong>Mega-Klick</strong>
<span id="megaClickOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Klicks sind 3x stärker</span><br>
<span style="color: var(--label-color)">Kosten: <span id="megaClickCost">15000</span></span>
<span style="color: var(--label-color)" id="megaClickCostLabel">Kosten: <span id="megaClickCost">15000</span></span>
<div class="progress-container">
<div class="progress-bar" id="megaClickProgress"></div>
</div>
</div>
<div class="card" onclick="buyHyperIdle()" id="hyperIdleCard">
<strong>Hyper Idle</strong><br>
<strong>Hyper Idle</strong>
<span id="hyperIdleOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Idle-Power ist 3x stärker</span><br>
<span style="color: var(--label-color)">Kosten: <span id="hyperIdleCost">20000</span></span>
<span style="color: var(--label-color)" id="hyperIdleCostLabel">Kosten: <span id="hyperIdleCost">20000</span></span>
<div class="progress-container">
<div class="progress-bar" id="hyperIdleProgress"></div>
</div>
</div>
<div class="card" onclick="buyPrestigeBoost()" id="prestigeBoostCard">
<strong>Prestige-Boost</strong><br>
<strong>Prestige-Boost</strong>
<span id="prestigeBoostOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Prestige gibt doppelten Bonus</span><br>
<span style="color: var(--label-color)">Kosten: <span id="prestigeBoostCost">25000</span></span>
<span style="color: var(--label-color)" id="prestigeBoostCostLabel">Kosten: <span id="prestigeBoostCost">25000</span></span>
<div class="progress-container">
<div class="progress-bar" id="prestigeBoostProgress"></div>
</div>
</div>
<div class="card" onclick="buySuperMultiplier()" id="superMultiplierCard">
<strong>Super-Multiplikator</strong><br>
<strong>Super-Multiplikator</strong>
<span id="superMultiplierOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Alle Einnahmen +50%</span><br>
<span style="color: var(--label-color)">Kosten: <span id="superMultiplierCost">30000</span></span>
<span style="color: var(--label-color)" id="superMultiplierCostLabel">Kosten: <span id="superMultiplierCost">30000</span></span>
<div class="progress-container">
<div class="progress-bar" id="superMultiplierProgress"></div>
</div>
</div>
<div class="card" onclick="buyTimeBonus()" id="timeBonusCard">
<strong>Zeit-Bonus</strong><br>
<strong>Zeit-Bonus</strong>
<span id="timeBonusOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">+5% zu allem pro Stunde Spielzeit</span><br>
<span style="color: var(--label-color)">Kosten: <span id="timeBonusCost">35000</span></span>
<span style="color: var(--label-color)" id="timeBonusCostLabel">Kosten: <span id="timeBonusCost">35000</span></span>
<div class="progress-container">
<div class="progress-bar" id="timeBonusProgress"></div>
</div>
</div>
<div class="card" onclick="buyGoldenClick()" id="goldenClickCard">
<strong>Golden Click</strong><br>
<strong>Golden Click</strong>
<span id="goldenClickOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">10% Chance auf kritischen Klick (10x)</span><br>
<span style="color: var(--label-color)">Kosten: <span id="goldenClickCost">40000</span></span>
<span style="color: var(--label-color)" id="goldenClickCostLabel">Kosten: <span id="goldenClickCost">40000</span></span>
<div class="progress-container">
<div class="progress-bar" id="goldenClickProgress"></div>
</div>
</div>
<div class="card" onclick="buyComboSystem()" id="comboSystemCard">
<strong>Combo-System</strong><br>
<strong>Combo-System</strong>
<span id="comboSystemOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Schnelle Klicks geben +10% Bonus</span><br>
<span style="color: var(--label-color)">Kosten: <span id="comboSystemCost">50000</span></span>
<span style="color: var(--label-color)" id="comboSystemCostLabel">Kosten: <span id="comboSystemCost">50000</span></span>
<div class="progress-container">
<div class="progress-bar" id="comboSystemProgress"></div>
</div>
</div>
<div class="card" onclick="buyUltraPower()" id="ultraPowerCard">
<strong>Ultra-Power</strong><br>
<strong>Ultra-Power</strong>
<span id="ultraPowerOwned" style="color: var(--success); margin-left: 8px; display: none;">✓ Gekauft</span><br>
<span style="color: var(--label-color)">Alle Multiplikatoren +50%</span><br>
<span style="color: var(--label-color)">Kosten: <span id="ultraPowerCost">75000</span></span>
<span style="color: var(--label-color)" id="ultraPowerCostLabel">Kosten: <span id="ultraPowerCost">75000</span></span>
<div class="progress-container">
<div class="progress-bar" id="ultraPowerProgress"></div>
</div>
@@ -208,9 +221,99 @@
</div>
<button class="button" onclick="openShareModal()" style="margin-top: 20px;">Erfolge teilen 🎉</button>
<button class="button" onclick="resetGame()" style="background: var(--danger); margin-top: 20px;">Spiel zurücksetzen</button>
<div class="card" style="margin-top: 25px; cursor: default;">
<h3 style="color: var(--secondary-color); margin-bottom: 15px;">📖 Spielanleitung</h3>
<div style="margin-bottom: 20px;">
<strong style="color: var(--text-color);">Grundprinzip:</strong>
<p style="color: var(--label-color); margin: 8px 0; line-height: 1.5;">
Klicke auf den KLICKEN-Button um Punkte zu sammeln. Nutze deine Punkte, um Upgrades zu kaufen,
die dir mehr Punkte pro Klick oder automatische Punktegenerierung geben.
</p>
</div>
<div style="margin-bottom: 20px;">
<strong style="color: var(--text-color);">Basis-Upgrades:</strong>
<ul style="color: var(--label-color); margin: 8px 0; margin-left: 20px; line-height: 1.6;">
<li><strong>Klick-Power:</strong> Erhöht die Punkte pro Klick (+1 pro Upgrade)</li>
<li><strong>Idle-Power:</strong> Generiert automatisch Punkte pro Sekunde (+1/s pro Upgrade)</li>
<li><strong>Auto-Klicker:</strong> Führt automatisch alle 5s einen Klick aus (stapelbar)</li>
</ul>
</div>
<div style="margin-bottom: 20px;">
<strong style="color: var(--text-color);">Premium-Upgrades (einmalig):</strong>
<ul style="color: var(--label-color); margin: 8px 0; margin-left: 20px; line-height: 1.6;">
<li><strong>Doppelte Klick-Power:</strong> Verdoppelt deine Klick-Power (×2)</li>
<li><strong>Idle-Multiplikator:</strong> Macht Idle-Generierung doppelt so effektiv (×2)</li>
<li><strong>Klick-Multiplikator:</strong> Alle Klicks werden um 50% verstärkt (×1,5)</li>
<li><strong>Schnelle Auto-Clicker:</strong> Auto-Clicker klicken alle 3s statt 5s</li>
<li><strong>Auto-Clicker Boost:</strong> Auto-Clicker sind doppelt so stark (×2)</li>
<li><strong>Mega-Klick:</strong> Klicks sind dreifach stärker (×3)</li>
<li><strong>Hyper Idle:</strong> Idle-Power ist dreifach stärker (×3)</li>
<li><strong>Prestige-Boost:</strong> Prestige gibt doppelten Multiplikator</li>
<li><strong>Super-Multiplikator:</strong> Alle Einnahmen werden um 50% erhöht</li>
<li><strong>Zeit-Bonus:</strong> +5% zu allem pro Stunde Spielzeit (unbegrenzt)</li>
<li><strong>Golden Click:</strong> 10% Chance auf kritischen Klick (×10 Punkte)</li>
<li><strong>Combo-System:</strong> Schnelle Klicks (&lt;2s) geben +10% Bonus pro Klick in der Combo</li>
<li><strong>Ultra-Power:</strong> Alle Multiplikatoren werden um 50% verstärkt</li>
</ul>
</div>
<div style="margin-bottom: 0;">
<strong style="color: var(--text-color);">Prestige-System:</strong>
<p style="color: var(--label-color); margin: 8px 0; line-height: 1.5;">
Ab 10.000 Punkten kannst du Prestige durchführen. Dies setzt deine Punkte, Klick-Power, Idle-Power
und Auto-Clicker zurück, aber du erhältst einen permanenten Multiplikator auf alle Einnahmen.
Deine gekauften Premium-Upgrades bleiben erhalten!
</p>
</div>
</div>
</div>
<div id="notifications"></div>
<!-- Reset Confirm Modal -->
<div id="resetModal" class="modal">
<div class="modal-overlay" onclick="closeResetModal()"></div>
<div class="modal-content" style="max-width: 400px;">
<button class="modal-close" onclick="closeResetModal()">×</button>
<h2 style="color: var(--danger); margin-bottom: 20px;">⚠️ Spiel zurücksetzen</h2>
<p style="margin-bottom: 20px; line-height: 1.6;">
Bist du sicher, dass du <strong>ALLE Fortschritte</strong> zurücksetzen möchtest?
<br><br>
Dies kann <strong style="color: var(--danger);">nicht rückgängig gemacht werden</strong>!
</p>
<div style="display: flex; gap: 10px; flex-direction: column;">
<button class="button" onclick="confirmReset()" style="background: var(--danger);">
Ja, alles zurücksetzen
</button>
<button class="button" onclick="closeResetModal()" style="background: var(--card-bg); color: var(--text-color);">
Abbrechen
</button>
</div>
</div>
</div>
<!-- Prestige Confirm Modal -->
<div id="prestigeModal" class="modal">
<div class="modal-overlay" onclick="closePrestigeModal()"></div>
<div class="modal-content" style="max-width: 450px;">
<button class="modal-close" onclick="closePrestigeModal()">×</button>
<h2 style="color: var(--secondary-color); margin-bottom: 20px;">✨ Prestige durchführen?</h2>
<p id="prestigeModalText" style="margin-bottom: 20px; line-height: 1.6;"></p>
<div style="display: flex; gap: 10px; flex-direction: column;">
<button class="button" onclick="confirmPrestige()">
Ja, Prestige durchführen
</button>
<button class="button" onclick="closePrestigeModal()" style="background: var(--card-bg); color: var(--text-color);">
Abbrechen
</button>
</div>
</div>
</div>
<div id="shareModal" class="modal">
<div class="modal-overlay" onclick="closeShareModal()"></div>
<div class="modal-content">