367 lines
19 KiB
HTML
367 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Clicker Game - PonyWave Tools</title>
|
||
<meta property="og:title" content="Clicker Game | PonyWave Tools">
|
||
<meta property="og:description" content="Ein einfaches Clicker-Spiel mit Upgrades und Erfolge">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://tools.ponywave.de/clicker">
|
||
<meta property="og:image" content="https://tools.ponywave.de/clicker/icon.png">
|
||
<link rel="icon" href="icon.png">
|
||
|
||
<!-- Umami Tracking -->
|
||
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="clicker"></script>
|
||
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<h1>🎮 Clicker Game</h1>
|
||
|
||
<nav>
|
||
<button class="tab active" onclick="switchTab('game')">Spiel</button>
|
||
<button class="tab" onclick="switchTab('stats')">Statistiken</button>
|
||
<button class="tab" onclick="switchTab('upgrades')">Upgrades</button>
|
||
<button class="tab" onclick="switchTab('achievements')">Erfolge</button>
|
||
<button class="tab" onclick="switchTab('settings')">Einstellungen</button>
|
||
</nav>
|
||
|
||
<!-- Game Tab -->
|
||
<div class="tab-content active" id="game">
|
||
<div id="score-container">
|
||
<div id="score">0</div>
|
||
</div>
|
||
<button class="button" onclick="clickScore()" id="clickButton">KLICKEN</button>
|
||
|
||
<div class="card" onclick="buyClickPower()" id="clickPowerCard">
|
||
<strong>Klick-Power erhöhen (+<span id="clickPowerValue">1</span>)</strong><br>
|
||
<span style="color: var(--label-color)">Kosten: <span id="clickPowerCost">10</span></span>
|
||
<div class="progress-container">
|
||
<div class="progress-bar" id="clickPowerProgress"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="buyIdle()" id="idleCard">
|
||
<strong>Idle-Power erhöhen (+<span id="idleValue">1</span>/s)</strong><br>
|
||
<span style="color: var(--label-color)">Kosten: <span id="idleCost">20</span></span>
|
||
<div class="progress-container">
|
||
<div class="progress-bar" id="idleProgress"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="buyAutoClicker()" id="autoClickerCard">
|
||
<strong>Auto-Klicker (<span id="autoClickerCount">0</span>)</strong><br>
|
||
<span style="color: var(--label-color)" id="autoClickerDesc">Klickt automatisch alle 5s</span><br>
|
||
<span style="color: var(--label-color)">Kosten: <span id="autoClickerCost">100</span></span>
|
||
<div class="progress-container">
|
||
<div class="progress-bar" id="autoClickerProgress"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="button prestige" id="prestigeBtn" onclick="prestige()" style="display:none;">
|
||
Prestige (Zurücksetzen für +<span id="prestigeBonus">1</span>x Multiplikator)
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tab-content" id="stats">
|
||
<div class="card">
|
||
<div class="stats-line"><strong>Gesamte Klicks:</strong> <span id="totalClicks">0</span></div>
|
||
<div class="stats-line"><strong>Klick-Power:</strong> <span id="clickPowerStat">1</span></div>
|
||
<div class="stats-line"><strong>Idle-Power:</strong> <span id="idleStat">0/s</span></div>
|
||
<div class="stats-line"><strong>Auto-Klicker:</strong> <span id="autoClickerStat">0 (0/s)</span></div>
|
||
<div class="stats-line"><strong>Prestige Level:</strong> <span id="prestigeLevel">0</span></div>
|
||
<div class="stats-line"><strong>Prestige Bonus:</strong> <span id="prestigeBonusStat">1x</span></div>
|
||
<div class="stats-line"><strong>Spielzeit:</strong> <span id="timePlayed">0s</span></div>
|
||
<div class="stats-line"><strong>Gesamtpunktzahl:</strong> <span id="totalScore">0</span></div>
|
||
<div class="stats-line"><strong>Punkterate:</strong> <span id="scoreRate">0/s</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="upgrades">
|
||
<div class="card" onclick="buyDoubleClick()" id="doubleClickCard">
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" 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>
|
||
<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)" id="ultraPowerCostLabel">Kosten: <span id="ultraPowerCost">75000</span></span>
|
||
<div class="progress-container">
|
||
<div class="progress-bar" id="ultraPowerProgress"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="achievements">
|
||
<div id="achievementsList"></div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="settings">
|
||
<div class="toggle" onclick="toggleNotifications()">
|
||
<span>Benachrichtigungen</span>
|
||
<span id="notificationStatus">AN</span>
|
||
</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 (<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">
|
||
<button class="modal-close" onclick="closeShareModal()">×</button>
|
||
<h2 style="color: var(--secondary-color); margin-bottom: 20px;">🎉 Erfolge teilen</h2>
|
||
|
||
<div class="share-variants">
|
||
<button class="share-variant-btn" onclick="selectShareVariant(1)">Variante 1</button>
|
||
<button class="share-variant-btn" onclick="selectShareVariant(2)">Variante 2</button>
|
||
<button class="share-variant-btn" onclick="selectShareVariant(3)">Variante 3</button>
|
||
</div>
|
||
|
||
<textarea id="shareText" class="share-textarea"></textarea>
|
||
|
||
<div class="share-buttons">
|
||
<button class="button" onclick="copyShareText()">📋 Text kopieren</button>
|
||
</div>
|
||
|
||
<div class="social-share">
|
||
<p style="margin-bottom: 10px; color: var(--label-color);">Oder direkt teilen:</p>
|
||
<div class="social-buttons">
|
||
<button class="social-btn twitter" onclick="shareToSocial('twitter')">
|
||
<span style="font-size: 1.2em;">𝕏</span> X
|
||
</button>
|
||
<button class="social-btn whatsapp" onclick="shareToSocial('whatsapp')">
|
||
📱 WhatsApp
|
||
</button>
|
||
<button class="social-btn telegram" onclick="shareToSocial('telegram')">
|
||
✈️ Telegram
|
||
</button>
|
||
<button class="social-btn facebook" onclick="shareToSocial('facebook')">
|
||
👍 Facebook
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="copyFeedback" class="copy-feedback">✓ In Zwischenablage kopiert!</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>
|
||
<a href="https://tools.ponywave.de/">Zurück zur Startseite</a> |
|
||
© <span id="currentYear"></span> Akamaru | Made with <span class="heart">❤️</span> by Claude
|
||
</p>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|