|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Pickleball Mining Adventure</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
.bounce-animation { |
|
|
animation: bounce 1s infinite; |
|
|
} |
|
|
.mining-animation { |
|
|
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite; |
|
|
} |
|
|
@keyframes shake { |
|
|
10%, 90% { transform: translate3d(-1px, 0, 0); } |
|
|
20%, 80% { transform: translate3d(2px, 0, 0); } |
|
|
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } |
|
|
40%, 60% { transform: translate3d(4px, 0, 0); } |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.tooltip { |
|
|
visibility: hidden; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.has-tooltip:hover .tooltip { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-green-50 min-h-screen flex flex-col"> |
|
|
<div class="container mx-auto px-4 py-8 flex-grow"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-green-800">Pickleball Mining</h1> |
|
|
<p class="text-green-600">Dig for pickleball treasures!</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="bg-white rounded-lg shadow p-3 flex items-center"> |
|
|
<i class="fas fa-coins text-yellow-500 text-xl mr-2"></i> |
|
|
<span id="coins" class="font-bold">0</span> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-3 flex items-center"> |
|
|
<i class="fas fa-trophy text-purple-500 text-xl mr-2"></i> |
|
|
<span id="level" class="font-bold">1</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> |
|
|
|
|
|
<div class="relative bg-green-200 h-64 flex items-center justify-center"> |
|
|
<div id="mine" class="w-48 h-48 bg-gray-800 rounded-full flex items-center justify-center cursor-pointer transition-transform hover:scale-105"> |
|
|
<div id="pickaxe" class="text-4xl absolute bounce-animation">⛏️</div> |
|
|
<div id="mining-effect" class="hidden absolute inset-0 flex items-center justify-center"> |
|
|
<div class="mining-animation text-6xl">💎</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="floating-items" class="absolute inset-0 pointer-events-none"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-200 h-4"> |
|
|
<div id="level-progress" class="progress-bar bg-green-500 h-full w-0"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-bold text-lg">Pickaxe Power</h3> |
|
|
<span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Level <span id="pickaxe-level">1</span></span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-3">Increases coins per hit</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button id="upgrade-pickaxe" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition-colors"> |
|
|
Upgrade (<span id="pickaxe-cost">100</span> coins) |
|
|
</button> |
|
|
<div class="has-tooltip relative"> |
|
|
<i class="fas fa-info-circle text-gray-400"></i> |
|
|
<div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded p-2 w-32"> |
|
|
Current: +<span id="pickaxe-value">1</span> coin per hit |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-bold text-lg">Stamina</h3> |
|
|
<span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">Level <span id="stamina-level">1</span></span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-3">Reduces mining cooldown</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button id="upgrade-stamina" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors"> |
|
|
Upgrade (<span id="stamina-cost">150</span> coins) |
|
|
</button> |
|
|
<div class="has-tooltip relative"> |
|
|
<i class="fas fa-info-circle text-gray-400"></i> |
|
|
<div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded p-2 w-32"> |
|
|
Current: <span id="stamina-value">1.0</span>s cooldown |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-bold text-lg">Luck</h3> |
|
|
<span class="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">Level <span id="luck-level">1</span></span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-3">Chance for bonus rewards</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button id="upgrade-luck" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded transition-colors"> |
|
|
Upgrade (<span id="luck-cost">200</span> coins) |
|
|
</button> |
|
|
<div class="has-tooltip relative"> |
|
|
<i class="fas fa-info-circle text-gray-400"></i> |
|
|
<div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded p-2 w-32"> |
|
|
Current: <span id="luck-value">5</span>% bonus chance |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<h2 class="text-xl font-bold mb-4 text-green-800">Inventory</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3"> |
|
|
<div class="border rounded p-2 text-center"> |
|
|
<div class="text-3xl mb-1">🏓</div> |
|
|
<div class="text-sm">Pickleballs</div> |
|
|
<div id="pickleball-count" class="font-bold">0</div> |
|
|
</div> |
|
|
<div class="border rounded p-2 text-center"> |
|
|
<div class="text-3xl mb-1">💎</div> |
|
|
<div class="text-sm">Gems</div> |
|
|
<div id="gem-count" class="font-bold">0</div> |
|
|
</div> |
|
|
<div class="border rounded p-2 text-center"> |
|
|
<div class="text-3xl mb-1">🏆</div> |
|
|
<div class="text-sm">Trophies</div> |
|
|
<div id="trophy-count" class="font-bold">0</div> |
|
|
</div> |
|
|
<div class="border rounded p-2 text-center"> |
|
|
<div class="text-3xl mb-1">🍯</div> |
|
|
<div class="text-sm">Honey</div> |
|
|
<div id="honey-count" class="font-bold">0</div> |
|
|
</div> |
|
|
<div class="border rounded p-2 text-center"> |
|
|
<div class="text-3xl mb-1">🔑</div> |
|
|
<div class="text-sm">Keys</div> |
|
|
<div id="key-count" class="font-bold">0</div> |
|
|
</div> |
|
|
<div class="border rounded p-2 text-center"> |
|
|
<div class="text-3xl mb-1">🎾</div> |
|
|
<div class="text-sm">Balls</div> |
|
|
<div id="ball-count" class="font-bold">0</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="level-up-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-xl p-8 max-w-md text-center animate-bounce"> |
|
|
<div class="text-6xl mb-4 text-yellow-500">🎉</div> |
|
|
<h2 class="text-2xl font-bold mb-2">Level Up!</h2> |
|
|
<p class="mb-4">You've reached level <span id="new-level">2</span>!</p> |
|
|
<p class="text-green-600 font-bold mb-4">+50 coins bonus!</p> |
|
|
<button id="close-level-up" class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-full"> |
|
|
Continue Mining |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const gameState = { |
|
|
coins: 0, |
|
|
level: 1, |
|
|
xp: 0, |
|
|
xpNeeded: 100, |
|
|
inventory: { |
|
|
pickleballs: 0, |
|
|
gems: 0, |
|
|
trophies: 0, |
|
|
honey: 0, |
|
|
keys: 0, |
|
|
balls: 0 |
|
|
}, |
|
|
upgrades: { |
|
|
pickaxe: { |
|
|
level: 1, |
|
|
cost: 100, |
|
|
value: 1 |
|
|
}, |
|
|
stamina: { |
|
|
level: 1, |
|
|
cost: 150, |
|
|
value: 1.0 |
|
|
}, |
|
|
luck: { |
|
|
level: 1, |
|
|
cost: 200, |
|
|
value: 5 |
|
|
} |
|
|
}, |
|
|
isMining: false, |
|
|
cooldown: false |
|
|
}; |
|
|
|
|
|
|
|
|
const mine = document.getElementById('mine'); |
|
|
const pickaxe = document.getElementById('pickaxe'); |
|
|
const miningEffect = document.getElementById('mining-effect'); |
|
|
const floatingItems = document.getElementById('floating-items'); |
|
|
const coinsDisplay = document.getElementById('coins'); |
|
|
const levelDisplay = document.getElementById('level'); |
|
|
const levelProgress = document.getElementById('level-progress'); |
|
|
|
|
|
|
|
|
const pickaxeLevel = document.getElementById('pickaxe-level'); |
|
|
const pickaxeCost = document.getElementById('pickaxe-cost'); |
|
|
const pickaxeValue = document.getElementById('pickaxe-value'); |
|
|
const staminaLevel = document.getElementById('stamina-level'); |
|
|
const staminaCost = document.getElementById('stamina-cost'); |
|
|
const staminaValue = document.getElementById('stamina-value'); |
|
|
const luckLevel = document.getElementById('luck-level'); |
|
|
const luckCost = document.getElementById('luck-cost'); |
|
|
const luckValue = document.getElementById('luck-value'); |
|
|
|
|
|
|
|
|
const pickleballCount = document.getElementById('pickleball-count'); |
|
|
const gemCount = document.getElementById('gem-count'); |
|
|
const trophyCount = document.getElementById('trophy-count'); |
|
|
const honeyCount = document.getElementById('honey-count'); |
|
|
const keyCount = document.getElementById('key-count'); |
|
|
const ballCount = document.getElementById('ball-count'); |
|
|
|
|
|
|
|
|
const levelUpModal = document.getElementById('level-up-modal'); |
|
|
const newLevelDisplay = document.getElementById('new-level'); |
|
|
const closeLevelUp = document.getElementById('close-level-up'); |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
updateDisplays(); |
|
|
|
|
|
|
|
|
mine.addEventListener('click', mineClick); |
|
|
document.getElementById('upgrade-pickaxe').addEventListener('click', () => upgrade('pickaxe')); |
|
|
document.getElementById('upgrade-stamina').addEventListener('click', () => upgrade('stamina')); |
|
|
document.getElementById('upgrade-luck').addEventListener('click', () => upgrade('luck')); |
|
|
closeLevelUp.addEventListener('click', () => levelUpModal.classList.add('hidden')); |
|
|
} |
|
|
|
|
|
|
|
|
function mineClick() { |
|
|
if (gameState.cooldown) return; |
|
|
|
|
|
|
|
|
gameState.isMining = true; |
|
|
pickaxe.classList.add('hidden'); |
|
|
miningEffect.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
finishMining(); |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
|
|
|
function finishMining() { |
|
|
gameState.isMining = false; |
|
|
pickaxe.classList.remove('hidden'); |
|
|
miningEffect.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const baseReward = gameState.upgrades.pickaxe.value; |
|
|
let totalReward = baseReward; |
|
|
|
|
|
|
|
|
if (Math.random() * 100 < gameState.upgrades.luck.value) { |
|
|
const bonus = Math.floor(baseReward * 0.5 + Math.random() * baseReward * 0.5); |
|
|
totalReward += bonus; |
|
|
showFloatingItem('💰', bonus); |
|
|
} |
|
|
|
|
|
|
|
|
addXP(baseReward); |
|
|
|
|
|
|
|
|
addCoins(totalReward); |
|
|
|
|
|
|
|
|
if (Math.random() < 0.3) { |
|
|
const items = ['🏓', '💎', '🏆', '🍯', '🔑', '🎾']; |
|
|
const randomItem = items[Math.floor(Math.random() * items.length)]; |
|
|
addInventoryItem(randomItem); |
|
|
showFloatingItem(randomItem); |
|
|
} |
|
|
|
|
|
|
|
|
startCooldown(); |
|
|
} |
|
|
|
|
|
|
|
|
function showFloatingItem(emoji, value = null) { |
|
|
const item = document.createElement('div'); |
|
|
item.className = 'absolute text-2xl animate-bounce'; |
|
|
item.style.left = `${Math.random() * 70 + 15}%`; |
|
|
item.style.bottom = '30%'; |
|
|
item.innerHTML = emoji; |
|
|
|
|
|
if (value) { |
|
|
const valueDisplay = document.createElement('div'); |
|
|
valueDisplay.className = 'absolute text-xs font-bold text-yellow-600'; |
|
|
valueDisplay.textContent = `+${value}`; |
|
|
valueDisplay.style.bottom = '-20px'; |
|
|
item.appendChild(valueDisplay); |
|
|
} |
|
|
|
|
|
floatingItems.appendChild(item); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
item.remove(); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
function startCooldown() { |
|
|
gameState.cooldown = true; |
|
|
mine.classList.add('opacity-50'); |
|
|
|
|
|
setTimeout(() => { |
|
|
gameState.cooldown = false; |
|
|
mine.classList.remove('opacity-50'); |
|
|
}, gameState.upgrades.stamina.value * 1000); |
|
|
} |
|
|
|
|
|
|
|
|
function addCoins(amount) { |
|
|
gameState.coins += amount; |
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function addXP(amount) { |
|
|
gameState.xp += amount; |
|
|
|
|
|
if (gameState.xp >= gameState.xpNeeded) { |
|
|
levelUp(); |
|
|
} |
|
|
|
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function levelUp() { |
|
|
gameState.level++; |
|
|
gameState.xp -= gameState.xpNeeded; |
|
|
gameState.xpNeeded = Math.floor(gameState.xpNeeded * 1.5); |
|
|
|
|
|
|
|
|
gameState.coins += 50; |
|
|
|
|
|
|
|
|
newLevelDisplay.textContent = gameState.level; |
|
|
levelUpModal.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function upgrade(type) { |
|
|
const upgrade = gameState.upgrades[type]; |
|
|
|
|
|
if (gameState.coins >= upgrade.cost) { |
|
|
gameState.coins -= upgrade.cost; |
|
|
upgrade.level++; |
|
|
|
|
|
|
|
|
switch(type) { |
|
|
case 'pickaxe': |
|
|
upgrade.value += 1; |
|
|
upgrade.cost = Math.floor(upgrade.cost * 1.8); |
|
|
break; |
|
|
case 'stamina': |
|
|
upgrade.value = Math.max(0.2, upgrade.value - 0.2); |
|
|
upgrade.cost = Math.floor(upgrade.cost * 1.6); |
|
|
break; |
|
|
case 'luck': |
|
|
upgrade.value += 2; |
|
|
upgrade.cost = Math.floor(upgrade.cost * 1.7); |
|
|
break; |
|
|
} |
|
|
|
|
|
updateDisplays(); |
|
|
} else { |
|
|
alert("Not enough coins!"); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addInventoryItem(emoji) { |
|
|
switch(emoji) { |
|
|
case '🏓': |
|
|
gameState.inventory.pickleballs++; |
|
|
break; |
|
|
case '💎': |
|
|
gameState.inventory.gems++; |
|
|
break; |
|
|
case '🏆': |
|
|
gameState.inventory.trophies++; |
|
|
break; |
|
|
case '🍯': |
|
|
gameState.inventory.honey++; |
|
|
break; |
|
|
case '🔑': |
|
|
gameState.inventory.keys++; |
|
|
break; |
|
|
case '🎾': |
|
|
gameState.inventory.balls++; |
|
|
break; |
|
|
} |
|
|
|
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateDisplays() { |
|
|
|
|
|
coinsDisplay.textContent = gameState.coins; |
|
|
levelDisplay.textContent = gameState.level; |
|
|
|
|
|
|
|
|
const progressPercent = (gameState.xp / gameState.xpNeeded) * 100; |
|
|
levelProgress.style.width = `${progressPercent}%`; |
|
|
|
|
|
|
|
|
pickaxeLevel.textContent = gameState.upgrades.pickaxe.level; |
|
|
pickaxeCost.textContent = gameState.upgrades.pickaxe.cost; |
|
|
pickaxeValue.textContent = gameState.upgrades.pickaxe.value; |
|
|
|
|
|
staminaLevel.textContent = gameState.upgrades.stamina.level; |
|
|
staminaCost.textContent = gameState.upgrades.stamina.cost; |
|
|
staminaValue.textContent = gameState.upgrades.stamina.value.toFixed(1); |
|
|
|
|
|
luckLevel.textContent = gameState.upgrades.luck.level; |
|
|
luckCost.textContent = gameState.upgrades.luck.cost; |
|
|
luckValue.textContent = gameState.upgrades.luck.value; |
|
|
|
|
|
|
|
|
pickleballCount.textContent = gameState.inventory.pickleballs; |
|
|
gemCount.textContent = gameState.inventory.gems; |
|
|
trophyCount.textContent = gameState.inventory.trophies; |
|
|
honeyCount.textContent = gameState.inventory.honey; |
|
|
keyCount.textContent = gameState.inventory.keys; |
|
|
ballCount.textContent = gameState.inventory.balls; |
|
|
} |
|
|
|
|
|
|
|
|
initGame(); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/pickleball-mining-game-vbeta1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
