当前位置：首页 > JavaScript

js实现围棋

2026-02-01 03:21:33JavaScript

实现围棋游戏的核心逻辑

围棋游戏的实现需要处理棋盘状态、落子规则、胜负判定等核心功能。以下是使用JavaScript实现围棋的基本思路和关键代码片段。

棋盘与状态表示

使用二维数组表示棋盘状态，0表示空位，1表示黑子，2表示白子：

const boardSize = 19;
let board = Array(boardSize).fill().map(() => Array(boardSize).fill(0));

落子逻辑

实现基本的落子功能，需要检查位置是否合法：

function placeStone(x, y, color) {
    if (board[x][y] !== 0) return false; // 已有棋子

    board[x][y] = color;
    checkCaptures(x, y, color === 1 ? 2 : 1);
    return true;
}

提子规则

检查落子后是否提掉对方棋子：

function checkCaptures(x, y, opponentColor) {
    const directions = [[0,1],[1,0],[0,-1],[-1,0]];
    directions.forEach(([dx, dy]) => {
        const nx = x + dx, ny = y + dy;
        if (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize 
            && board[nx][ny] === opponentColor) {
            const group = findGroup(nx, ny);
            if (group && !hasLiberties(group)) {
                removeGroup(group);
            }
        }
    });
}

气（ liberties ）计算

判断一组棋子是否有气：

function hasLiberties(group) {
    const visited = new Set();
    for (const [x,y] of group) {
        const directions = [[0,1],[1,0],[0,-1],[-1,0]];
        for (const [dx, dy] of directions) {
            const nx = x + dx, ny = y + dy;
            if (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize) {
                if (board[nx][ny] === 0) return true;
                if (board[nx][ny] === board[x][y] && !visited.has(`${nx},${ny}`)) {
                    visited.add(`${nx},${ny}`);
                    if (hasLiberties([[nx,ny]])) return true;
                }
            }
        }
    }
    return false;
}

渲染棋盘

使用Canvas绘制棋盘和棋子：

const canvas = document.getElementById('go-board');
const ctx = canvas.getContext('2d');
const cellSize = 30;

function drawBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制棋盘线
    ctx.strokeStyle = '#000';
    for (let i = 0; i < boardSize; i++) {
        ctx.beginPath();
        ctx.moveTo(cellSize/2, i * cellSize + cellSize/2);
        ctx.lineTo((boardSize-1) * cellSize + cellSize/2, i * cellSize + cellSize/2);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(i * cellSize + cellSize/2, cellSize/2);
        ctx.lineTo(i * cellSize + cellSize/2, (boardSize-1) * cellSize + cellSize/2);
        ctx.stroke();
    }

    // 绘制棋子
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            if (board[i][j] === 1) {
                drawStone(i, j, 'black');
            } else if (board[i][j] === 2) {
                drawStone(i, j, 'white');
            }
        }
    }
}

function drawStone(x, y, color) {
    ctx.beginPath();
    ctx.arc(x * cellSize + cellSize/2, y * cellSize + cellSize/2, cellSize/2 - 2, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
}

交互处理

添加点击事件处理落子：

js实现围棋

let currentPlayer = 1; // 黑棋先行

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = Math.floor((e.clientX - rect.left) / cellSize);
    const y = Math.floor((e.clientY - rect.top) / cellSize);

    if (placeStone(x, y, currentPlayer)) {
        currentPlayer = currentPlayer === 1 ? 2 : 1;
        drawBoard();
    }
});