Spaces:
Running
Running
can you change it to a remake of stake mines from the stake website - Initial Deployment
089175d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Stake Mines Remake</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> | |
| .cell { | |
| transition: all 0.2s ease; | |
| perspective: 1000px; | |
| } | |
| .cell-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .cell.flipped .cell-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .cell-front, .cell-back { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| } | |
| .cell-back { | |
| transform: rotateY(180deg); | |
| } | |
| .diamond { | |
| background: linear-gradient(135deg, #00FFFF, #0080FF); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .bomb { | |
| background: linear-gradient(135deg, #FF0000, #FF8000); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .shake { | |
| animation: shake 0.5s; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-gem text-blue-400 text-3xl mr-2"></i> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Stake Mines</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-gray-800 rounded-lg px-4 py-2"> | |
| <span class="text-gray-400">Balance:</span> | |
| <span class="font-bold ml-2">$<span id="balance">1000.00</span></span> | |
| </div> | |
| <button id="cashout-btn" class="bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 text-white font-bold py-2 px-4 rounded-lg transition disabled:opacity-50" disabled> | |
| Cashout | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Game Controls --> | |
| <div class="bg-gray-800 rounded-xl p-6 mb-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Bet Amount</label> | |
| <div class="flex"> | |
| <button class="bg-gray-700 px-3 py-2 rounded-l-lg hover:bg-gray-600" onclick="adjustBet(-10)">-</button> | |
| <input type="number" id="bet-amount" value="10.00" min="1" step="0.01" class="bg-gray-700 text-center w-full py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="bg-gray-700 px-3 py-2 rounded-r-lg hover:bg-gray-600" onclick="adjustBet(10)">+</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Mines</label> | |
| <div class="flex"> | |
| <button class="bg-gray-700 px-3 py-2 rounded-l-lg hover:bg-gray-600" onclick="adjustMines(-1)">-</button> | |
| <input type="number" id="mines-count" value="3" min="1" max="24" class="bg-gray-700 text-center w-full py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="bg-gray-700 px-3 py-2 rounded-r-lg hover:bg-gray-600" onclick="adjustMines(1)">+</button> | |
| </div> | |
| </div> | |
| <div class="flex items-end"> | |
| <button id="start-btn" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-bold py-3 px-4 rounded-lg transition pulse"> | |
| Start Game | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Board --> | |
| <div class="bg-gray-800 rounded-xl p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-gray-400"> | |
| Multiplier: <span id="multiplier" class="font-bold text-green-400">1.00x</span> | |
| </div> | |
| <div class="text-gray-400"> | |
| Mines: <span id="current-mines" class="font-bold text-red-400">0</span>/<span id="total-mines">3</span> | |
| </div> | |
| </div> | |
| <div id="game-board" class="grid grid-cols-5 md:grid-cols-8 gap-3"> | |
| <!-- Cells will be generated here --> | |
| <div class="text-center text-gray-500 py-8">Start a new game</div> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> | |
| <div class="bg-gray-800 rounded-xl p-4"> | |
| <div class="text-gray-400">Last Win</div> | |
| <div class="text-2xl font-bold" id="last-win">$0.00</div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-4"> | |
| <div class="text-gray-400">Best Win</div> | |
| <div class="text-2xl font-bold" id="best-win">$0.00</div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-4"> | |
| <div class="text-gray-400">Games Played</div> | |
| <div class="text-2xl font-bold" id="games-played">0</div> | |
| </div> | |
| </div> | |
| <!-- History --> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h2 class="text-xl font-bold mb-4">Recent Games</h2> | |
| <div id="history" class="flex space-x-2 overflow-x-auto pb-2"> | |
| <div class="text-gray-500">No games played yet</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game state | |
| let gameState = { | |
| balance: 1000.00, | |
| betAmount: 10.00, | |
| minesCount: 3, | |
| gameActive: false, | |
| multiplier: 1.00, | |
| multiplierIncrement: 0.25, | |
| openedCells: 0, | |
| totalCells: 25, | |
| mines: [], | |
| revealed: [], | |
| lastWin: 0.00, | |
| bestWin: 0.00, | |
| gamesPlayed: 0, | |
| history: [] | |
| }; | |
| // DOM elements | |
| const balanceEl = document.getElementById('balance'); | |
| const betAmountEl = document.getElementById('bet-amount'); | |
| const minesCountEl = document.getElementById('mines-count'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const cashoutBtn = document.getElementById('cashout-btn'); | |
| const gameBoardEl = document.getElementById('game-board'); | |
| const multiplierEl = document.getElementById('multiplier'); | |
| const currentMinesEl = document.getElementById('current-mines'); | |
| const totalMinesEl = document.getElementById('total-mines'); | |
| const lastWinEl = document.getElementById('last-win'); | |
| const bestWinEl = document.getElementById('best-win'); | |
| const gamesPlayedEl = document.getElementById('games-played'); | |
| const historyEl = document.getElementById('history'); | |
| // Initialize | |
| function init() { | |
| updateUI(); | |
| // Event listeners | |
| betAmountEl.addEventListener('change', (e) => { | |
| gameState.betAmount = parseFloat(e.target.value) || 1.00; | |
| updateUI(); | |
| }); | |
| minesCountEl.addEventListener('change', (e) => { | |
| gameState.minesCount = parseInt(e.target.value) || 1; | |
| if (gameState.minesCount > 24) gameState.minesCount = 24; | |
| if (gameState.minesCount < 1) gameState.minesCount = 1; | |
| minesCountEl.value = gameState.minesCount; | |
| updateUI(); | |
| }); | |
| startBtn.addEventListener('click', startGame); | |
| cashoutBtn.addEventListener('click', cashout); | |
| } | |
| // Adjust bet amount | |
| function adjustBet(amount) { | |
| gameState.betAmount = Math.max(1.00, gameState.betAmount + amount); | |
| betAmountEl.value = gameState.betAmount.toFixed(2); | |
| updateUI(); | |
| } | |
| // Adjust mines count | |
| function adjustMines(amount) { | |
| gameState.minesCount = Math.max(1, Math.min(24, gameState.minesCount + amount)); | |
| minesCountEl.value = gameState.minesCount; | |
| updateUI(); | |
| } | |
| // Update UI | |
| function updateUI() { | |
| balanceEl.textContent = gameState.balance.toFixed(2); | |
| betAmountEl.value = gameState.betAmount.toFixed(2); | |
| minesCountEl.value = gameState.minesCount; | |
| totalMinesEl.textContent = gameState.minesCount; | |
| if (gameState.gameActive) { | |
| startBtn.disabled = true; | |
| startBtn.textContent = 'Game in Progress'; | |
| cashoutBtn.disabled = false; | |
| } else { | |
| startBtn.disabled = gameState.balance < gameState.betAmount; | |
| startBtn.textContent = 'Start Game'; | |
| cashoutBtn.disabled = true; | |
| } | |
| lastWinEl.textContent = '$' + gameState.lastWin.toFixed(2); | |
| bestWinEl.textContent = '$' + gameState.bestWin.toFixed(2); | |
| gamesPlayedEl.textContent = gameState.gamesPlayed; | |
| } | |
| // Start new game | |
| function startGame() { | |
| if (gameState.gameActive || gameState.balance < gameState.betAmount) return; | |
| // Deduct bet from balance | |
| gameState.balance -= gameState.betAmount; | |
| gameState.gameActive = true; | |
| gameState.multiplier = 1.00; | |
| gameState.openedCells = 0; | |
| gameState.revealed = Array(25).fill(false); | |
| // Generate mines | |
| gameState.mines = []; | |
| while (gameState.mines.length < gameState.minesCount) { | |
| const randomIndex = Math.floor(Math.random() * 25); | |
| if (!gameState.mines.includes(randomIndex)) { | |
| gameState.mines.push(randomIndex); | |
| } | |
| } | |
| // Create game board | |
| gameBoardEl.innerHTML = ''; | |
| for (let i = 0; i < 25; i++) { | |
| const cell = document.createElement('div'); | |
| cell.className = 'cell aspect-square bg-gray-700 rounded-lg cursor-pointer relative'; | |
| cell.dataset.index = i; | |
| const cellInner = document.createElement('div'); | |
| cellInner.className = 'cell-inner w-full h-full'; | |
| const cellFront = document.createElement('div'); | |
| cellFront.className = 'cell-front flex items-center justify-center text-2xl font-bold'; | |
| cellFront.innerHTML = '<i class="fas fa-question text-gray-400"></i>'; | |
| const cellBack = document.createElement('div'); | |
| cellBack.className = 'cell-back flex items-center justify-center text-2xl font-bold'; | |
| cellInner.appendChild(cellFront); | |
| cellInner.appendChild(cellBack); | |
| cell.appendChild(cellInner); | |
| cell.addEventListener('click', () => revealCell(i, cell)); | |
| gameBoardEl.appendChild(cell); | |
| } | |
| updateUI(); | |
| multiplierEl.textContent = gameState.multiplier.toFixed(2) + 'x'; | |
| currentMinesEl.textContent = '0'; | |
| } | |
| // Reveal cell | |
| function revealCell(index, cellElement) { | |
| if (!gameState.gameActive || gameState.revealed[index]) return; | |
| gameState.revealed[index] = true; | |
| gameState.openedCells++; | |
| // Check if it's a mine | |
| if (gameState.mines.includes(index)) { | |
| cellElement.classList.add('flipped'); | |
| const back = cellElement.querySelector('.cell-back'); | |
| back.innerHTML = '<i class="fas fa-bomb bomb text-3xl"></i>'; | |
| back.classList.add('bg-red-900', 'bg-opacity-50'); | |
| // Reveal all mines | |
| setTimeout(() => { | |
| gameState.mines.forEach(mineIndex => { | |
| if (mineIndex !== index) { | |
| const mineCell = gameBoardEl.children[mineIndex]; | |
| mineCell.classList.add('flipped'); | |
| const mineBack = mineCell.querySelector('.cell-back'); | |
| mineBack.innerHTML = '<i class="fas fa-bomb bomb text-3xl"></i>'; | |
| mineBack.classList.add('bg-red-900', 'bg-opacity-30'); | |
| } | |
| }); | |
| // Game over | |
| endGame(false); | |
| }, 500); | |
| // Shake animation | |
| cellElement.classList.add('shake'); | |
| setTimeout(() => { | |
| cellElement.classList.remove('shake'); | |
| }, 500); | |
| return; | |
| } | |
| // It's a diamond | |
| cellElement.classList.add('flipped'); | |
| const back = cellElement.querySelector('.cell-back'); | |
| back.innerHTML = '<i class="fas fa-gem diamond text-3xl"></i>'; | |
| back.classList.add('bg-blue-900', 'bg-opacity-30'); | |
| // Update multiplier | |
| const safeCells = 25 - gameState.minesCount; | |
| const multiplierStep = 1 / safeCells; | |
| gameState.multiplier += multiplierStep * 5; | |
| multiplierEl.textContent = gameState.multiplier.toFixed(2) + 'x'; | |
| currentMinesEl.textContent = gameState.openedCells; | |
| // Check if all safe cells are revealed | |
| if (gameState.openedCells === (25 - gameState.minesCount)) { | |
| endGame(true); | |
| } | |
| } | |
| // Cash out | |
| function cashout() { | |
| if (!gameState.gameActive) return; | |
| const winAmount = gameState.betAmount * gameState.multiplier; | |
| gameState.balance += winAmount; | |
| gameState.lastWin = winAmount; | |
| if (winAmount > gameState.bestWin) { | |
| gameState.bestWin = winAmount; | |
| } | |
| gameState.gamesPlayed++; | |
| // Add to history | |
| addToHistory(true, winAmount); | |
| // End game | |
| endGame(true, true); | |
| } | |
| // End game | |
| function endGame(win, cashout = false) { | |
| gameState.gameActive = false; | |
| if (!win && !cashout) { | |
| gameState.lastWin = 0; | |
| gameState.gamesPlayed++; | |
| addToHistory(false, 0); | |
| } | |
| updateUI(); | |
| // Show game result | |
| if (win && !cashout) { | |
| const winAmount = gameState.betAmount * gameState.multiplier; | |
| gameState.balance += winAmount; | |
| gameState.lastWin = winAmount; | |
| if (winAmount > gameState.bestWin) { | |
| gameState.bestWin = winAmount; | |
| } | |
| addToHistory(true, winAmount); | |
| setTimeout(() => { | |
| alert(`Congratulations! You won $${winAmount.toFixed(2)}!`); | |
| }, 300); | |
| } | |
| } | |
| // Add to history | |
| function addToHistory(win, amount) { | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = `flex-shrink-0 rounded-lg px-3 py-2 text-center ${win ? 'bg-green-900 bg-opacity-50' : 'bg-red-900 bg-opacity-50'}`; | |
| historyItem.innerHTML = win | |
| ? `<i class="fas fa-gem diamond mr-1"></i> $${amount.toFixed(2)}` | |
| : '<i class="fas fa-bomb bomb mr-1"></i> $0.00'; | |
| // Prepend to history | |
| if (historyEl.firstChild && historyEl.firstChild.textContent === 'No games played yet') { | |
| historyEl.innerHTML = ''; | |
| } | |
| historyEl.prepend(historyItem); | |
| // Keep only last 10 items | |
| if (historyEl.children.length > 10) { | |
| historyEl.removeChild(historyEl.lastChild); | |
| } | |
| // Add to game state history | |
| gameState.history.unshift({ | |
| win, | |
| amount, | |
| timestamp: new Date() | |
| }); | |
| } | |
| // Initialize the game | |
| init(); | |
| </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=tyleristrying/stake-mines" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |