Spaces:

sekopst
/

sudoku1

Running

File size: 27,820 Bytes

37c737b

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced 9×9 Sudoku</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 {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            position: relative;
            transition: all 0.2s;
        }
        
        .cell:focus {
            outline: none;
            background-color: #e2e8f0;
            transform: scale(1.05);
            z-index: 10;
        }
        
        .cell.prefilled {
            background-color: #f0f4f8;
            color: #1e40af;
        }
        
        .cell.error {
            color: #dc2626;
            animation: shake 0.5s;
        }
        
        .cell.highlight {
            background-color: #dbeafe;
        }
        
        .cell.same-number {
            background-color: #bfdbfe;
        }
        
        .cell:nth-child(3n) {
            border-right: 2px solid #4a5568;
        }
        
        .cell:nth-child(9n) {
            border-right: 1px solid #cbd5e0;
        }
        
        .row:nth-child(3n) .cell {
            border-bottom: 2px solid #4a5568;
        }
        
        .row:last-child .cell {
            border-bottom: none;
        }
        
        .row .cell:last-child {
            border-right: none;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .number-btn.active {
            background-color: #3b82f6;
            color: white;
        }
        
        .timer {
            font-family: monospace;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-2xl p-6 max-w-4xl w-full">
        <div class="flex flex-col md:flex-row gap-8">
            <!-- Game Board -->
            <div class="flex-1">
                <div class="flex justify-between items-center mb-4">
                    <h1 class="text-3xl font-bold text-indigo-700">
                        <i class="fas fa-th mr-2"></i>Advanced Sudoku
                    </h1>
                    <div class="timer text-xl font-mono bg-gray-200 px-3 py-1 rounded">
                        <i class="fas fa-clock mr-2"></i><span id="time">00:00</span>
                    </div>
                </div>
                
                <!-- Sudoku Board -->
                <div class="border-2 border-gray-800 rounded mb-4" id="sudoku-board">
                    <!-- Rows will be generated by JavaScript -->
                </div>
                
                <!-- Number Pad -->
                <div class="grid grid-cols-9 gap-1 mb-4">
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="1">1</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="2">2</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="3">3</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="4">4</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="5">5</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="6">6</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="7">7</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="8">8</button>
                    <button class="number-btn bg-gray-200 hover:bg-gray-300 h-10 rounded flex items-center justify-center font-bold" data-number="9">9</button>
                </div>
                
                <!-- Controls -->
                <div class="flex gap-2">
                    <button id="new-game" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded flex items-center justify-center">
                        <i class="fas fa-plus-circle mr-2"></i>New Game
                    </button>
                    <button id="check" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded flex items-center justify-center">
                        <i class="fas fa-check mr-2"></i>Check
                    </button>
                    <button id="hint" class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded flex items-center justify-center">
                        <i class="fas fa-lightbulb mr-2"></i>Hint
                    </button>
                    <button id="solve" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded flex items-center justify-center">
                        <i class="fas fa-magic mr-2"></i>Solve
                    </button>
                </div>
            </div>
            
            <!-- Game Info -->
            <div class="md:w-64 flex flex-col gap-4">
                <div class="bg-gray-100 p-4 rounded-lg">
                    <h3 class="font-bold text-lg mb-2 text-indigo-700">
                        <i class="fas fa-info-circle mr-2"></i>How to Play
                    </h3>
                    <ul class="text-sm space-y-2">
                        <li>Fill the grid so each row, column, and 3×3 box contains 1-9</li>
                        <li>Click a cell and select a number</li>
                        <li>Use <span class="font-bold">Check</span> to validate your solution</li>
                        <li>Stuck? Get a <span class="font-bold">Hint</span></li>
                    </ul>
                </div>
                
                <div class="bg-gray-100 p-4 rounded-lg">
                    <h3 class="font-bold text-lg mb-2 text-indigo-700">
                        <i class="fas fa-trophy mr-2"></i>Difficulty
                    </h3>
                    <div class="flex flex-col gap-2">
                        <button class="difficulty-btn active bg-green-100 hover:bg-green-200 text-green-800 py-1 px-3 rounded text-left" data-difficulty="easy">
                            <i class="fas fa-seedling mr-2"></i>Easy
                        </button>
                        <button class="difficulty-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-1 px-3 rounded text-left" data-difficulty="medium">
                            <i class="fas fa-tree mr-2"></i>Medium
                        </button>
                        <button class="difficulty-btn bg-red-100 hover:bg-red-200 text-red-800 py-1 px-3 rounded text-left" data-difficulty="hard">
                            <i class="fas fa-fire mr-2"></i>Hard
                        </button>
                    </div>
                </div>
                
                <div class="bg-gray-100 p-4 rounded-lg flex-1">
                    <h3 class="font-bold text-lg mb-2 text-indigo-700">
                        <i class="fas fa-history mr-2"></i>Stats
                    </h3>
                    <div class="space-y-2 text-sm">
                        <div>Games Played: <span id="games-played" class="font-bold">0</span></div>
                        <div>Games Won: <span id="games-won" class="font-bold">0</span></div>
                        <div>Best Time: <span id="best-time" class="font-bold">--:--</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Game state
        let board = Array(9).fill().map(() => Array(9).fill(0));
        let solution = Array(9).fill().map(() => Array(9).fill(0));
        let selectedCell = null;
        let selectedNumber = null;
        let timer = null;
        let seconds = 0;
        let difficulty = 'easy';
        let gamesPlayed = 0;
        let gamesWon = 0;
        let bestTime = null;
        
        // DOM elements
        const sudokuBoard = document.getElementById('sudoku-board');
        const numberButtons = document.querySelectorAll('.number-btn');
        const difficultyButtons = document.querySelectorAll('.difficulty-btn');
        const timeDisplay = document.getElementById('time');
        const newGameBtn = document.getElementById('new-game');
        const checkBtn = document.getElementById('check');
        const hintBtn = document.getElementById('hint');
        const solveBtn = document.getElementById('solve');
        
        // Initialize the game
        function initGame() {
            // Clear previous board
            sudokuBoard.innerHTML = '';
            
            // Generate a new Sudoku puzzle
            generateSudoku();
            
            // Create the board UI
            createBoardUI();
            
            // Reset timer
            resetTimer();
            startTimer();
            
            // Update stats
            updateStats();
        }
        
        // Generate a Sudoku puzzle
        function generateSudoku() {
            // Generate a complete solution
            generateSolution();
            
            // Copy solution to board
            for (let i = 0; i < 9; i++) {
                for (let j = 0; j < 9; j++) {
                    board[i][j] = solution[i][j];
                }
            }
            
            // Remove numbers based on difficulty
            let cellsToRemove;
            switch(difficulty) {
                case 'easy':
                    cellsToRemove = 40;
                    break;
                case 'medium':
                    cellsToRemove = 50;
                    break;
                case 'hard':
                    cellsToRemove = 60;
                    break;
                default:
                    cellsToRemove = 40;
            }
            
            // Remove numbers
            let removed = 0;
            while (removed < cellsToRemove) {
                const row = Math.floor(Math.random() * 9);
                const col = Math.floor(Math.random() * 9);
                
                if (board[row][col] !== 0) {
                    board[row][col] = 0;
                    removed++;
                }
            }
        }
        
        // Generate a complete Sudoku solution
        function generateSolution() {
            // Reset solution
            solution = Array(9).fill().map(() => Array(9).fill(0));
            
            // Fill diagonal 3x3 boxes first (they are independent)
            fillDiagonalBoxes();
            
            // Solve the rest of the puzzle
            solveSudoku(solution);
        }
        
        // Fill diagonal 3x3 boxes
        function fillDiagonalBoxes() {
            for (let box = 0; box < 9; box += 3) {
                fillBox(box, box);
            }
        }
        
        // Fill a 3x3 box
        function fillBox(row, col) {
            const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            shuffleArray(nums);
            
            let index = 0;
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    solution[row + i][col + j] = nums[index++];
                }
            }
        }
        
        // Shuffle an array
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
        
        // Solve Sudoku using backtracking
        function solveSudoku(grid) {
            for (let row = 0; row < 9; row++) {
                for (let col = 0; col < 9; col++) {
                    if (grid[row][col] === 0) {
                        for (let num = 1; num <= 9; num++) {
                            if (isValid(grid, row, col, num)) {
                                grid[row][col] = num;
                                if (solveSudoku(grid)) {
                                    return true;
                                }
                                grid[row][col] = 0;
                            }
                        }
                        return false;
                    }
                }
            }
            return true;
        }
        
        // Check if a number is valid in a position
        function isValid(grid, row, col, num) {
            // Check row
            for (let x = 0; x < 9; x++) {
                if (grid[row][x] === num) return false;
            }
            
            // Check column
            for (let x = 0; x < 9; x++) {
                if (grid[x][col] === num) return false;
            }
            
            // Check 3x3 box
            const boxRow = Math.floor(row / 3) * 3;
            const boxCol = Math.floor(col / 3) * 3;
            
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    if (grid[boxRow + i][boxCol + j] === num) return false;
                }
            }
            
            return true;
        }
        
        // Create the board UI
        function createBoardUI() {
            for (let i = 0; i < 9; i++) {
                const row = document.createElement('div');
                row.className = 'row flex';
                
                for (let j = 0; j < 9; j++) {
                    const cell = document.createElement('input');
                    cell.className = 'cell border border-gray-300';
                    cell.type = 'text';
                    cell.maxLength = 1;
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    
                    // Set value if it's a prefilled cell
                    if (board[i][j] !== 0) {
                        cell.value = board[i][j];
                        cell.classList.add('prefilled');
                        cell.readOnly = true;
                    }
                    
                    // Event listeners
                    cell.addEventListener('focus', handleCellFocus);
                    cell.addEventListener('input', handleCellInput);
                    cell.addEventListener('keydown', handleCellKeyDown);
                    cell.addEventListener('click', handleCellClick);
                    
                    row.appendChild(cell);
                }
                
                sudokuBoard.appendChild(row);
            }
        }
        
        // Handle cell focus
        function handleCellFocus(e) {
            const cell = e.target;
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);
            
            // Clear previous highlights
            clearHighlights();
            
            // Highlight current cell
            cell.classList.add('highlight');
            
            // Highlight same number cells
            if (cell.value) {
                highlightSameNumbers(cell.value);
            }
            
            // Highlight row, column, and box
            highlightRelatedCells(row, col);
            
            // Update selected cell
            selectedCell = cell;
        }
        
        // Handle cell input
        function handleCellInput(e) {
            const cell = e.target;
            const value = cell.value;
            
            // Only allow numbers 1-9
            if (value && !/^[1-9]$/.test(value)) {
                cell.value = '';
                return;
            }
            
            // Clear error state
            cell.classList.remove('error');
            
            // Update same number highlights
            if (value) {
                highlightSameNumbers(value);
            } else {
                clearSameNumberHighlights();
            }
        }
        
        // Handle cell key down (for navigation)
        function handleCellKeyDown(e) {
            const cell = e.target;
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);
            
            let newRow = row;
            let newCol = col;
            
            switch(e.key) {
                case 'ArrowUp':
                    newRow = Math.max(0, row - 1);
                    break;
                case 'ArrowDown':
                    newRow = Math.min(8, row + 1);
                    break;
                case 'ArrowLeft':
                    newCol = Math.max(0, col - 1);
                    break;
                case 'ArrowRight':
                    newCol = Math.min(8, col + 1);
                    break;
                default:
                    return;
            }
            
            if (newRow !== row || newCol !== col) {
                const newCell = document.querySelector(`.cell[data-row="${newRow}"][data-col="${newCol}"]`);
                if (newCell && !newCell.classList.contains('prefilled')) {
                    newCell.focus();
                }
            }
        }
        
        // Handle cell click
        function handleCellClick(e) {
            const cell = e.target;
            if (selectedNumber && !cell.classList.contains('prefilled')) {
                cell.value = selectedNumber;
                cell.dispatchEvent(new Event('input'));
            }
        }
        
        // Highlight related cells (row, column, box)
        function highlightRelatedCells(row, col) {
            // Highlight row and column
            for (let i = 0; i < 9; i++) {
                const rowCell = document.querySelector(`.cell[data-row="${row}"][data-col="${i}"]`);
                const colCell = document.querySelector(`.cell[data-row="${i}"][data-col="${col}"]`);
                
                if (rowCell) rowCell.classList.add('highlight');
                if (colCell) colCell.classList.add('highlight');
            }
            
            // Highlight 3x3 box
            const boxRow = Math.floor(row / 3) * 3;
            const boxCol = Math.floor(col / 3) * 3;
            
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    const cell = document.querySelector(`.cell[data-row="${boxRow + i}"][data-col="${boxCol + j}"]`);
                    if (cell) cell.classList.add('highlight');
                }
            }
        }
        
        // Highlight cells with the same number
        function highlightSameNumbers(num) {
            const cells = document.querySelectorAll('.cell');
            cells.forEach(cell => {
                if (cell.value === num) {
                    cell.classList.add('same-number');
                }
            });
        }
        
        // Clear all highlights
        function clearHighlights() {
            const cells = document.querySelectorAll('.cell');
            cells.forEach(cell => {
                cell.classList.remove('highlight', 'same-number');
            });
        }
        
        // Clear same number highlights
        function clearSameNumberHighlights() {
            const cells = document.querySelectorAll('.cell');
            cells.forEach(cell => {
                cell.classList.remove('same-number');
            });
        }
        
        // Start timer
        function startTimer() {
            if (timer) clearInterval(timer);
            
            seconds = 0;
            updateTimerDisplay();
            
            timer = setInterval(() => {
                seconds++;
                updateTimerDisplay();
            }, 1000);
        }
        
        // Reset timer
        function resetTimer() {
            if (timer) clearInterval(timer);
            seconds = 0;
            updateTimerDisplay();
        }
        
        // Update timer display
        function updateTimerDisplay() {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
        }
        
        // Update stats
        function updateStats() {
            document.getElementById('games-played').textContent = gamesPlayed;
            document.getElementById('games-won').textContent = gamesWon;
            
            if (bestTime !== null) {
                const minutes = Math.floor(bestTime / 60);
                const seconds = bestTime % 60;
                document.getElementById('best-time').textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            } else {
                document.getElementById('best-time').textContent = '--:--';
            }
        }
        
        // Check if the board is complete and correct
        function checkSolution() {
            let isComplete = true;
            let isCorrect = true;
            
            // Check each cell
            for (let i = 0; i < 9; i++) {
                for (let j = 0; j < 9; j++) {
                    const cell = document.querySelector(`.cell[data-row="${i}"][data-col="${j}"]`);
                    
                    if (!cell.value) {
                        isComplete = false;
                        continue;
                    }
                    
                    const num = parseInt(cell.value);
                    if (num !== solution[i][j]) {
                        cell.classList.add('error');
                        isCorrect = false;
                    }
                }
            }
            
            if (!isComplete) {
                alert('The puzzle is not complete yet!');
                return false;
            }
            
            if (!isCorrect) {
                alert('There are errors in your solution. Please check the highlighted cells.');
                return false;
            }
            
            return true;
        }
        
        // Provide a hint
        function giveHint() {
            if (!selectedCell || selectedCell.classList.contains('prefilled')) {
                alert('Please select an empty cell first!');
                return;
            }
            
            const row = parseInt(selectedCell.dataset.row);
            const col = parseInt(selectedCell.dataset.col);
            
            selectedCell.value = solution[row][col];
            selectedCell.classList.remove('error');
            selectedCell.dispatchEvent(new Event('input'));
            
            // Check if the puzzle is complete
            if (isPuzzleComplete()) {
                handleWin();
            }
        }
        
        // Solve the puzzle
        function solvePuzzle() {
            if (confirm('Are you sure you want to see the solution?')) {
                for (let i = 0; i < 9; i++) {
                    for (let j = 0; j < 9; j++) {
                        const cell = document.querySelector(`.cell[data-row="${i}"][data-col="${j}"]`);
                        if (!cell.classList.contains('prefilled')) {
                            cell.value = solution[i][j];
                            cell.classList.remove('error');
                        }
                    }
                }
                
                clearInterval(timer);
                alert('Puzzle solved!');
            }
        }
        
        // Check if puzzle is complete
        function isPuzzleComplete() {
            for (let i = 0; i < 9; i++) {
                for (let j = 0; j < 9; j++) {
                    const cell = document.querySelector(`.cell[data-row="${i}"][data-col="${j}"]`);
                    if (!cell.value) return false;
                }
            }
            return true;
        }
        
        // Handle win
        function handleWin() {
            clearInterval(timer);
            
            // Update stats
            gamesPlayed++;
            gamesWon++;
            
            if (bestTime === null || seconds < bestTime) {
                bestTime = seconds;
            }
            
            updateStats();
            
            alert(`Congratulations! You solved the puzzle in ${timeDisplay.textContent}!`);
        }
        
        // Event listeners
        numberButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                // Clear active state from all buttons
                numberButtons.forEach(b => b.classList.remove('active'));
                
                // Set active state on clicked button
                btn.classList.add('active');
                
                // Update selected number
                selectedNumber = btn.dataset.number;
                
                // If a cell is selected, fill it
                if (selectedCell && !selectedCell.classList.contains('prefilled')) {
                    selectedCell.value = selectedNumber;
                    selectedCell.dispatchEvent(new Event('input'));
                    
                    // Check if the puzzle is complete
                    if (isPuzzleComplete()) {
                        setTimeout(() => {
                            if (checkSolution()) {
                                handleWin();
                            }
                        }, 100);
                    }
                }
            });
        });
        
        difficultyButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                // Clear active state from all buttons
                difficultyButtons.forEach(b => b.classList.remove('active'));
                
                // Set active state on clicked button
                btn.classList.add('active');
                
                // Update difficulty
                difficulty = btn.dataset.difficulty;
            });
        });
        
        newGameBtn.addEventListener('click', () => {
            gamesPlayed++;
            updateStats();
            initGame();
        });
        
        checkBtn.addEventListener('click', () => {
            if (checkSolution()) {
                handleWin();
            }
        });
        
        hintBtn.addEventListener('click', giveHint);
        
        solveBtn.addEventListener('click', solvePuzzle);
        
        // Initialize the game
        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=sekopst/sudoku1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>