Spaces:

shubham6924
/

mini-game

Running

File size: 25,951 Bytes

<!DOCTYPE html>
<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 !important;
            transform: scale(1.1);
            transition: all 0.3s ease;
        }
        
        .pin-failure {
            background-color: #EF4444 !important;
            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>