JS+canvas五子棋人机对战实现步骤详解

让我详细讲解“JS+canvas五子棋人机对战实现步骤详解”的完整攻略。

步骤一：创建canvas图像

首先需要在HTML文件中创建一个canvas标签，用于棋盘的绘制和操作。

<canvas id="chess" width="450" height="450"></canvas>

使用JavaScript将canvas标签获取并赋值给变量，在后续操作中将用到它。

const chess = document.getElementById('chess');

步骤二：绘制棋盘

通过canvas的API，在棋盘上绘制网格，可通过以下代码实现。

const context = chess.getContext('2d');

for (let i = 0; i < 15; i++) {
    context.beginPath();
    context.moveTo(15 + i * 30, 15);
    context.lineTo(15 + i * 30, 435);
    context.stroke();
    context.beginPath();
    context.moveTo(15, 15 + i * 30);
    context.lineTo(435, 15 + i * 30);
    context.stroke();
}

该代码绘制了一个15*15的网格，并将棋盘边缘保留出20px的余白。

步骤三：绘制棋子

接下来需要实现通过鼠标点击的方式在棋盘上绘制黑白棋子。

通过监听鼠标点击事件，获取鼠标点击的坐标，在canvas上绘制棋子。可以通过以下代码实现：

chess.onclick = function (event) {
    const x = event.offsetX;
    const y = event.offsetY;
    const i = Math.floor(x / 30);
    const j = Math.floor(y / 30);
    if (chessBoard[i][j] === 0) {
        oneStep(i, j, me);
        chessBoard[i][j] = 1;
    }
}

其中，oneStep函数用于在canvas上绘制棋子，其代码如下：

function oneStep(i, j, me) {
    context.beginPath();
    context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
    context.closePath();
    const gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
    if (me) {
        gradient.addColorStop(0, '#0a0a0a');
        gradient.addColorStop(1, '#636766');
    } else {
        gradient.addColorStop(0, '#d1d1d1');
        gradient.addColorStop(1, '#f9f9f9');
    }
    context.fillStyle = gradient;
    context.fill();
}

步骤四：判断胜负

在绘制完棋子之后，需要进行胜负的判断。

通过存储棋盘上落子情况，可以进行胜负判断。可以通过以下代码实现：

function checkWin(x, y, chessBoard) {
    const offsetX = [-1, 0, 1, -1, 1, -1, 0, 1];
    const offsetY = [-1, -1, -1, 0, 0, 1, 1, 1];
    for (let i = 0; i < 8; i++) {
        let count = 1;
        for (let j = 1; ; j++) {
            const newX = x + j * offsetX[i];
            const newY = y + j * offsetY[i];
            if (newX < 0 || newX >= 15 || newY < 0 || newY >= 15) break;
            if (chessBoard[newX][newY] === chessBoard[x][y]) {
                count++;
            } else {
                break;
            }
        }
        for (let j = 1; ; j++) {
            const newX = x - j * offsetX[i];
            const newY = y - j * offsetY[i];
            if (newX < 0 || newX >= 15 || newY < 0 || newY >= 15) break;
            if (chessBoard[newX][newY] === chessBoard[x][y]) {
                count++;
            } else {
                break;
            }
        }
        if (count >= 5) {
            return true;
        }
    }
    return false;
}

其中，offsetX和offsetY表明了棋子在8个方向上的偏移量，通过两个循环依次向8个方向遍历判断是否有五子连珠。如有，则判断该方的棋手胜利。

步骤五：实现人机对战

最后需要实现人机对战功能。

通过改变人与电脑落子的顺序，可以实现人机对战。

可以设置一个变量me，判断当前落子者是人还是电脑。

let me = true;

在人类落子之后，电脑AI会在可行的位置中选择一个最佳的落子点，落下对应的棋子。

me = !me;
if (me) {
    ...
} else {
    ...
}

例如，可以添加以下代码来实现自动落子：

me = !me;
if (!me) {
    const [x, y] = computerAI(chessBoard);
    oneStep(x, y, false);
    chessBoard[x][y] = 2;
    if (checkWin(x, y, chessBoard)) {
        alert('Computer Win!');
        over = true;
    }
}

其中，computerAI函数用于实现电脑的AI移动策略，其代码可参考AI五子棋。