html实现黑白棋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑白棋</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        .status-bar {
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: bold;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(8, 50px);
            grid-gap: 1px;
            width: 400px; /* 8个单元格 * 50px + 7个间隙 * 1px */
        }
        .cell {
            width: 50px;
            height: 50px;
            background-color: #0A0;
            position: relative;
            border: 1px solid #000;
            cursor: pointer;
        }
        .disk {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .black {
            background-color: #000;
        }
        .white {
            background-color: #FFF;
        }
    </style>
</head>
<body>
<div class="status-bar" id="statusBar">当前轮到：黑方</div>
<div id="board" class="board"></div>
<script>
    const boardSize = 8;
    let board = Array.from({length: boardSize}, () => Array(boardSize).fill(null));
    let currentPlayer = 'black';
    function initializeBoard() {
        const boardElement = document.getElementById('board');
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.row = i;
                cell.dataset.col = j;
                cell.addEventListener('click', cellClickHandler);
                boardElement.appendChild(cell);
            }
        }
        // 初始化棋盘中间的四个棋子
        placeDisk(3, 3, 'white');
        placeDisk(4, 4, 'white');
        placeDisk(3, 4, 'black');
        placeDisk(4, 3, 'black');
        drawBoard();
    }
    function drawBoard() {
        const boardElement = document.getElementById('board');
        boardElement.innerHTML = '';
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.row = i;
                cell.dataset.col = j;
                cell.addEventListener('click', cellClickHandler);
                if (board[i][j]) {
                    const disk = document.createElement('div');
                    disk.className = `disk ${board[i][j]}`;
                    cell.appendChild(disk);
                }
                boardElement.appendChild(cell);
            }
        }
    }
    function cellClickHandler(event) {
        const row = parseInt(event.target.dataset.row, 10);
        const col = parseInt(event.target.dataset.col, 10);
        makeMove(row, col);
    }
    function makeMove(x, y) {
        if (board[x][y] !== null) return; // 该位置已被占用
        const directions = [
            [-1, -1], [-1, 0], [-1, 1],
            [0, -1], [0, 1],
            [1, -1], [1, 0], [1, 1]
        ];
        let tilesToFlip = [];
        for (let [dx, dy] of directions) {
            let nx = x + dx;
            let ny = y + dy;
            let line = [];
            while (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize) {
                if (board[nx][ny] === oppositeColor(currentPlayer)) {
                    line.push([nx, ny]);
                    nx += dx;
                    ny += dy;
                } else if (board[nx][ny] === currentPlayer) {
                    tilesToFlip = tilesToFlip.concat(line);
                    break;
                } else {
                    line = [];
                    break;
                }
            }
        }
        if (tilesToFlip.length > 0) {
            board[x][y] = currentPlayer;
            for (let [tx, ty] of tilesToFlip) {
                board[tx][ty] = currentPlayer;
            }
            currentPlayer = oppositeColor(currentPlayer);
            drawBoard();
            updateStatusBar();
        }
    }
    function placeDisk(x, y, color) {
        board[x][y] = color;
    }
    function oppositeColor(color) {
        return color === 'black' ? 'white' : 'black';
    }
    function updateStatusBar() {
        const statusBarElement = document.getElementById('statusBar');
        statusBarElement.textContent = `当前轮到：${currentPlayer === 'black' ? '黑方' : '白方'}`;
    }
    initializeBoard();
</script>
</body>
</html>