Spaces:

shubham6924
/

mini-game

Running

App Files Files Community

shubham6924 commited on Apr 12

Commit

00136b5

verified ·

1 Parent(s): 5578d97

Add 1 files

Browse files

Files changed (1) hide show

index.html +491 -260

index.html CHANGED Viewed

@@ -3,119 +3,167 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Roof Running AC Unit 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 fall {
-            0% { transform: translateY(0); opacity: 1; }
-            100% { transform: translateY(100px); opacity: 0; }
-        }
         @keyframes shake {
             0%, 100% { transform: translateX(0); }
             10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
             20%, 40%, 60%, 80% { transform: translateX(5px); }
         }
-        .cube {
             transition: all 0.3s ease;
-            cursor: pointer;
         }
-        .cube:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
         }
-        .removing {
-            animation: fall 0.5s forwards;
         }
-        .shake {
-            animation: shake 0.5s;
         }
-        .progress-bar {
-            transition: width 0.5s linear;
         }
-        .bg-red { background-color: #ef4444; }
-        .bg-green { background-color: #10b981; }
-        .bg-blue { background-color: #3b82f6; }
     </style>
 </head>
-<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
-    <div class="max-w-4xl w-full bg-gray-800 rounded-xl shadow-2xl overflow-hidden border-2 border-gray-700">
-        <!-- Header -->
-        <div class="bg-gray-700 p-4 flex items-center justify-between">
-            <div class="flex items-center space-x-3">
-                <i class="fas fa-screwdriver text-yellow-400 text-2xl"></i>
-                <h1 class="text-xl font-bold">AC Unit Theft Minigame</h1>
-            </div>
             <div class="flex items-center space-x-4">
-                <div class="flex items-center space-x-2">
                     <i class="fas fa-clock text-blue-400"></i>
-                    <span id="timer" class="font-mono">60</span>
                 </div>
-                <div class="flex items-center space-x-2">
-                    <i class="fas fa-cubes text-green-400"></i>
-                    <span id="remaining">88</span>
                 </div>
             </div>
         </div>
-        <!-- Game Area -->
-        <div class="p-6">
-            <!-- Instructions -->
-            <div id="instructions" class="bg-gray-700 rounded-lg p-4 mb-6">
-                <div class="flex justify-between items-center">
-                    <h2 class="font-bold text-lg mb-2">How to play:</h2>
-                    <button id="close-instructions" class="text-gray-300 hover:text-white">
-                        <i class="fas fa-times"></i>
-                    </button>
                 </div>
-                <ul class="list-disc pl-5 space-y-1 text-sm">
-                    <li>Click on groups of 2+ same-colored cubes to remove them</li>
-                    <li>Cubes will fall down and align left after removal</li>
-                    <li>Remove all cubes before time runs out to succeed</li>
-                    <li>Single cubes cannot be removed</li>
-                </ul>
-            </div>
-            <!-- Game Grid -->
-            <div class="flex justify-center">
-                <div id="game-grid" class="grid grid-cols-11 gap-1 bg-gray-900 p-2 rounded-lg border border-gray-700"></div>
             </div>
-            <!-- Progress Bar -->
-            <div class="mt-6 bg-gray-700 rounded-full h-4 overflow-hidden">
-                <div id="progress-bar" class="h-full bg-gradient-to-r from-green-500 to-blue-500 progress-bar" style="width: 100%"></div>
-            </div>
         </div>
         <!-- Controls -->
-        <div class="bg-gray-700 p-4 flex justify-between items-center">
-            <button id="start-btn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition">
                 <i class="fas fa-play"></i>
-                <span>Start Game</span>
             </button>
-            <button id="reset-btn" class="bg-gray-600 hover:bg-gray-500 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>
     </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-md 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">You successfully stole the AC unit!</p>
                 <button id="close-modal" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium transition">
                     Continue
                 </button>
@@ -124,256 +172,424 @@
     </div>
     <script>
-        // Game variables
-        const GRID_WIDTH = 11;
-        const GRID_HEIGHT = 8;
-        const COLORS = ['red', 'green', 'blue'];
-        const TIME_LIMIT = 60; // seconds
-        let gameGrid = [];
-        let selectedCells = [];
-        let gameActive = false;
-        let timeLeft = TIME_LIMIT;
-        let timerInterval;
-        let remainingCubes = GRID_WIDTH * GRID_HEIGHT;
         // DOM elements
-        const gameGridElement = document.getElementById('game-grid');
-        const timerElement = document.getElementById('timer');
-        const remainingElement = document.getElementById('remaining');
-        const progressBar = document.getElementById('progress-bar');
         const startBtn = document.getElementById('start-btn');
         const resetBtn = document.getElementById('reset-btn');
-        const instructions = document.getElementById('instructions');
-        const closeInstructions = document.getElementById('close-instructions');
         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');
         // Initialize game
         function initGame() {
-            gameGrid = [];
-            selectedCells = [];
-            gameGridElement.innerHTML = '';
-            // Create grid
-            for (let y = 0; y < GRID_HEIGHT; y++) {
-                gameGrid[y] = [];
-                for (let x = 0; x < GRID_WIDTH; x++) {
-                    const color = COLORS[Math.floor(Math.random() * COLORS.length)];
-                    gameGrid[y][x] = { color, x, y };
-                    const cube = document.createElement('div');
-                    cube.className = `w-8 h-8 rounded-sm cube bg-${color}`;
-                    cube.dataset.x = x;
-                    cube.dataset.y = y;
-                    cube.addEventListener('click', () => handleCubeClick(x, y));
-                    gameGridElement.appendChild(cube);
-                }
             }
-            remainingCubes = GRID_WIDTH * GRID_HEIGHT;
-            remainingElement.textContent = remainingCubes;
         }
         // Start the game
         function startGame() {
-            if (gameActive) return;
-            gameActive = true;
-            timeLeft = TIME_LIMIT;
-            timerElement.textContent = timeLeft;
-            progressBar.style.width = '100%';
             startBtn.disabled = true;
-            startBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
             startBtn.classList.add('bg-gray-500', 'cursor-not-allowed');
-            timerInterval = setInterval(() => {
-                timeLeft--;
-                timerElement.textContent = timeLeft;
-                progressBar.style.width = `${(timeLeft / TIME_LIMIT) * 100}%`;
-                if (timeLeft <= 10) {
-                    progressBar.classList.remove('bg-gradient-to-r', 'from-green-500', 'to-blue-500');
-                    progressBar.classList.add('bg-gradient-to-r', 'from-yellow-500', 'to-red-500');
                 }
-                if (timeLeft <= 0) {
                     endGame(false);
                 }
             }, 1000);
         }
-        // Reset the game
-        function resetGame() {
-            clearInterval(timerInterval);
-            gameActive = false;
-            startBtn.disabled = false;
-            startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
-            startBtn.classList.remove('bg-gray-500', 'cursor-not-allowed');
-            progressBar.classList.remove('bg-gradient-to-r', 'from-yellow-500', 'to-red-500');
-            progressBar.classList.add('bg-gradient-to-r', 'from-green-500', 'to-blue-500');
-            initGame();
         }
-        // Handle cube click
-        function handleCubeClick(x, y) {
-            if (!gameActive) return;
-            const cube = gameGrid[y][x];
-            if (!cube) return;
-            // Find connected cubes of the same color
-            const connected = findConnectedCubes(x, y, cube.color);
-            // If less than 2 connected cubes, can't remove
-            if (connected.length < 2) {
-                const cubeElement = document.querySelector(`[data-x="${x}"][data-y="${y}"]`);
-                cubeElement.classList.add('shake');
-                setTimeout(() => {
-                    cubeElement.classList.remove('shake');
-                }, 500);
-                return;
-            }
-            // Mark cubes for removal
-            connected.forEach(pos => {
-                const { x, y } = pos;
-                gameGrid[y][x] = null;
-                const cubeElement = document.querySelector(`[data-x="${x}"][data-y="${y}"]`);
-                cubeElement.classList.add('removing');
-                setTimeout(() => {
-                    cubeElement.remove();
-                }, 500);
-            });
-            // Update remaining cubes count
-            remainingCubes -= connected.length;
-            remainingElement.textContent = remainingCubes;
-            // After animation completes, collapse the grid
-            setTimeout(() => {
-                collapseGrid();
-                // Check if game is won
-                if (remainingCubes === 0) {
-                    endGame(true);
-                }
-            }, 500);
         }
-        // Find connected cubes of the same color
-        function findConnectedCubes(x, y, color, visited = []) {
-            const key = `${x},${y}`;
-            if (visited.includes(key)) return [];
-            visited.push(key);
-            const results = [{ x, y }];
-            // Check adjacent cells (up, down, left, right)
-            const directions = [
-                { dx: 0, dy: -1 }, // up
-                { dx: 0, dy: 1 },  // down
-                { dx: -1, dy: 0 }, // left
-                { dx: 1, dy: 0 }   // right
-            ];
-            for (const dir of directions) {
-                const nx = x + dir.dx;
-                const ny = y + dir.dy;
-                if (
-                    nx >= 0 && nx < GRID_WIDTH &&
-                    ny >= 0 && ny < GRID_HEIGHT &&
-                    gameGrid[ny][nx] &&
-                    gameGrid[ny][nx].color === color
-                ) {
-                    results.push(...findConnectedCubes(nx, ny, color, visited));
-                }
-            }
-            return results;
         }
-        // Collapse the grid after removal
-        function collapseGrid() {
-            // First, let columns fall down
-            for (let x = 0; x < GRID_WIDTH; x++) {
-                let emptySpots = 0;
-                // From bottom to top
-                for (let y = GRID_HEIGHT - 1; y >= 0; y--) {
-                    if (!gameGrid[y][x]) {
-                        emptySpots++;
-                    } else if (emptySpots > 0) {
-                        // Move cube down
-                        gameGrid[y + emptySpots][x] = gameGrid[y][x];
-                        gameGrid[y][x] = null;
                     }
-                }
             }
-            // Then, shift columns left to fill empty columns
-            let emptyColumns = 0;
-            for (let x = 0; x < GRID_WIDTH; x++) {
-                // Check if column is empty
-                let columnEmpty = true;
-                for (let y = 0; y < GRID_HEIGHT; y++) {
-                    if (gameGrid[y][x]) {
-                        columnEmpty = false;
-                        break;
-                    }
-                }
-                if (columnEmpty) {
-                    emptyColumns++;
-                } else if (emptyColumns > 0) {
-                    // Shift column left
-                    for (let y = 0; y < GRID_HEIGHT; y++) {
-                        gameGrid[y][x - emptyColumns] = gameGrid[y][x];
-                        gameGrid[y][x] = null;
-                    }
-                }
             }
-            // Rebuild the grid visually
-            gameGridElement.innerHTML = '';
-            for (let y = 0; y < GRID_HEIGHT; y++) {
-                for (let x = 0; x < GRID_WIDTH; x++) {
-                    if (gameGrid[y][x]) {
-                        const cube = gameGrid[y][x];
-                        const cubeElement = document.createElement('div');
-                        cubeElement.className = `w-8 h-8 rounded-sm cube bg-${cube.color}`;
-                        cubeElement.dataset.x = x;
-                        cubeElement.dataset.y = y;
-                        cubeElement.addEventListener('click', () => handleCubeClick(x, y));
-                        gameGridElement.appendChild(cubeElement);
                     }
-                }
             }
         }
         // End the game
         function endGame(success) {
-            clearInterval(timerInterval);
-            gameActive = false;
             // Show result modal
             if (success) {
                 resultTitle.textContent = "Success!";
-                resultMessage.textContent = "You successfully stole the AC unit!";
                 resultIcon.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>';
             } else {
                 resultTitle.textContent = "Failed!";
-                resultMessage.textContent = "You ran out of time! The cops might be coming...";
                 resultIcon.innerHTML = '<i class="fas fa-times-circle text-red-500"></i>';
             }
@@ -384,25 +600,40 @@
             }, 10);
         }
-        // Event listeners
-        startBtn.addEventListener('click', () => {
-            startGame();
-            instructions.classList.add('hidden');
-        });
-        resetBtn.addEventListener('click', resetGame);
-        closeInstructions.addEventListener('click', () => {
-            instructions.classList.add('hidden');
-        });
-        closeModal.addEventListener('click', () => {
             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');
-                resetGame();
             }, 300);
         });
         // Initialize on load

 <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>
     <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>';
             }
             }, 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