JavaScript 五子棋：打造你的棋盘之争70

引言

五子棋是一种古老而令人着迷的棋盘游戏，源自中国。以其简单的规则和令人上瘾的游戏玩法而闻名，它已成为世界各地游戏爱好者的最爱。借助 JavaScript 的强大功能，我们现在可以在 Web 浏览器中创建自己的五子棋游戏。

创建棋盘

第一步是创建一个 15x15 的棋盘。我们可以使用嵌套循环在 HTML 中生成一个表格，其中每个单元格代表棋盘上的一个位置。
<table id="chessboard">
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>

添加棋子

接下来，我们需要添加棋子。我们将使用 JavaScript 事件监听器来跟踪玩家点击棋盘的单元格。当一个玩家点击一个单元格时，我们将创建一个新的棋子对象并将其添加到单元格中。
("chessboard").addEventListener("click", function(e) {
// 获取点击的单元格
let cell = ;
// 创建一个新的棋子
let piece = new Piece(player);
// 将棋子添加到单元格
();
});

检查获胜条件

当棋盘上放置了五个相同颜色的棋子时，游戏结束。我们需要编写一个函数来检查每种情况，包括水平、垂直和对角线排列。
function checkWin(player) {
// 检查水平方向
for (let i = 0; i < 15; i++) {
if (checkLine(i, 0, 0, 1, player)) {
return true;
}
}
// 检查垂直方向
for (let j = 0; j < 15; j++) {
if (checkLine(0, j, 1, 0, player)) {
return true;
}
}
// 检查对角线方向
for (let i = 0; i < 11; i++) {
// 从左上角开始
if (checkLine(i, 0, 1, 1, player)) {
return true;
}
// 从右上角开始
if (checkLine(14, i, -1, 1, player)) {
return true;
}
}
return false;
}

玩家轮换

当一个玩家放置棋子时，游戏需要轮到另一个玩家。我们可以使用一个布尔变量来跟踪当前玩家，并在每次放置棋子后切换其值。
let currentPlayer = true; // true 为玩家 1，false 为玩家 2
("chessboard").addEventListener("click", function(e) {
// ...
// 切换玩家
currentPlayer = !currentPlayer;
});

游戏结束

当有玩家获胜或棋盘已满时，游戏应结束。我们可以显示一个弹出窗口或消息来宣布获胜者或和局。
if (checkWin(currentPlayer)) {
alert("玩家 " + (currentPlayer ? "1" : "2") + " 获胜！");
} else if (isBoardFull()) {
alert("和局！");
}

完整代码

以下是完整的游戏代码：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 五子棋</title>
<style>
#chessboard {
border: 1px solid black;
border-collapse: collapse;
}
#chessboard td {
width: 30px;
height: 30px;
border: 1px solid black;
}
.piece {
width: 25px;
height: 25px;
border-radius: 50%;
}
.player-1 {
background-color: black;
}
.player-2 {
background-color: white;
}
</style>
</head>
<body>
<table id="chessboard">
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
<script>
// 棋子类
class Piece {
constructor(player) {
= player;
= ("div");
("piece");
(player ? "player-1" : "player-2");
}
}
// 检查获胜条件
function checkWin(player) {
// 检查水平方向
for (let i = 0; i < 15; i++) {
if (checkLine(i, 0, 0, 1, player)) {
return true;
}
}
// 检查垂直方向
for (let j = 0; j < 15; j++) {
if (checkLine(0, j, 1, 0, player)) {
return true;
}
}
// 检查对角线方向
for (let i = 0; i < 11; i++) {
// 从左上角开始
if (checkLine(i, 0, 1, 1, player)) {
return true;
}
// 从右上角开始
if (checkLine(14, i, -1, 1, player)) {
return true;
}
}
return false;
}
// 检查一条线上的获胜情况
function checkLine(x, y, dx, dy, player) {
let count = 0;
for (let i = 0; i < 5; i++) {
if (x < 0 || x > 14 || y < 0 || y > 14) {
continue;
}
let cell = ("chessboard").rows[y].cells[x];
if ([0] && [0].("player-" + player)) {
count++;
}
x += dx;
y += dy;
}
return count == 5;
}
// 检查棋盘是否已满
function isBoardFull() {
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
if (!("chessboard").rows[i].cells[j].children[0]) {
return false;
}
}
}
return true;
}
// 添加棋子
("chessboard").addEventListener("click", function(e) {
// 获取点击的单元格
let cell = ;
// 创建一个新的棋子
let piece = new Piece(currentPlayer);
// 将棋子添加到单元格
();
// 检查获胜条件
if (checkWin(currentPlayer)) {
alert("玩家 " + (currentPlayer ? "1" : "2") + " 获胜！");
} else if (isBoardFull()) {
alert