加载中... 加载中...

终极井字棋HTML程序

SYM12356

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>终极井字棋</title>
    <style>
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

    .container {
        margin: 20px;
    }

    .ultimate-board {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        background-color: #333;
        padding: 10px;
        border-radius: 10px;
    }

    .sub-board {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background-color: #999;
        padding: 1px;
        border: 2px solid transparent;
    }

    .sub-board.active {
        border-color: #ff4444;
    }

    .cell {
        width: 40px;
        height: 40px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        cursor: pointer;
        transition: background-color 0.3s;
        position: relative;
    }

    .cell::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .cell:nth-child(3n)::after {
        border-right: none;
    }

    .cell:nth-child(n+7)::after {
        border-bottom: none;
    }

    .cell:hover {
        background-color: #eee;
    }

    .sub-board.won-X .cell {
        background-color: #ffcccc;
    }

    .sub-board.won-O .cell {
        background-color: #ccccff;
    }

    .status {
        margin-top: 20px;
        font-size: 24px;
    }

    button {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="ultimate-board" id="board"></div>
        <div class="status" id="status"></div>
        <button onclick="newGame()">新游戏</button>
        <a href = "Harrison的网页.html">
           返回</a>
    </div>

    <script>
        class UltimateTicTacToe {
            constructor() {
                this.currentPlayer = 'X';
                this.activeBoard = null;
                this.boards = Array(9).fill().map(() => ({
                    cells: Array(9).fill(''),
                    winner: null
                }));
                this.gameOver = false;
                this.initBoard();
            }

            initBoard() {
                const boardElement = document.getElementById('board');
                boardElement.innerHTML = '';
                
                for (let i = 0; i < 9; i++) {
                    const subBoard = document.createElement('div');
                    subBoard.className = 'sub-board';
                    subBoard.dataset.index = i;
                    
                    for (let j = 0; j < 9; j++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell';
                        cell.dataset.board = i;
                        cell.dataset.cell = j;
                        cell.addEventListener('click', (e) => this.handleClick(e));
                        subBoard.appendChild(cell);
                    }
                    
                    boardElement.appendChild(subBoard);
                }
                this.updateGame();
            }

            handleClick(event) {
                if (this.gameOver) return;
                
                const boardIndex = parseInt(event.target.dataset.board);
                const cellIndex = parseInt(event.target.dataset.cell);
                
                if (this.isValidMove(boardIndex, cellIndex)) {
                    this.makeMove(boardIndex, cellIndex);
                }
            }

            isValidMove(boardIndex, cellIndex) {
                if (this.activeBoard !== null && boardIndex !== this.activeBoard) return false;
                if (this.boards[boardIndex].winner) return false;
                if (this.boards[boardIndex].cells[cellIndex]) return false;
                return true;
            }

            makeMove(boardIndex, cellIndex) {
                this.boards[boardIndex].cells[cellIndex] = this.currentPlayer;
                this.checkSubWinner(boardIndex);
                this.activeBoard = this.boards[cellIndex].winner ? null : cellIndex;
                this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';
                this.checkGameOver();
                this.updateGame();
            }

            checkSubWinner(boardIndex) {
                const cells = this.boards[boardIndex].cells;
                const lines = [
                    [0, 1, 2], [3, 4, 5], [6, 7, 8], // 行
                    [0, 3, 6], [1, 4, 7], [2, 5, 8], // 列
                    [0, 4, 8], [2, 4, 6] // 对角线
                ];

                for (const line of lines) {
                    const [a, b, c] = line;
                    if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
                        this.boards[boardIndex].winner = cells[a];
                        return;
                    }
                }

                if (!cells.includes('')) {
                    this.boards[boardIndex].winner = 'D'; // 平局
                }
            }

            checkGameOver() {
                const winners = this.boards.map(board => board.winner);
                const lines = [
                    [0, 1, 2], [3, 4, 5], [6, 7, 8],
                    [0, 3, 6], [1, 4, 7], [2, 5, 8],
                    [0, 4, 8], [2, 4, 6]
                ];

                for (const line of lines) {
                    const [a, b, c] = line;
                    if (winners[a] && winners[a] === winners[b] && winners[a] === winners[c]) {
                        this.gameOver = true;
                        return;
                    }
                }

                if (winners.every(w => w !== null)) {
                    this.gameOver = true;
                }
            }

            updateGame() {
                document.querySelectorAll('.sub-board').forEach((subBoard, index) => {
                    const boardData = this.boards[index];
                    subBoard.classList.toggle('active', 
                        !this.gameOver && 
                        (this.activeBoard === null || this.activeBoard === index) && 
                        !boardData.winner
                    );

                    if (boardData.winner) {
                        subBoard.classList.add(`won-[imath:0]{boardData.winner}`);
                    }

                    subBoard.querySelectorAll('.cell').forEach((cell, cellIndex) => {
                        cell.textContent = boardData.cells[cellIndex] || '';
                    });
                });

                const statusElement = document.getElementById('status');
                if (this.gameOver) {
                    statusElement.textContent = '游戏结束！';
                } else {
                    statusElement.textContent = `当前玩家：[/imath:0]{this.currentPlayer}`;
                }
            }
        }

        let game;

        function newGame() {
            game = new UltimateTicTacToe();
        }

        // 初始化游戏
        newGame();
    </script>
</body>
</html>
规则
一、基础规则
‌ 棋盘结构‌
由一个大棋盘（3×3）组成，每个大格子内包含一个小棋盘（3×3），共81个格子。
玩家轮流在‌被激活的小棋盘‌内落子（X先手，O后手），目标是通过小棋盘的三连赢得大棋盘。
‌ 落子限制‌
玩家上一步落子的位置决定对手下一步的落子范围。例如：若上一步落在大棋盘的右下角小棋盘内，则
对手必须在大棋盘的右下角小棋盘内落子。
‌ 例外‌：若目标小棋盘已满或已分出胜负，对手可在任意未满的小棋盘落子。
‌胜负判定‌
小棋盘内三连（横、竖、斜）即赢得该小棋盘，标记为大棋盘中的X或O。
大棋盘上形成三连即赢得全局。