tic-tac-toe-game/script.js

class TicTacToeGame {
    constructor() {
        this.board = ['', '', '', '', '', '', '', '', ''];
        this.currentPlayer = 'X';
        this.gameActive = true;
        this.scores = {
            X: parseInt(localStorage.getItem('scoreX') || '0'),
            O: parseInt(localStorage.getItem('scoreO') || '0'),
            draw: parseInt(localStorage.getItem('scoreDraw') || '0')
        };
        
        this.initializeGame();
    }
    
    initializeGame() {
        this.renderBoard();
        this.updateScores();
        this.updateCurrentPlayer();
        
        // Add event listeners
        document.getElementById('reset-btn').addEventListener('click', () => this.resetGame());
        document.getElementById('reset-scores-btn').addEventListener('click', () => this.resetScores());
    }
    
    renderBoard() {
        const gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = '';
        
        this.board.forEach((cell, index) => {
            const cellElement = document.createElement('div');
            cellElement.classList.add('cell');
            cellElement.textContent = cell;
            
            if (cell === 'X') cellElement.classList.add('x');
            if (cell === 'O') cellElement.classList.add('o');
            
            cellElement.addEventListener('click', () => this.makeMove(index));
            gameBoard.appendChild(cellElement);
        });
    }
    
    makeMove(index) {
        if (this.board[index] !== '' || !this.gameActive) return;
        
        this.board[index] = this.currentPlayer;
        this.renderBoard();
        
        const winResult = this.checkWinner();
        if (winResult.isWin) {
            this.handleWin(winResult.winner, winResult.winningCells);
        } else if (this.isBoardFull()) {
            this.handleDraw();
        } else {
            this.switchPlayer();
        }
    }
    
    checkWinner() {
        const winPatterns = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
            [0, 4, 8], [2, 4, 6]             // Diagonals
        ];
        
        for (const pattern of winPatterns) {
            const [a, b, c] = pattern;
            if (this.board[a] && this.board[a] === this.board[b] && this.board[a] === this.board[c]) {
                return { isWin: true, winner: this.board[a], winningCells: pattern };
            }
        }
        
        return { isWin: false, winner: null, winningCells: [] };
    }
    
    isBoardFull() {
        return this.board.every(cell => cell !== '');
    }
    
    handleWin(winner, winningCells) {
        this.gameActive = false;
        this.scores[winner]++;
        localStorage.setItem(`score${winner}`, this.scores[winner].toString());
        
        // Highlight winning cells
        const cells = document.querySelectorAll('.cell');
        winningCells.forEach(index => {
            cells[index].classList.add('winning-cell');
        });
        
        document.getElementById('game-status').textContent = `玩家 ${winner} 获胜！`;
        this.updateScores();
    }
    
    handleDraw() {
        this.gameActive = false;
        this.scores.draw++;
        localStorage.setItem('scoreDraw', this.scores.draw.toString());
        
        document.getElementById('game-status').textContent = '平局！';
        this.updateScores();
    }
    
    switchPlayer() {
        this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';
        this.updateCurrentPlayer();
    }
    
    updateCurrentPlayer() {
        document.getElementById('current-player').textContent = this.currentPlayer;
    }
    
    resetGame() {
        this.board = ['', '', '', '', '', '', '', '', ''];
        this.currentPlayer = 'X';
        this.gameActive = true;
        
        document.getElementById('game-status').textContent = '游戏中';
        this.renderBoard();
        this.updateCurrentPlayer();
    }
    
    resetScores() {
        this.scores = { X: 0, O: 0, draw: 0 };
        localStorage.setItem('scoreX', '0');
        localStorage.setItem('scoreO', '0');
        localStorage.setItem('scoreDraw', '0');
        
        this.updateScores();
        this.resetGame();
    }
    
    updateScores() {
        document.getElementById('score-x').textContent = this.scores.X;
        document.getElementById('score-o').textContent = this.scores.O;
        document.getElementById('score-draw').textContent = this.scores.draw;
    }
}

// Initialize the game when the page loads
document.addEventListener('DOMContentLoaded', () => {
    new TicTacToeGame();
});