五子棋是一种经典的两人策略棋盘游戏，利用JS代码可以轻松创建其Web版本。本文将介绍如何使用JavaScript编写一个简单的五子棋Web游戏代码。
创建棋盘
首先，你需要创建一个代表棋盘的画布。可以使用HTML5的
js
const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
绘制棋盘格子
接下来，绘制棋盘格子。遍历每个位置并绘制一个矩形，表示每个格子。
js
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
ctx.strokeRect(i * 40, j * 40, 40, 40);
}
}
处理用户输入
当用户点击棋盘时，需要处理他们的输入。获取点击位置并将其转换为棋盘上的坐标。然后，将棋子放置在该位置。
js
canvas.addEventListener("click", (e) => {
const x = Math.floor(e.offsetX / 40);
const y = Math.floor(e.offsetY / 40);
placePiece(x, y);
});
放置棋子
将棋子放置在指定位置。绘制一个圆形来表示棋子，并交替使用两种颜色。
js
function placePiece(x, y) {
ctx.fillStyle = player ? "black" : "white";
ctx.beginPath();
ctx.arc(x * 40 + 20, y * 40 + 20, 20, 0, 2 * Math.PI);
ctx.fill();
}
检查获胜
在每次放置棋子后，检查是否存在获胜者。遍历每条可能的获胜线，并检查是否有五颗相邻的棋子。
js
function checkWinner() {
// 检查水平线
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 11; j++) {
if (board[i][j] === board[i][j + 1] &&
board[i][j] === board[i][j + 2] &&
board[i][j] === board[i][j + 3] &&
board[i][j] === board[i][j + 4]) {
return board[i][j];
}
}
}
// 检查竖直线
for (let i = 0; i < 11; i++) {
for (let j = 0; j < 15; j++) {
if (board[i][j] === board[i + 1][j] &&
board[i][j] === board[i + 2][j] &&
board[i][j] === board[i + 3][j] &&
board[i][j] === board[i + 4][j]) {
return board[i][j];
}
}
}
// 检查对角线
for (let i = 0; i < 11; i++) {
for (let j = 0; j < 11; j++) {
if (board[i][j] === board[i + 1][j + 1] &&
board[i][j] === board[i + 2][j + 2] &&
board[i][j] === board[i + 3][j + 3] &&
board[i][j] === board[i + 4][j + 4]) {
return board[i][j];
}
}
}
for (let i = 4; i < 15; i++) {
for (let j = 0; j < 11; j++) {
if (board[i][j] === board[i - 1][j + 1] &&
board[i][j] === board[i - 2][j + 2] &&
board[i][j] === board[i - 3][j + 3] &&
board[i][j] === board[i - 4][j + 4]) {
return board[i][j];
}
}
}
return null;
}
