/** * 井字棋游戏 - 科技感风格 * 功能：双人对战、人机对战（3档AI）、悔棋、计时、音效、粒子、历史、主题 */ // ============ 游戏状态 ============ const state = { board: Array(9).fill(''), currentPlayer: 'X', gameActive: true, scores: { X: 0, O: 0, draw: 0 }, moveHistory: [], moveCount: 1, timerInterval: null, seconds: 0, mode: 'pvp', difficulty: 'medium', isLightTheme: false, soundEnabled: true, history: [], aiThinking: false, }; // 获胜组合 const WIN_COMBOS = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; // ============ DOM 元素 ============ const cells = document.querySelectorAll('.cell'); const turnIndicator = document.getElementById('turnIndicator'); const messageEl = document.getElementById('message'); const scoreXEl = document.getElementById('scoreX'); const scoreOEl = document.getElementById('scoreO'); const scoreDrawEl = document.getElementById('scoreDraw'); const playerXScoreEl = document.getElementById('playerX-score'); const playerOScoreEl = document.getElementById('playerO-score'); const timerEl = document.getElementById('timer'); const moveCountEl = document.getElementById('moveCount'); const restartBtn = document.getElementById('restartBtn'); const resetBtn = document.getElementById('resetBtn'); const undoBtn = document.getElementById('undoBtn'); const themeBtn = document.getElementById('themeBtn'); const themeIcon = document.getElementById('themeIcon'); const soundBtn = document.getElementById('soundBtn'); const soundIcon = document.getElementById('soundIcon'); const historyBtn = document.getElementById('historyBtn'); const historyPanel = document.getElementById('historyPanel'); const historyList = document.getElementById('historyList'); const closeHistory = document.getElementById('closeHistory'); const clearHistory = document.getElementById('clearHistory'); const overlay = document.getElementById('overlay'); const particlesContainer = document.getElementById('particlesContainer'); const modeSelector = document.getElementById('modeSelector'); const difficultySelector = document.getElementById('difficultySelector'); // ============ 音效系统（Web Audio API） ============ let audioCtx = null; function getAudioCtx() { if (!audioCtx) { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } return audioCtx; } function playTone(frequency, duration, type = 'sine', volume = 0.15) { if (!state.soundEnabled) return; try { const ctx = getAudioCtx(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = type; osc.frequency.setValueAtTime(frequency, ctx.currentTime); gain.gain.setValueAtTime(volume, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration); osc.connect(gain); gain.connect(ctx.destination); osc.start(ctx.currentTime); osc.stop(ctx.currentTime + duration); } catch (e) { /* 忽略音频错误 */ } } function playMoveSound() { playTone(1200, 0.06, 'square', 0.06); playTone(800, 0.08, 'sine', 0.08); } function playWinSound() { playTone(523, 0.12, 'sine', 0.12); setTimeout(() => playTone(659, 0.12, 'sine', 0.12), 120); setTimeout(() => playTone(784, 0.12, 'sine', 0.12), 240); setTimeout(() => playTone(1047, 0.3, 'sine', 0.15), 360); } function playDrawSound() { playTone(400, 0.2, 'triangle', 0.1); setTimeout(() => playTone(350, 0.25, 'triangle', 0.1), 180); } function playUndoSound() { playTone(700, 0.06, 'sine', 0.08); setTimeout(() => playTone(500, 0.08, 'sine', 0.06), 80); } // ============ 粒子系统 ============ function spawnParticles(count = 80) { const colors = [ '#00ffff', '#0088ff', '#8800ff', '#ff00aa', '#00ff88', '#ffcc00', ]; for (let i = 0; i < count; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 8 + 3; const color = colors[Math.floor(Math.random() * colors.length)]; const left = Math.random() * 100; const delay = Math.random() * 1.5; const duration = Math.random() * 2 + 1.5; particle.style.cssText = ` width: ${size}px; height: ${size}px; background: ${color}; left: ${left}%; top: -${size}px; animation-delay: ${delay}s; animation-duration: ${duration}s; box-shadow: 0 0 ${size * 2}px ${color}; `; particlesContainer.appendChild(particle); setTimeout(() => particle.remove(), (delay + duration) * 1000); } } // ============ 计时器 ============ function startTimer() { stopTimer(); state.seconds = 0; updateTimerDisplay(); state.timerInterval = setInterval(() => { state.seconds++; updateTimerDisplay(); }, 1000); } function stopTimer() { if (state.timerInterval) { clearInterval(state.timerInterval); state.timerInterval = null; } } function updateTimerDisplay() { const m = String(Math.floor(state.seconds / 60)).padStart(2, '0'); const s = String(state.seconds % 60).padStart(2, '0'); timerEl.textContent = `⏱️ ${m}:${s}`; } // ============ 初始化 ============ function init() { cells.forEach(cell => { cell.addEventListener('click', handleCellClick); }); restartBtn.addEventListener('click', restartGame); resetBtn.addEventListener('click', resetScores); undoBtn.addEventListener('click', undoMove); themeBtn.addEventListener('click', toggleTheme); soundBtn.addEventListener('click', toggleSound); historyBtn.addEventListener('click', openHistory); closeHistory.addEventListener('click', closeHistoryPanel); overlay.addEventListener('click', closeHistoryPanel); clearHistory.addEventListener('click', clearAllHistory); modeSelector.querySelectorAll('.mode-btn').forEach(btn => { btn.addEventListener('click', () => { modeSelector.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); state.mode = btn.dataset.mode; updateModeUI(); restartGame(); }); }); difficultySelector.querySelectorAll('.diff-btn').forEach(btn => { btn.addEventListener('click', () => { difficultySelector.querySelectorAll('.diff-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); state.difficulty = btn.dataset.diff; if (state.mode === 'pve') restartGame(); }); }); document.addEventListener('keydown', handleKeyboard); updateModeUI(); updateActivePlayerHighlight(); } // ============ 键盘快捷键 ============ function handleKeyboard(e) { const keyMap = { '1': 6, '2': 7, '3': 8, '4': 3, '5': 4, '6': 5, '7': 0, '8': 1, '9': 2, 'q': 0, 'w': 1, 'e': 2, 'a': 3, 's': 4, 'd': 5, 'z': 6, 'x': 7, 'c': 8, }; const cellIndex = keyMap[e.key.toLowerCase()]; if (cellIndex !== undefined) { const cell = cells[cellIndex]; if (cell) handleCellClick({ target: cell }); } if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); undoMove(); } } // ============ 处理点击 ============ function handleCellClick(e) { const cell = e.target.closest('.cell'); if (!cell) return; const index = parseInt(cell.dataset.index); if (state.board[index] !== '' || !state.gameActive || state.aiThinking) return; if (state.mode === 'pve' && state.currentPlayer === 'O') return; makeMove(index); } // ============ 执行落子 ============ function makeMove(index) { const player = state.currentPlayer; state.board[index] = player; state.moveHistory.push({ cell: index, player }); renderCell(cells[index], player); playMoveSound(); const winResult = checkWin(); if (winResult) { endGame(winResult); return; } if (state.board.every(c => c !== '')) { endGame('draw'); return; } state.currentPlayer = state.currentPlayer === 'X' ? 'O' : 'X'; state.moveCount++; moveCountEl.textContent = state.moveCount; updateTurnDisplay(); updateActivePlayerHighlight(); updateUndoButton(); if (state.mode === 'pve' && state.currentPlayer === 'O' && state.gameActive) { state.aiThinking = true; updateTurnDisplay(); setTimeout(() => { const aiMove = getAIMove(); state.aiThinking = false; if (aiMove !== -1) makeMove(aiMove); }, 400 + Math.random() * 300); } } // ============ 渲染单元格 ============ function renderCell(cell, player) { cell.classList.add('taken'); const span = document.createElement('span'); span.classList.add(player === 'X' ? 'cell-x' : 'cell-o'); span.textContent = player; cell.appendChild(span); } // ============ 更新回合显示 ============ function updateTurnDisplay() { if (!state.gameActive) { const allEmpty = state.board.every(c => c === ''); turnIndicator.textContent = allEmpty ? '等待开始' : ''; return; } const colorClass = state.currentPlayer === 'X' ? 'x' : 'o'; let labelText = `${state.currentPlayer} 的回合`; if (state.mode === 'pve' && state.currentPlayer === 'O') { labelText = '🤖 AI 思考中'; } turnIndicator.innerHTML = `${labelText}`; } // ============ 高亮当前玩家 ============ function updateActivePlayerHighlight() { const isPlayerXTurn = state.currentPlayer === 'X'; const isPlayerOTurn = state.currentPlayer === 'O'; playerXScoreEl.classList.toggle('active', isPlayerXTurn && state.gameActive); playerOScoreEl.classList.toggle('active', isPlayerOTurn && state.gameActive); } // ============ 检查胜负 ============ function checkWin() { for (const combo of WIN_COMBOS) { const [a, b, c] = combo; if (state.board[a] !== '' && state.board[a] === state.board[b] && state.board[a] === state.board[c]) { return { winner: state.board[a], combo }; } } return null; } // ============ 游戏结束 ============ function endGame(result) { state.gameActive = false; stopTimer(); if (result === 'draw') { state.scores.draw++; scoreDrawEl.textContent = state.scores.draw; messageEl.textContent = '⊘ 平局 — 比赛结束'; messageEl.className = 'message show draw'; playDrawSound(); } else { state.scores[result.winner]++; updateScoreDisplay(); highlightWinningCells(result.combo); if (state.mode === 'pve') { if (result.winner === 'X') { messageEl.textContent = '▸ 你赢了！目标已消灭'; } else { messageEl.textContent = '▸ AI 获胜！系统主宰'; } } else { messageEl.textContent = `▸ ${result.winner} 获胜！消灭成功`; } messageEl.className = 'message show winner'; playWinSound(); spawnParticles(80); } saveGameResult(result); updateUndoButton(); } // ============ 高亮获胜格子 ============ function highlightWinningCells(combo) { combo.forEach(index => { cells[index].classList.add('winner-cell'); }); } // ============ 更新分数 ============ function updateScoreDisplay() { scoreXEl.textContent = state.scores.X; scoreOEl.textContent = state.scores.O; } // ============ AI 逻辑 ============ function getAIMove() { const emptyCells = state.board.map((v, i) => v === '' ? i : -1).filter(i => i !== -1); if (emptyCells.length === 0) return -1; switch (state.difficulty) { case 'easy': return easyAI(emptyCells); case 'medium': return mediumAI(); case 'hard': return hardAI(); default: return easyAI(emptyCells); } } function easyAI(emptyCells) { return emptyCells[Math.floor(Math.random() * emptyCells.length)]; } function mediumAI() { const winMove = findWinningMove('O'); if (winMove !== -1) return winMove; const blockMove = findWinningMove('X'); if (blockMove !== -1) return blockMove; if (state.board[4] === '') return 4; const emptyCells = state.board.map((v, i) => v === '' ? i : -1).filter(i => i !== -1); return emptyCells[Math.floor(Math.random() * emptyCells.length)]; } function hardAI() { let bestScore = -Infinity; let bestMove = -1; for (let i = 0; i < 9; i++) { if (state.board[i] === '') { state.board[i] = 'O'; let score = minimax(state.board, 0, false); state.board[i] = ''; if (score > bestScore) { bestScore = score; bestMove = i; } } } return bestMove; } function minimax(board, depth, isMaximizing) { const winner = getWinner(board); if (winner === 'O') return 10 - depth; if (winner === 'X') return depth - 10; if (board.every(c => c !== '')) return 0; if (isMaximizing) { let best = -Infinity; for (let i = 0; i < 9; i++) { if (board[i] === '') { board[i] = 'O'; best = Math.max(best, minimax(board, depth + 1, false)); board[i] = ''; } } return best; } else { let best = Infinity; for (let i = 0; i < 9; i++) { if (board[i] === '') { board[i] = 'X'; best = Math.min(best, minimax(board, depth + 1, true)); board[i] = ''; } } return best; } } function getWinner(board) { for (const [a, b, c] of WIN_COMBOS) { if (board[a] && board[a] === board[b] && board[a] === board[c]) return board[a]; } return null; } function findWinningMove(player) { for (const combo of WIN_COMBOS) { const [a, b, c] = combo; const values = [state.board[a], state.board[b], state.board[c]]; const playerCount = values.filter(v => v === player).length; const emptyCount = values.filter(v => v === '').length; if (playerCount === 2 && emptyCount === 1) { return combo[values.indexOf('')]; } } return -1; } // ============ 悔棋 ============ function undoMove() { if (state.moveHistory.length === 0 || !state.gameActive) return; if (state.mode === 'pve') { if (state.moveHistory.length >= 2) { const last = state.moveHistory.pop(); state.board[last.cell] = ''; renderCellUndo(cells[last.cell]); const secondLast = state.moveHistory.pop(); state.board[secondLast.cell] = ''; renderCellUndo(cells[secondLast.cell]); state.currentPlayer = 'X'; state.moveCount = Math.max(1, state.moveCount - 2); } else { const last = state.moveHistory.pop(); state.board[last.cell] = ''; renderCellUndo(cells[last.cell]); state.currentPlayer = 'X'; state.moveCount = Math.max(1, state.moveCount - 1); } } else { const last = state.moveHistory.pop(); state.board[last.cell] = ''; renderCellUndo(cells[last.cell]); state.currentPlayer = last.player; state.moveCount = Math.max(1, state.moveCount - 1); } playUndoSound(); updateTurnDisplay(); updateActivePlayerHighlight(); updateUndoButton(); } function renderCellUndo(cell) { cell.innerHTML = ''; cell.classList.remove('taken', 'winner-cell'); } function updateUndoButton() { undoBtn.disabled = state.moveHistory.length === 0 || !state.gameActive; } // ============ 重新开始 ============ function restartGame() { state.board = Array(9).fill(''); state.currentPlayer = 'X'; state.gameActive = true; state.moveHistory = []; state.moveCount = 1; moveCountEl.textContent = '1'; cells.forEach(cell => { cell.innerHTML = ''; cell.classList.remove('taken', 'winner-cell'); }); messageEl.className = 'message'; messageEl.textContent = ''; updateTurnDisplay(); updateActivePlayerHighlight(); updateUndoButton(); startTimer(); } // ============ 重置比分 ============ function resetScores() { state.scores = { X: 0, O: 0, draw: 0 }; scoreXEl.textContent = '0'; scoreOEl.textContent = '0'; scoreDrawEl.textContent = '0'; restartGame(); } // ============ 主题切换 ============ function toggleTheme() { state.isLightTheme = !state.isLightTheme; document.body.classList.toggle('light-theme', state.isLightTheme); themeIcon.textContent = state.isLightTheme ? '◑' : '◐'; playTone(500, 0.05, 'sine', 0.08); } // ============ 音效开关 ============ function toggleSound() { state.soundEnabled = !state.soundEnabled; soundIcon.textContent = state.soundEnabled ? '♪' : '♭'; if (state.soundEnabled) playTone(600, 0.08, 'sine', 0.1); } // ============ 游戏历史记录 ============ function saveGameResult(result) { const entry = { time: new Date().toLocaleString('zh-CN'), mode: state.mode === 'pvp' ? '双人对战' : `人机对战[${state.difficulty}]`, result: result === 'draw' ? '平局' : `${result.winner} 获胜`, winner: result.winner, duration: state.seconds, moves: [...state.moveHistory], totalMoves: state.moveCount, }; state.history.unshift(entry); if (state.history.length > 50) state.history.pop(); } function openHistory() { renderHistoryList(); historyPanel.classList.add('active'); overlay.classList.add('active'); } function closeHistoryPanel() { historyPanel.classList.remove('active'); overlay.classList.remove('active'); } function renderHistoryList() { if (state.history.length === 0) { historyList.innerHTML = '

▾ 暂无数据 ▾
// 等待首次匹配记录...

'; return; } historyList.innerHTML = state.history.map(h => { const resultClass = h.winner === 'X' ? 'color-X' : h.winner === 'O' ? 'color-O' : ''; const m = Math.floor(h.duration / 60); const s = h.duration % 60; const movesText = h.moves.map(mv => `${mv.player}${mv.cell + 1}`).join(' → '); return `

${h.result} // ${h.time} | ${m}:${String(s).padStart(2,'0')}

> ${movesText}

模式: ${h.mode} | 步数: ${h.totalMoves}

`; }).join(''); } function clearAllHistory() { state.history = []; renderHistoryList(); playTone(300, 0.1, 'sine', 0.1); } // ============ 模式 UI 更新 ============ function updateModeUI() { const isPVE = state.mode === 'pve'; difficultySelector.classList.toggle('hidden', !isPVE); const labelX = playerXScoreEl.querySelector('.player-label'); const labelO = playerOScoreEl.querySelector('.player-label'); if (state.mode === 'pve') { labelX.textContent = '玩家'; labelO.textContent = 'AI'; } else { labelX.textContent = '玩家'; labelO.textContent = '玩家'; } } // ============ 启动游戏 ============ init();

作品预览「井字棋科技风-人机对战」