样式

 body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }
        .game-container {
            margin: 20px 0;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            background-color: #333;
        }
        .cell {
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .cell:hover {
            background-color: #f8f8f8;
        }
        .status {
            font-size: 24px;
            margin: 20px 0;
            color: #333;
        }
        button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        .win {
            background-color: #ffeeba;
        }
    </style>

界面

点击事件

 <script>
        const board = document.getElementById('board');
        const status = document.getElementById('status');
        const resetBtn = document.getElementById('resetBtn');
        let currentPlayer = 'X';
        let gameActive = true;
        let gameState = ['', '', '', '', '', '', '', '', ''];
        const winningCombos = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // 行
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // 列
            [0, 4, 8], [2, 4, 6] // 对角线
        ];
        // 初始化棋盘
        function initBoard() {
            board.innerHTML = '';
            gameState = ['', '', '', '', '', '', '', '', ''];
            currentPlayer = 'X';
            gameActive = true;
            status.textContent = `当前玩家：${currentPlayer}`;
            
            for (let i = 0; i < 9; i++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.index = i;
                cell.addEventListener('click', handleCellClick);
                board.appendChild(cell);
            }
        }
        // 处理格子点击
        function handleCellClick(e) {
            const cell = e.target;
            const index = parseInt(cell.dataset.index);
            if (gameState[index] !== '' || !gameActive) return;
            gameState[index] = currentPlayer;
            cell.textContent = currentPlayer;
            cell.style.color = currentPlayer === 'X' ? '#2196F3' : '#FF5722';
            checkWin();
            checkTie();
            switchPlayer();
        }
        // 检查胜利
        function checkWin() {
            for (const combo of winningCombos) {
                const [a, b, c] = combo;
                if (gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c]) {
                    gameActive = false;
                    status.textContent = `玩家 ${currentPlayer} 获胜！`;
                    highlightWinningCells(combo);
                    return;
                }
            }
        }
        // 高亮获胜格子
        function highlightWinningCells(combo) {
            combo.forEach(index => {
                document.querySelector(`[data-index="${index}"]`).classList.add('win');
            });
        }
        // 检查平局
        function checkTie() {
            if (!gameState.includes('') && gameActive) {
                gameActive = false;
                status.textContent = '平局！';
            }
        }
        // 切换玩家
        function switchPlayer() {
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            status.textContent = `当前玩家：${currentPlayer}`;
        }
        // 重置游戏
        resetBtn.addEventListener('click', initBoard);
        // 初始化游戏
        initBoard();
    </script>