Initial commit: Add basic tic-tac-toe game structure and documentation

2026-01-28 09:38:44 +00:00
parent 2761b915a8
commit ec413cb712
5 changed files with 426 additions and 2 deletions
--- a/script.js
+++ b/script.js
@@ -0,0 +1,142 @@
+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();
+});