HTML如何制作井字棋？胜负判断逻辑怎么写？

div

div

div

board = ['', '', '', '', '', '', '', '', '']

<div id="game-board">
    <div class="cell" data-index="0"></div>
    <div class="cell" data-index="1"></div>
    <div class="cell" data-index="2"></div>
    <div class="cell" data-index="3"></div>
    <div class="cell" data-index="4"></div>
    <div class="cell" data-index="5"></div>
    <div class="cell" data-index="6"></div>
    <div class="cell" data-index="7"></div>
    <div class="cell" data-index="8"></div>
</div>
<div id="game-status">轮到 X 落子</div>
<button id="reset-button">重新开始</button>

data-index

#game-board {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* 3列，每列100px宽 */
    grid-template-rows: repeat(3, 100px);    /* 3行，每行100px高 */
    width: 300px;
    height: 300px;
    border: 2px solid #333;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.cell {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4em; /* X或O的字体大小 */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

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

/* 标记 X 和 O 的样式 */
.cell.x { color: #e74c3c; }
.cell.o { color: #3498db; }

#game-status {
    text-align: center;
    margin-top: 10px;
    font-size: 1.5em;
    font-weight: bold;
}

#reset-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    background-color: #2ecc71;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#reset-button:hover {
    background-color: #27ae60;
}

let board = ['', '', '', '', '', '', '', '', '']; // 棋盘状态，9个空字符串代表空位
let currentPlayer = 'X'; // 当前玩家，从'X'开始
let gameActive = true; // 游戏是否还在进行中

// 获取DOM元素
const cells = document.querySelectorAll('.cell');
const statusDisplay = document.getElementById('game-status');
const resetButton = document.getElementById('reset-button');

function handleCellClick(clickedCellEvent) {
    const clickedCell = clickedCellEvent.target;
    const clickedCellIndex = parseInt(clickedCell.dataset.index);

    // 如果格子已经被占或者游戏已经结束，就什么也不做
    if (board[clickedCellIndex] !== '' || !gameActive) {
        return;
    }

    // 更新棋盘状态和DOM显示
    board[clickedCellIndex] = currentPlayer;
    clickedCell.innerHTML = currentPlayer;
    clickedCell.classList.add(currentPlayer.toLowerCase()); // 添加类名用于样式

    // 检查胜负或平局
    if (checkWin()) {
        statusDisplay.innerHTML = `玩家 ${currentPlayer} 获胜！`;
        gameActive = false;
        return;
    }

    if (checkDraw()) {
        statusDisplay.innerHTML = `平局！`;
        gameActive = false;
        return;
    }

    // 切换玩家
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    statusDisplay.innerHTML = `轮到 ${currentPlayer} 落子`;
}

// 添加事件监听器
cells.forEach(cell => cell.addEventListener('click', handleCellClick));
resetButton.addEventListener('click', resetGame); // 重置游戏按钮的监听器

resetGame

function resetGame() {
    board = ['', '', '', '', '', '', '', '', ''];
    currentPlayer = 'X';
    gameActive = true;
    statusDisplay.innerHTML = `轮到 ${currentPlayer} 落子`;
    cells.forEach(cell => {
        cell.innerHTML = '';
        cell.classList.remove('x', 'o'); // 移除X和O的样式
    });
}

const winConditions = [
    [0, 1, 2], // 第一行
    [3, 4, 5], // 第二行
    [6, 7, 8], // 第三行
    [0, 3, 6], // 第一列
    [1, 4, 7], // 第二列
    [2, 5, 8], // 第三列
    [0, 4, 8], // 主对角线
    [2, 4, 6]  // 副对角线
];

checkWin

function checkWin() {
    for (let i = 0; i < winConditions.length; i++) {
        const condition = winConditions[i];
        // 提取当前组合的三个格子索引
        const a = condition[0];
        const b = condition[1];
        const c = condition[2];

        // 检查这三个格子是否都被同一个玩家占据，并且不为空
        if (board[a] !== '' && board[a] === board[b] && board[b] === board[c]) {
            return true; // 发现胜利者
        }
    }
    return false; // 没有发现胜利者
}

function checkDraw() {
    // 检查棋盘是否所有格子都已填充
    // board.includes('') 会检查数组中是否包含空字符串，如果包含，说明还有空位
    return !board.includes('') && !checkWin();
}

!board.includes('')

!checkWin()