Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NoPixel Lockpick Minigame</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 shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes rotatePick { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .lockpick-shake { | |
| animation: shake 0.5s; | |
| } | |
| .pin-pulse { | |
| animation: pulse 1s infinite; | |
| } | |
| .pick-rotate { | |
| animation: rotatePick 0.5s linear infinite; | |
| } | |
| .pick-break { | |
| transform: rotate(45deg) scaleY(0.5); | |
| opacity: 0.5; | |
| transition: all 0.3s ease; | |
| } | |
| .pin-success { | |
| background-color: #10B981 ; | |
| transform: scale(1.1); | |
| transition: all 0.3s ease; | |
| } | |
| .pin-failure { | |
| background-color: #EF4444 ; | |
| transform: scale(0.9); | |
| transition: all 0.3s ease; | |
| } | |
| .lock-body { | |
| background: linear-gradient(135deg, #1F2937 0%, #111827 100%); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | |
| } | |
| .pick-tool { | |
| transition: transform 0.1s ease; | |
| } | |
| .progress-step { | |
| transition: all 0.3s ease; | |
| } | |
| .progress-step.active { | |
| background-color: #3B82F6; | |
| } | |
| .progress-step.completed { | |
| background-color: #10B981; | |
| } | |
| .progress-step.failed { | |
| background-color: #EF4444; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4 font-mono"> | |
| <div class="max-w-md w-full"> | |
| <!-- Game Header --> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h1 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-lock-open mr-2"></i> | |
| Lockpick Minigame | |
| </h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-clock text-blue-400"></i> | |
| <span id="timer">30</span> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-bolt text-yellow-400"></i> | |
| <span id="difficulty">Medium</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lock Container --> | |
| <div class="relative mb-8"> | |
| <!-- Lock Body --> | |
| <div class="lock-body rounded-lg p-6 relative overflow-hidden"> | |
| <!-- Pins --> | |
| <div id="pins-container" class="flex justify-center space-x-6 mb-8"></div> | |
| <!-- Lock Cylinder --> | |
| <div class="relative h-32 w-full flex justify-center items-center"> | |
| <div class="absolute h-32 w-32 rounded-full border-4 border-gray-600 flex justify-center items-center"> | |
| <div class="h-24 w-24 rounded-full border-2 border-gray-500"></div> | |
| </div> | |
| <!-- Lockpick Tool --> | |
| <div id="lockpick" class="pick-tool absolute h-24 w-1 bg-gray-300 origin-bottom transform -rotate-45"> | |
| <div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full bg-yellow-400"></div> | |
| <div class="absolute top-6 left-1/2 transform -translate-x-1/2 w-4 h-1 bg-gray-400 rounded"></div> | |
| </div> | |
| <!-- Rotation Guide --> | |
| <div class="absolute h-28 w-28 rounded-full border border-dashed border-gray-500 opacity-50"></div> | |
| </div> | |
| <!-- Instructions --> | |
| <div id="instructions" class="text-center text-sm text-gray-400 mt-4"> | |
| <p>Rotate the lockpick with mouse or arrow keys to find the sweet spot</p> | |
| <p class="text-xs mt-1">Hold <span class="font-bold">SPACE</span> to attempt pick</p> | |
| </div> | |
| </div> | |
| <!-- Progress Steps --> | |
| <div id="progress-steps" class="flex justify-center space-x-2 mt-4"></div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="flex justify-between"> | |
| <button id="start-btn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition"> | |
| <i class="fas fa-play"></i> | |
| <span>Start</span> | |
| </button> | |
| <button id="reset-btn" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition"> | |
| <i class="fas fa-redo"></i> | |
| <span>Reset</span> | |
| </button> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm">Difficulty:</span> | |
| <select id="difficulty-select" class="bg-gray-800 text-white rounded px-2 py-1 text-sm"> | |
| <option value="easy">Easy</option> | |
| <option value="medium" selected>Medium</option> | |
| <option value="hard">Hard</option> | |
| <option value="expert">Expert</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Result Modal --> | |
| <div id="result-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-sm w-full border-2 border-gray-700 transform transition-all duration-300 scale-95 opacity-0"> | |
| <div class="text-center"> | |
| <div id="result-icon" class="text-6xl mb-4"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <h2 id="result-title" class="text-2xl font-bold mb-2">Success!</h2> | |
| <p id="result-message" class="text-gray-300 mb-6">Lock picked successfully!</p> | |
| <button id="close-modal" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium transition"> | |
| Continue | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game configuration | |
| const DIFFICULTY_LEVELS = { | |
| easy: { | |
| pinCount: 4, | |
| timeLimit: 40, | |
| sweetSpotRange: 20, | |
| forceThreshold: 3000, | |
| feedbackRange: 30 | |
| }, | |
| medium: { | |
| pinCount: 5, | |
| timeLimit: 30, | |
| sweetSpotRange: 15, | |
| forceThreshold: 2500, | |
| feedbackRange: 25 | |
| }, | |
| hard: { | |
| pinCount: 6, | |
| timeLimit: 25, | |
| sweetSpotRange: 10, | |
| forceThreshold: 2000, | |
| feedbackRange: 20 | |
| }, | |
| expert: { | |
| pinCount: 7, | |
| timeLimit: 20, | |
| sweetSpotRange: 8, | |
| forceThreshold: 1500, | |
| feedbackRange: 15 | |
| } | |
| }; | |
| // Game state | |
| let gameState = { | |
| active: false, | |
| currentPin: 0, | |
| pins: [], | |
| sweetSpots: [], | |
| pickAngle: -45, | |
| holdingPosition: false, | |
| holdStartTime: 0, | |
| timeLeft: 0, | |
| difficulty: 'medium', | |
| timerInterval: null, | |
| forceInterval: null, | |
| success: false | |
| }; | |
| // DOM elements | |
| const pinsContainer = document.getElementById('pins-container'); | |
| const lockpick = document.getElementById('lockpick'); | |
| const progressSteps = document.getElementById('progress-steps'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| const timerElement = document.getElementById('timer'); | |
| const difficultyElement = document.getElementById('difficulty'); | |
| const difficultySelect = document.getElementById('difficulty-select'); | |
| const resultModal = document.getElementById('result-modal'); | |
| const resultTitle = document.getElementById('result-title'); | |
| const resultMessage = document.getElementById('result-message'); | |
| const resultIcon = document.getElementById('result-icon'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const instructions = document.getElementById('instructions'); | |
| // Initialize game | |
| function initGame() { | |
| // Reset game state | |
| gameState.active = false; | |
| gameState.currentPin = 0; | |
| gameState.pins = []; | |
| gameState.sweetSpots = []; | |
| gameState.pickAngle = -45; | |
| gameState.holdingPosition = false; | |
| gameState.holdStartTime = 0; | |
| gameState.timeLeft = DIFFICULTY_LEVELS[gameState.difficulty].timeLimit; | |
| gameState.success = false; | |
| // Clear intervals | |
| if (gameState.timerInterval) clearInterval(gameState.timerInterval); | |
| if (gameState.forceInterval) clearInterval(gameState.forceInterval); | |
| // Update UI | |
| timerElement.textContent = gameState.timeLeft; | |
| difficultyElement.textContent = difficultySelect.options[difficultySelect.selectedIndex].text; | |
| // Generate pins | |
| pinsContainer.innerHTML = ''; | |
| const pinCount = DIFFICULTY_LEVELS[gameState.difficulty].pinCount; | |
| for (let i = 0; i < pinCount; i++) { | |
| const pin = document.createElement('div'); | |
| pin.className = 'w-4 h-8 bg-gray-500 rounded-t-full relative'; | |
| pin.dataset.index = i; | |
| pinsContainer.appendChild(pin); | |
| gameState.pins.push(pin); | |
| // Generate random sweet spot for each pin (between -90 and 90 degrees) | |
| const sweetSpot = Math.floor(Math.random() * 180) - 90; | |
| gameState.sweetSpots.push(sweetSpot); | |
| } | |
| // Initialize progress steps | |
| progressSteps.innerHTML = ''; | |
| for (let i = 0; i < pinCount; i++) { | |
| const step = document.createElement('div'); | |
| step.className = 'w-6 h-2 rounded-full bg-gray-600 progress-step'; | |
| step.dataset.index = i; | |
| progressSteps.appendChild(step); | |
| } | |
| // Reset lockpick position | |
| lockpick.style.transform = 'rotate(-45deg)'; | |
| lockpick.className = 'pick-tool absolute h-24 w-1 bg-gray-300 origin-bottom transform -rotate-45'; | |
| // Enable start button | |
| startBtn.disabled = false; | |
| startBtn.classList.remove('bg-gray-500', 'cursor-not-allowed'); | |
| startBtn.classList.add('bg-blue-600', 'hover:bg-blue-700'); | |
| } | |
| // Start the game | |
| function startGame() { | |
| if (gameState.active) return; | |
| gameState.active = true; | |
| gameState.timeLeft = DIFFICULTY_LEVELS[gameState.difficulty].timeLimit; | |
| timerElement.textContent = gameState.timeLeft; | |
| // Disable start button | |
| startBtn.disabled = true; | |
| startBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700'); | |
| startBtn.classList.add('bg-gray-500', 'cursor-not-allowed'); | |
| // Start timer | |
| gameState.timerInterval = setInterval(() => { | |
| gameState.timeLeft--; | |
| timerElement.textContent = gameState.timeLeft; | |
| if (gameState.timeLeft <= 10) { | |
| timerElement.classList.add('text-red-400'); | |
| } | |
| if (gameState.timeLeft <= 0) { | |
| endGame(false); | |
| } | |
| }, 1000); | |
| // Set up event listeners | |
| document.addEventListener('keydown', handleKeyDown); | |
| document.addEventListener('keyup', handleKeyUp); | |
| document.addEventListener('mousemove', handleMouseMove); | |
| // Highlight first pin | |
| highlightCurrentPin(); | |
| } | |
| // Handle key down events | |
| function handleKeyDown(e) { | |
| if (!gameState.active) return; | |
| // Rotate pick with arrow keys | |
| if (e.key === 'ArrowLeft') { | |
| rotatePick(-5); | |
| } else if (e.key === 'ArrowRight') { | |
| rotatePick(5); | |
| } | |
| // Attempt pick with space | |
| if (e.key === ' ' && !gameState.holdingPosition) { | |
| startHolding(); | |
| e.preventDefault(); // Prevent scrolling | |
| } | |
| } | |
| // Handle key up events | |
| function handleKeyUp(e) { | |
| if (!gameState.active) return; | |
| if (e.key === ' ') { | |
| stopHolding(); | |
| } | |
| } | |
| // Handle mouse movement | |
| function handleMouseMove(e) { | |
| if (!gameState.active) return; | |
| // Calculate angle based on mouse position relative to lock | |
| const lockRect = document.querySelector('.lock-body').getBoundingClientRect(); | |
| const centerX = lockRect.left + lockRect.width / 2; | |
| const centerY = lockRect.top + lockRect.height / 2; | |
| const deltaX = e.clientX - centerX; | |
| const deltaY = e.clientY - centerY; | |
| // Calculate angle in degrees (-180 to 180) | |
| let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI); | |
| angle = (angle + 90) % 360; // Adjust so 0 is at the top | |
| if (angle > 180) angle -= 360; | |
| // Limit angle to reasonable range (-90 to 90) | |
| angle = Math.max(-90, Math.min(90, angle)); | |
| // Update pick position | |
| gameState.pickAngle = angle; | |
| lockpick.style.transform = `rotate(${angle}deg)`; | |
| // Check if we're close to sweet spot | |
| checkSweetSpotProximity(); | |
| } | |
| // Rotate the lockpick | |
| function rotatePick(degrees) { | |
| gameState.pickAngle += degrees; | |
| // Limit angle to reasonable range (-90 to 90) | |
| gameState.pickAngle = Math.max(-90, Math.min(90, gameState.pickAngle)); | |
| lockpick.style.transform = `rotate(${gameState.pickAngle}deg)`; | |
| // Check if we're close to sweet spot | |
| checkSweetSpotProximity(); | |
| } | |
| // Start holding position (attempting to pick) | |
| function startHolding() { | |
| if (!gameState.active || gameState.holdingPosition) return; | |
| gameState.holdingPosition = true; | |
| gameState.holdStartTime = Date.now(); | |
| // Check if we're in the sweet spot | |
| const currentSweetSpot = gameState.sweetSpots[gameState.currentPin]; | |
| const sweetSpotRange = DIFFICULTY_LEVELS[gameState.difficulty].sweetSpotRange; | |
| if (Math.abs(gameState.pickAngle - currentSweetSpot) <= sweetSpotRange) { | |
| // In sweet spot - start picking | |
| lockpick.classList.add('pick-rotate'); | |
| // Set timeout for successful pick | |
| setTimeout(() => { | |
| if (gameState.holdingPosition) { | |
| pickSuccess(); | |
| } | |
| }, 1000); | |
| } else { | |
| // Not in sweet spot - start force timer | |
| gameState.forceInterval = setInterval(() => { | |
| const holdDuration = Date.now() - gameState.holdStartTime; | |
| const forceThreshold = DIFFICULTY_LEVELS[gameState.difficulty].forceThreshold; | |
| if (holdDuration >= forceThreshold) { | |
| pickFailure(); | |
| } else { | |
| // Show warning as we get closer to breaking | |
| const progress = holdDuration / forceThreshold; | |
| if (progress > 0.7) { | |
| lockpick.classList.add('lockpick-shake'); | |
| setTimeout(() => { | |
| lockpick.classList.remove('lockpick-shake'); | |
| }, 500); | |
| } | |
| } | |
| }, 100); | |
| } | |
| } | |
| // Stop holding position | |
| function stopHolding() { | |
| if (!gameState.holdingPosition) return; | |
| gameState.holdingPosition = false; | |
| lockpick.classList.remove('pick-rotate'); | |
| if (gameState.forceInterval) { | |
| clearInterval(gameState.forceInterval); | |
| gameState.forceInterval = null; | |
| } | |
| } | |
| // Check if we're close to the sweet spot | |
| function checkSweetSpotProximity() { | |
| if (gameState.currentPin >= gameState.pins.length) return; | |
| const currentSweetSpot = gameState.sweetSpots[gameState.currentPin]; | |
| const feedbackRange = DIFFICULTY_LEVELS[gameState.difficulty].feedbackRange; | |
| const difference = Math.abs(gameState.pickAngle - currentSweetSpot); | |
| const pin = gameState.pins[gameState.currentPin]; | |
| if (difference <= feedbackRange) { | |
| // Close to sweet spot - give feedback | |
| pin.classList.add('pin-pulse'); | |
| // Change color based on proximity | |
| const proximity = 1 - (difference / feedbackRange); | |
| const red = Math.floor(255 * (1 - proximity)); | |
| const green = Math.floor(255 * proximity); | |
| pin.style.backgroundColor = `rgb(${red}, ${green}, 0)`; | |
| } else { | |
| // Not close - reset feedback | |
| pin.classList.remove('pin-pulse'); | |
| pin.style.backgroundColor = ''; | |
| } | |
| } | |
| // Successful pick | |
| function pickSuccess() { | |
| if (!gameState.active) return; | |
| // Play sound (optional) | |
| playSound('click'); | |
| // Mark pin as success | |
| const pin = gameState.pins[gameState.currentPin]; | |
| pin.classList.remove('pin-pulse'); | |
| pin.classList.add('pin-success'); | |
| // Mark progress step as completed | |
| const steps = progressSteps.querySelectorAll('.progress-step'); | |
| steps[gameState.currentPin].classList.add('completed'); | |
| // Move to next pin | |
| gameState.currentPin++; | |
| // Stop holding | |
| stopHolding(); | |
| // Check if all pins are picked | |
| if (gameState.currentPin >= gameState.pins.length) { | |
| endGame(true); | |
| } else { | |
| // Highlight next pin | |
| highlightCurrentPin(); | |
| } | |
| } | |
| // Failed pick | |
| function pickFailure() { | |
| if (!gameState.active) return; | |
| // Play sound (optional) | |
| playSound('break'); | |
| // Mark pin as failure | |
| const pin = gameState.pins[gameState.currentPin]; | |
| pin.classList.remove('pin-pulse'); | |
| pin.classList.add('pin-failure'); | |
| // Mark progress step as failed | |
| const steps = progressSteps.querySelectorAll('.progress-step'); | |
| steps[gameState.currentPin].classList.add('failed'); | |
| // Break lockpick | |
| lockpick.classList.add('pick-break'); | |
| stopHolding(); | |
| // End game | |
| setTimeout(() => { | |
| endGame(false); | |
| }, 500); | |
| } | |
| // Highlight current pin | |
| function highlightCurrentPin() { | |
| // Reset all pins | |
| gameState.pins.forEach(pin => { | |
| pin.classList.remove('pin-pulse'); | |
| pin.style.backgroundColor = ''; | |
| }); | |
| // Highlight current pin | |
| if (gameState.currentPin < gameState.pins.length) { | |
| const pin = gameState.pins[gameState.currentPin]; | |
| pin.style.backgroundColor = '#3B82F6'; | |
| // Highlight current progress step | |
| const steps = progressSteps.querySelectorAll('.progress-step'); | |
| steps.forEach((step, index) => { | |
| if (index === gameState.currentPin) { | |
| step.classList.add('active'); | |
| } else { | |
| step.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| } | |
| // End the game | |
| function endGame(success) { | |
| gameState.active = false; | |
| gameState.success = success; | |
| // Clear intervals | |
| clearInterval(gameState.timerInterval); | |
| clearInterval(gameState.forceInterval); | |
| // Remove event listeners | |
| document.removeEventListener('keydown', handleKeyDown); | |
| document.removeEventListener('keyup', handleKeyUp); | |
| document.removeEventListener('mousemove', handleMouseMove); | |
| // Play sound | |
| playSound(success ? 'unlock' : 'fail'); | |
| // Show result modal | |
| showResultModal(success); | |
| } | |
| // Show result modal | |
| function showResultModal(success) { | |
| if (success) { | |
| resultTitle.textContent = "Success!"; | |
| resultMessage.textContent = "Lock picked successfully!"; | |
| resultIcon.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>'; | |
| } else { | |
| resultTitle.textContent = "Failed!"; | |
| resultMessage.textContent = "The lockpick broke! Try again..."; | |
| resultIcon.innerHTML = '<i class="fas fa-times-circle text-red-500"></i>'; | |
| } | |
| resultModal.classList.remove('hidden'); | |
| setTimeout(() => { | |
| document.querySelector('#result-modal > div').classList.remove('scale-95', 'opacity-0'); | |
| document.querySelector('#result-modal > div').classList.add('scale-100', 'opacity-100'); | |
| }, 10); | |
| } | |
| // Close result modal | |
| function closeResultModal() { | |
| document.querySelector('#result-modal > div').classList.remove('scale-100', 'opacity-100'); | |
| document.querySelector('#result-modal > div').classList.add('scale-95', 'opacity-0'); | |
| setTimeout(() => { | |
| resultModal.classList.add('hidden'); | |
| initGame(); // Reset game | |
| }, 300); | |
| } | |
| // Play sound effects | |
| function playSound(type) { | |
| // In a real implementation, you would use the Web Audio API or preloaded audio elements | |
| console.log(`Playing sound: ${type}`); | |
| // Example implementation: | |
| /* | |
| const sounds = { | |
| click: new Audio('click.mp3'), | |
| break: new Audio('break.mp3'), | |
| unlock: new Audio('unlock.mp3'), | |
| fail: new Audio('fail.mp3') | |
| }; | |
| sounds[type].currentTime = 0; | |
| sounds[type].play(); | |
| */ | |
| } | |
| // Event listeners | |
| startBtn.addEventListener('click', startGame); | |
| resetBtn.addEventListener('click', initGame); | |
| closeModal.addEventListener('click', closeResultModal); | |
| difficultySelect.addEventListener('change', () => { | |
| gameState.difficulty = difficultySelect.value; | |
| initGame(); | |
| }); | |
| // Initialize on load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| 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=shubham6924/mini-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |