HTML 五子棋实现方法

基础结构 使用HTML创建棋盘网格，CSS美化样式，JavaScript处理游戏逻辑。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        #board {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            gap: 1px;
            background: #000;
            padding: 5px;
        }
        .cell {
            width: 30px;
            height: 30px;
            background: #f0d9b5;
            cursor: pointer;
        }
        .black { background: black; border-radius: 50%; }
        .white { background: white; border-radius: 50%; }
    </style>
</head>
<body>
    <div id="board"></div>
    <script>
        const board = document.getElementById('board');
        let currentPlayer = 'black';

        // 初始化棋盘
        for (let i = 0; i < 15*15; i++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            cell.addEventListener('click', handleClick);
            board.appendChild(cell);
        }

        function handleClick(e) {
            if (e.target.classList.contains('black') || 
                e.target.classList.contains('white')) return;
            
            e.target.classList.add(currentPlayer);
            checkWin();
            currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
        }

        function checkWin() {
            // 这里需要实现胜负判断逻辑
        }
    </script>
</body>
</html>

关键功能扩展

胜负判断逻辑 在checkWin()函数中添加以下算法检测五子连珠：

javascript 复制代码

function checkWin() {
    const cells = document.querySelectorAll('.cell');
    const size = 15;
    const index = Array.from(cells).indexOf(event.target);
    const row = Math.floor(index / size);
    const col = index % size;

    const directions = [
        [0, 1],   // 水平
        [1, 0],    // 垂直
        [1, 1],    // 对角线
        [1, -1]    // 反对角线
    ];

    for (const [dx, dy] of directions) {
        let count = 1;
        
        // 正向检查
        for (let i = 1; i < 5; i++) {
            const newRow = row + i * dx;
            const newCol = col + i * dy;
            if (newRow >= 0 && newRow < size && newCol >= 0 && newCol < size) {
                const checkIndex = newRow * size + newCol;
                if (cells[checkIndex].classList.contains(currentPlayer)) {
                    count++;
                } else break;
            }
        }

        // 反向检查
        for (let i = 1; i < 5; i++) {
            const newRow = row - i * dx;
            const newCol = col - i * dy;
            if (newRow >= 0 && newRow < size && newCol >= 0 && newCol < size) {
                const checkIndex = newRow * size + newCol;
                if (cells[checkIndex].classList.contains(currentPlayer)) {
                    count++;
                } else break;
            }
        }

        if (count >= 5) {
            alert(`${currentPlayer} wins!`);
            location.reload();
        }
    }
}

功能优化建议

添加游戏状态显示 在HTML中添加显示当前玩家的元素：

html 复制代码

<div id="status">Current: Black</div>

JavaScript中更新状态显示：

javascript 复制代码

const statusDisplay = document.getElementById('status');
// 在切换玩家时添加：
statusDisplay.textContent = `Current: ${currentPlayer === 'black' ? 'Black' : 'White'}`;

增加重新开始按钮 在HTML中添加按钮：

html 复制代码

<button id="restart">Restart</button>

JavaScript中添加事件监听：

javascript 复制代码

document.getElementById('restart').addEventListener('click', () => {
    location.reload();
});