Akamaru/PonyWave-Tools
1
0
Fork 0
Code Issues Activity

Clicker: Funktionen erweitert

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

155
clicker/index.html
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">

177
clicker/script.js
View File

@@ -184,6 +184,21 @@ function updateUI() {
updateCardState('timeBonusCard', !timeBonus && score >= timeBonusCost);
updateCardState('ultraPowerCard', !ultraPower && score >= ultraPowerCost);
// Update premium upgrade "Gekauft" status
updatePremiumUpgradeOwned('doubleClick', doubleClick);
updatePremiumUpgradeOwned('idleMultiplier', idleMultiplier);
updatePremiumUpgradeOwned('clickMultiplier', clickMultiplier);
updatePremiumUpgradeOwned('fastAutoClicker', fastAutoClicker);
updatePremiumUpgradeOwned('autoClickerBoost', autoClickerBoost);
updatePremiumUpgradeOwned('megaClick', megaClick);
updatePremiumUpgradeOwned('hyperIdle', hyperIdle);
updatePremiumUpgradeOwned('prestigeBoost', prestigeBoost);
updatePremiumUpgradeOwned('superMultiplier', superMultiplier);
updatePremiumUpgradeOwned('timeBonus', timeBonus);
updatePremiumUpgradeOwned('goldenClick', goldenClick);
updatePremiumUpgradeOwned('comboSystem', comboSystem);
updatePremiumUpgradeOwned('ultraPower', ultraPower);
// Update settings
document.getElementById('notificationStatus').textContent = notificationsOn ? 'AN' : 'AUS';
@@ -194,16 +209,25 @@ function updateUI() {
saveGame();
}
function showScoreChange(amount, isGolden = false) {
function showScoreChange(amount, isGolden = false, isAuto = false) {
const container = document.getElementById('score-container');
const change = document.createElement('div');
change.className = 'score-change';
change.textContent = `+${formatNumber(amount)}${isGolden ? ' ⭐' : ''}`;
if (isAuto) {
change.textContent = `+${formatNumber(amount)} 🤖`;
change.style.left = '0';
change.style.right = 'auto';
} else {
change.textContent = `+${formatNumber(amount)}${isGolden ? ' ⭐' : ''}`;
}
if (isGolden) {
change.style.color = '#FFD700';
change.style.fontSize = '1.5rem';
change.style.fontWeight = '800';
}
container.appendChild(change);
setTimeout(() => change.remove(), 1000);
@@ -223,6 +247,19 @@ function updateCardState(id, enabled) {
}
}
function updatePremiumUpgradeOwned(name, isOwned) {
const ownedLabel = document.getElementById(name + 'Owned');
const costLabel = document.getElementById(name + 'CostLabel');
if (isOwned) {
ownedLabel.style.display = 'inline';
if (costLabel) costLabel.style.display = 'none';
} else {
ownedLabel.style.display = 'none';
if (costLabel) costLabel.style.display = 'inline';
}
}
function clickScore() {
// Basis-Multiplikatoren
let clickMultipliers = (doubleClick ? 2 : 1) * (clickMultiplier ? 1.5 : 1);
@@ -499,28 +536,42 @@ function buyUltraPower() {
function prestige() {
const requiredScore = 1000 * Math.pow(2, prestigeLevel);
if (score >= requiredScore) {
if (confirm(`Prestige durchführen? Du wirst deinen Fortschritt zurücksetzen, aber erhältst einen permanenten ${(0.5 + prestigeLevel * 0.1).toFixed(1)}x Multiplikator für alle Einkommen.`)) {
prestigeLevel++;
// Reset game state but keep prestige level and upgrades
score = 0;
clickPower = 1;
idlePower = 0;
autoClickers = 0;
clickPowerCost = 10;
idleCost = 20;
autoClickerCost = 100;
totalClicks = 0;
if (notificationsOn) {
showNotification(`Prestige auf Level ${prestigeLevel}! ${(0.5 + (prestigeLevel-1)*0.1).toFixed(1)}x Multiplikator erhalten.`);
}
updateUI();
}
// Öffne das Prestige-Modal
const modal = document.getElementById('prestigeModal');
const text = document.getElementById('prestigeModalText');
text.innerHTML = `Du wirst deinen Fortschritt zurücksetzen, aber erhältst einen permanenten <strong style="color: var(--secondary-color);">${(0.5 + prestigeLevel * 0.1).toFixed(1)}x Multiplikator</strong> für alle Einkommen.<br><br>Deine gekauften <strong>Upgrades bleiben erhalten</strong>!`;
modal.classList.add('active');
}
}
function closePrestigeModal() {
const modal = document.getElementById('prestigeModal');
modal.classList.remove('active');
}
function confirmPrestige() {
// Schließe das Modal
closePrestigeModal();
prestigeLevel++;
// Reset game state but keep prestige level and upgrades
score = 0;
clickPower = 1;
idlePower = 0;
autoClickers = 0;
clickPowerCost = 10;
idleCost = 20;
autoClickerCost = 100;
totalClicks = 0;
if (notificationsOn) {
showNotification(`Prestige auf Level ${prestigeLevel}! ${(0.5 + (prestigeLevel-1)*0.1).toFixed(1)}x Multiplikator erhalten.`);
}
updateUI();
}
function toggleNotifications() {
notificationsOn = !notificationsOn;
updateUI();
@@ -542,9 +593,81 @@ function switchTab(id) {
}
function resetGame() {
if (confirm("Bist du sicher, dass du ALLE Fortschritte zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden!")) {
localStorage.removeItem("clickerSave");
location.reload();
// Öffne das Reset-Modal
const modal = document.getElementById('resetModal');
modal.classList.add('active');
}
function closeResetModal() {
const modal = document.getElementById('resetModal');
modal.classList.remove('active');
}
function confirmReset() {
// Schließe das Modal
closeResetModal();
// Lösche den Spielstand
localStorage.removeItem("clickerSave");
// Setze alle Variablen zurück
score = 0;
totalScore = 0;
clickPower = 1;
idlePower = 0;
autoClickers = 0;
clickPowerCost = 10;
idleCost = 20;
autoClickerCost = 100;
totalClicks = 0;
prestigeLevel = 0;
secondsPlayed = 0;
lastUpdate = Date.now();
startTime = Date.now();
comboCount = 0;
lastClickTime = 0;
// Setze Upgrades zurück
doubleClick = false;
idleMultiplier = false;
clickMultiplier = false;
doubleClickCost = 500;
idleMultiplierCost = 1000;
clickMultiplierCost = 2000;
// Neue Upgrades zurücksetzen
fastAutoClicker = false;
autoClickerBoost = false;
megaClick = false;
hyperIdle = false;
superMultiplier = false;
prestigeBoost = false;
goldenClick = false;
comboSystem = false;
timeBonus = false;
ultraPower = false;
fastAutoClickerCost = 5000;
autoClickerBoostCost = 10000;
megaClickCost = 15000;
hyperIdleCost = 20000;
superMultiplierCost = 30000;
prestigeBoostCost = 25000;
goldenClickCost = 40000;
comboSystemCost = 50000;
timeBonusCost = 35000;
ultraPowerCost = 75000;
// Achievements zurücksetzen
achievements.forEach(achievement => {
achievement.earned = false;
});
// UI aktualisieren
updateUI();
renderAchievements();
if (notificationsOn) {
showNotification('Spiel wurde zurückgesetzt!');
}
}
@@ -796,6 +919,10 @@ setInterval(() => {
const clicks = autoClickers * clickMultipliers * prestigeBonus * timeMult;
score += clicks;
totalScore += clicks;
// Visual feedback - zeige Auto-Clicker-Anzeige
showScoreChange(clicks, false, true);
updateUI();
}
}, fastAutoClicker ? 3000 : 5000);
@@ -884,7 +1011,7 @@ function copyShareText() {
}, 2000);
}).catch(err => {
console.error('Fehler beim Kopieren:', err);
alert('Fehler beim Kopieren in die Zwischenablage');
showNotification('❌ Fehler beim Kopieren in die Zwischenablage');
});
}

6
clicker/style.css
View File

@@ -120,7 +120,7 @@ nav {
right: 0;
font-size: 1rem;
font-weight: 600;
color: var(--success);
color: var(--secondary-color);
opacity: 0;
transform: translateY(10px);
animation: scoreFloat 1s ease-out forwards;
@@ -317,7 +317,7 @@ footer a:hover {
border-radius: 8px;
margin-bottom: 10px;
animation: slideIn 0.3s ease forwards;
border-left: 4px solid var(--spotify-green);
border-left: 4px solid var(--secondary-color);
box-shadow: 0 3px 6px var(--shadow-color);
}
@@ -505,7 +505,7 @@ footer a:hover {
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--spotify-green);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 15px 25px;
border-radius: 8px;