互动数独游戏构建器

♾️ Sudoku · interactive * { box-sizing: border-box; font-family: system-ui, 'Segoe UI', Roboto, sans-serif; } body { background: linear-gradient(145deg, #f5f7fb 0%, #e9edf5 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 16px; } .game-container { max-width: 1000px; width: 100%; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); border-radius: 40px; padding: 24px 28px; box-shadow: 0 20px 40px rgba(0, 10, 30, 0.2); border: 1px solid rgba(255, 255, 255, 0.6); } .header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; } .title { font-size: 2rem; font-weight: 700; letter-spacing: 2px; background: linear-gradient(135deg, #1e3c72, #2a5298); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; } .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } button, select { background: white; border: 1px solid #b0c4de; border-radius: 40px; padding: 8px 16px; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.15s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); display: inline-flex; align-items: center; gap: 6px; } button:hover, select:hover { background: #eef3fc; border-color: #2a5298; transform: scale(1.02); } button:active { transform: scale(0.98); } .difficulty-select { background: #f0f4fa; font-weight: 600; } .board-section { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; justify-content: center; } .sudoku-board { display: grid; grid-template-columns: repeat(9, 1fr); background: #1e3c72; border: 3px solid #1e3c72; border-radius: 12px; width: min(70vw, 480px); aspect-ratio: 1/1; box-shadow: 0 8px 20px rgba(0,0,0,0.2); overflow: hidden; } .cell { background: white; border: 0.5px solid #a0b8d0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; color: #0a1f44; cursor: default; position: relative; transition: background 0.1s; user-select: none; } .cell.given { background: #eaf0fa; font-weight: 700; color: #0a2a5e; } .cell.selected { background: #c7d9f0; box-shadow: inset 0 0 0 2px #2a5298; } .cell.related { background: #e2eaf8; } .cell.error { background: #ffe1e1; color: #b00020; } .cell.hint-highlight { background: #fdf3c0; } .cell.note-mode { font-size: 0.8rem; color: #2a5298; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; } .note-number { width: 8px; height: 8px; font-size: 0.65rem; display: inline-flex; align-items: center; justify-content: center; background: #f0f4ff; border-radius: 2px; margin: 1px; } .right-panel { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 16px; } .timer-box { background: #ffffffd0; border-radius: 30px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.05); border: 1px solid #c0d0e8; } .timer { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 2px; background: #1e3c72; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .action-grid button { justify-content: center; } .stat-box { background: #ffffffd0; border-radius: 20px; padding: 12px 16px; border: 1px solid #c0d0e8; font-size: 0.9rem; } .stat-line { display: flex; justify-content: space-between; margin: 4px 0; } .save-slots { display: flex; gap: 6px; flex-wrap: wrap; } .slot-btn { background: #eef3fc; border-radius: 30px; padding: 6px 12px; font-size: 0.8rem; } .print-btn { background: #2a5298; color: white; border: none; } .print-btn:hover { background: #1e3c72; } .footer-note { margin-top: 12px; font-size: 0.8rem; color: #3a4a6a; text-align: center; } .key-hint { background: #eef3fc; border-radius: 20px; padding: 8px 12px; font-size: 0.8rem; color: #1e3c72; } @media (max-width: 700px) { .sudoku-board { width: 90vw; } } ♾️ SUDOKU 🌱 easy 🍂 medium 🔥 hard 💎 expert ✨ new ⏸️ pause 💡 hint ✏️ notes ⏱️ 00:00 ↺ ✔️ check 🧹 clear 💾 save 📂 load 🖨️ print ↩️ undo slot 1 slot 2 slot 3 🏆 wins 0 ⏱️ best time -- 📊 games 0 ⌨️ 1-9 set · N notes · H hint · P pause · S save immediate error feedback · multi-level hints · notes · save/load (function() { // ---------- core state ---------- let board = Array(9).fill().map(() => Array(9).fill(0)); let solution = Array(9).fill().map(() => Array(9).fill(0)); let givenMask = Array(9).fill().map(() => Array(9).fill(false)); let notes = Array(9).fill().map(() => Array(9).fill().map(() => [])); let selectedRow = -1, selectedCol = -1; let timerInterval = null; let seconds = 0; let paused = false; let noteMode = false; let difficulty = 'medium'; let gameOver = false; let history = []; // for undo (snapshot) let stats = { wins: 0, bestTime: null, games: 0 }; // DOM elements const boardEl = document.getElementById('board'); const timerDisplay = document.getElementById('timerDisplay'); const difficultySelect = document.getElementById('difficultySelect'); const winCountEl = document.getElementById('winCount'); const bestTimeEl = document.getElementById('bestTime'); const gameCountEl = document.getElementById('gameCount'); // ---------- helpers ---------- function formatTime(sec) { const m = Math.floor(sec / 60).toString().padStart(2, '0'); const s = (sec % 60).toString().padStart(2, '0'); return `${m}:${s}`; } function updateTimerDisplay() { timerDisplay.textContent = formatTime(seconds); } function startTimer() { if (timerInterval) clearInterval(timerInterval); timerInterval = setInterval(() => { if (!paused && !gameOver) { seconds++; updateTimerDisplay(); } }, 1000); } function stopTimer() { if (timerInterval) clearInterval(timerInterval); timerInterval = null; } // ---------- puzzle generation (solver + dig) ---------- function generateSolution() { const sol = Array(9).fill().map(() => Array(9).fill(0)); fillGrid(sol); return sol; } function fillGrid(grid) { const nums = [1,2,3,4,5,6,7,8,9]; for (let r = 0; r < 9; r++) { for (let c = 0; c < 9; c++) { if (grid[r][c] === 0) { shuffle(nums); for (let n of nums) { if (isSafe(grid, r, c, n)) { grid[r][c] = n; if (isFull(grid) || fillGrid(grid)) return true; grid[r][c] = 0; } } return false; } } } return true; } function isSafe(grid, row, col, num) { for (let i = 0; i row.every(v => v !== 0)); } function shuffle(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } } function generatePuzzle(diff) { const sol = generateSolution(); const puzzle = sol.map(row => [...row]); const cellsToRemove = { easy: 38, medium: 50, hard: 58, expert: 64 }[diff] || 50; let removed = 0; while (removed < cellsToRemove) { const r = Math.floor(Math.random() * 9); const c = Math.floor(Math.random() * 9); if (puzzle[r][c] !== 0) { puzzle[r][c] = 0; removed++; } } return { puzzle, solution: sol }; } // ---------- board rendering ---------- function renderBoard() { boardEl.innerHTML = ''; for (let r = 0; r = 0 && selectedCol >= 0 && (selectedRow === r || selectedCol === c || (Math.floor(selectedRow/3) === Math.floor(r/3) && Math.floor(selectedCol/3) === Math.floor(c/3)))) { if (!(selectedRow === r && selectedCol === c)) cell.classList.add('related'); } // error check (immediate feedback) if (board[r][c] !== 0 && !givenMask[r][c] && board[r][c] !== solution[r][c]) { cell.classList.add('error'); } // notes display if (board[r][c] === 0 && notes[r][c].length > 0) { cell.classList.add('note-mode'); notes[r][c].forEach(n => { const span = document.createElement('span'); span.className = 'note-number'; span.textContent = n; cell.appendChild(span); }); } else { cell.textContent = board[r][c] !== 0 ? board[r][c] : ''; } cell.dataset.row = r; cell.dataset.col = c; cell.addEventListener('click', () => { if (gameOver) return; selectedRow = r; selectedCol = c; renderBoard(); }); boardEl.appendChild(cell); } } } // ---------- game actions ---------- function newGame() { stopTimer(); seconds = 0; paused = false; gameOver = false; updateTimerDisplay(); difficulty = difficultySelect.value; const { puzzle, solution: sol } = generatePuzzle(difficulty); board = puzzle.map(row => [...row]); solution = sol.map(row => [...row]); givenMask = board.map(row => row.map(v => v !== 0)); notes = Array(9).fill().map(() => Array(9).fill().map(() => [])); selectedRow = -1; selectedCol = -1; history = []; stats.games++; gameCountEl.textContent = stats.games; renderBoard(); startTimer(); } function setCellValue(row, col, val) { if (gameOver || givenMask[row][col]) return; // snapshot for undo history.push({ board: board.map(r => [...r]), notes: notes.map(r => r.map(n => [...n])) }); if (history.length > 30) history.shift(); board[row][col] = val; if (val !== 0) notes[row][col] = []; // check win if (isBoardComplete()) { gameOver = true; stopTimer(); stats.wins++; winCountEl.textContent = stats.wins; if (stats.bestTime === null || seconds < stats.bestTime) { stats.bestTime = seconds; bestTimeEl.textContent = formatTime(seconds); } alert('🎉 You win!'); } renderBoard(); } function isBoardComplete() { for (let r = 0; r < 9; r++) { for (let c = 0; c < 9; c++) { if (board[r][c] !== solution[r][c]) return false; } } return true; } // hint system (multi-level: fill cell, remove notes, highlight) function giveHint() { if (gameOver) return; // find first empty or wrong cell for (let r = 0; r 0) { const correct = solution[r][c]; const filtered = notes[r][c].filter(n => n === correct); if (filtered.length === 0) { // set note to correct history.push({ board: board.map(r => [...r]), notes: notes.map(r => r.map(n => [...n])) }); notes[r][c] = [correct]; renderBoard(); return; } else { history.push({ board: board.map(r => [...r]), notes: notes.map(r => r.map(n => [...n])) }); notes[r][c] = [correct]; renderBoard(); return; } } else { // set value history.push({ board: board.map(r => [...r]), notes: notes.map(r => r.map(n => [...n])) }); board[r][c] = solution[r][c]; notes[r][c] = []; renderBoard(); return; } } } } } // undo function undo() { if (history.length === 0) return; const prev = history.pop(); board = prev.board; notes = prev.notes; renderBoard(); } // check errors (optional immediate feedback already on) function checkErrors() { renderBoard(); // just re-render to show errors } // clear user entries (not given) function clearUser() { history.push({ board: board.map(r => [...r]), notes: notes.map(r => r.map(n => [...n])) }); for (let r = 0; r < 9; r++) { for (let c = 0; c < 9; c++) { if (!givenMask[r][c]) { board[r][c] = 0; notes[r][c] = []; } } } renderBoard(); } // save/load slots function saveToSlot(slot) { const data = { board, solution, givenMask, notes, seconds, difficulty, stats }; localStorage.setItem(`sudoku_slot_${slot}`, JSON.stringify(data)); alert(`saved to slot ${slot}`); } function loadFromSlot(slot) { const raw = localStorage.getItem(`sudoku_slot_${slot}`); if (!raw) { alert('empty slot'); return; } const data = JSON.parse(raw); board = data.board; solution = data.solution; givenMask = data.givenMask; notes = data.notes; seconds = data.seconds; difficulty = data.difficulty; if (data.stats) stats = data.stats; gameOver = false; paused = false; stopTimer(); startTimer(); updateTimerDisplay(); winCountEl.textContent = stats.wins; bestTimeEl.textContent = stats.bestTime !== null ? formatTime(stats.bestTime) : '--'; gameCountEl.textContent = stats.games; renderBoard(); } // print (window.print) function printPuzzle() { window.print(); } // ---------- event listeners ---------- document.getElementById('newGameBtn').addEventListener('click', newGame); document.getElementById('pauseBtn').addEventListener('click', () => { paused = !paused; document.getElementById('pauseBtn').textContent = paused ? '▶️ resume' : '⏸️ pause'; }); document.getElementById('hintBtn').addEventListener('click', giveHint); document.getElementById('noteToggleBtn').addEventListener('click', () => { noteMode = !noteMode; document.getElementById('noteToggleBtn').style.background = noteMode ? '#c7d9f0' : 'white'; }); document.getElementById('checkBtn').addEventListener('click', checkErrors); document.getElementById('clearBtn').addEventListener('click', clearUser); document.getElementById('undoBtn').addEventListener('click', undo); document.getElementById('saveBtn').addEventListener('click', () => saveToSlot(1)); document.getElementById('loadBtn').addEventListener('click', () => loadFromSlot(1)); document.getElementById('printBtn').addEventListener('click', printPuzzle); document.getElementById('resetTimerBtn').addEventListener('click', () => { seconds = 0; updateTimerDisplay(); }); // slot buttons document.querySelectorAll('.slot-btn').forEach(btn => { btn.addEventListener('click', (e) => { const slot = e.target.dataset.slot; if (e.shiftKey) { // shift+click = save saveToSlot(slot); } else { loadFromSlot(slot); } }); }); // keyboard controls document.addEventListener('keydown', (e) => { if (e.key >= '1' && e.key = 0 && selectedCol >= 0 && !givenMask[selectedRow][selectedCol]) { if (noteMode) { history.push({ board: board.map(r => [...r]), notes: notes.map(r => r.map(n => [...n])) }); const idx = notes[selectedRow][selectedCol].indexOf(num); if (idx > -1) notes[selectedRow][selectedCol].splice(idx, 1); else notes[selectedRow][selectedCol].push(num); renderBoard(); } else { setCellValue(selectedRow, selectedCol, num); } } } else if (e.key === 'n' || e.key === 'N') { document.getElementById('noteToggleBtn').click(); } else if (e.key === 'h' || e.key === 'H') { giveHint(); } else if (e.key === 'p' || e.key === 'P') { document.getElementById('pauseBtn').click(); } else if (e.key === 's' || e.key === 'S') { saveToSlot(1); } else if (e.key === 'Backspace' || e.key === 'Delete') { if (selectedRow >= 0 && selectedCol >= 0 && !givenMask[selectedRow][selectedCol]) { history.push({ board: board.map(r => [...r]), notes: notes.map(r => r.map(n => [...n])) }); board[selectedRow][selectedCol] = 0; notes[selectedRow][selectedCol] = []; renderBoard(); } } }); // init newGame(); })();

互动数独游戏构建器

提示词内容收藏

登录以查看完整提示词

用法

参考资料

讨论