用 JavaScript 创建五子棋游戏54

五子棋是一款经典的两人策略棋盘游戏，目标是将五个自己的棋子水平、垂直或对角线相连。本文将逐步指导您使用 JavaScript 创建一个五子棋游戏。

创建游戏板

首先，我们需要创建一个 15x15 的游戏板。我们可以使用 JavaScript 的二维数组来表示游戏板，其中每个元素代表一个棋盘格。例如：```javascript
const board = new Array(15).fill(0).map(() => new Array(15).fill(0));
```

定义棋子类型

接下来，我们需要定义两种棋子类型，即黑棋和白棋。我们可以使用 -1 表示黑棋，1 表示白棋。```javascript
const BLACK = -1;
const WHITE = 1;
```

放置棋子

用户放置棋子时，我们需要将对应的棋盘格更新为适当的棋子类型。我们可以使用以下函数：```javascript
function placePiece(x, y, type) {
if (board[x][y] !== 0) {
// 棋盘格已占用
return false;
}
board[x][y] = type;
return true;
}
```

检查胜负

每当放置一个棋子后，我们需要检查是否有玩家获胜。我们可以使用以下函数搜索五个相连的棋子：```javascript
function checkWin(type) {
// 水平方向
for (let i = 0; i < 15; i++) {
let count = 0;
for (let j = 0; j < 15; j++) {
if (board[i][j] === type) {
count++;
} else {
count = 0;
}
if (count >= 5) {
return true;
}
}
}
// 垂直方向
for (let j = 0; j < 15; j++) {
let count = 0;
for (let i = 0; i < 15; i++) {
if (board[i][j] === type) {
count++;
} else {
count = 0;
}
if (count >= 5) {
return true;
}
}
}
// 对角线方向
for (let i = 0; i < 11; i++) {
for (let j = 0; j < 11; j++) {
let count = 0;
for (let k = 0; k < 5; k++) {
if (board[i + k][j + k] === type) {
count++;
} else {
count = 0;
}
if (count >= 5) {
return true;
}
}
}
}
for (let i = 0; i < 11; i++) {
for (let j = 14; j > 3; j--) {
let count = 0;
for (let k = 0; k < 5; k++) {
if (board[i + k][j - k] === type) {
count++;
} else {
count = 0;
}
if (count >= 5) {
return true;
}
}
}
}
return false;
}
```

游戏逻辑

现在我们需要编写游戏逻辑，包括确定当前玩家、处理用户输入以及检查胜负。```javascript
let player = BLACK;
function handleInput(e) {
const x = - ;
const y = - ;
const i = (x / 30);
const j = (y / 30);
if (placePiece(i, j, player)) {
if (checkWin(player)) {
alert(`${player === BLACK ? "黑棋" : "白棋"}获胜！`);
} else {
player = -player;
}
}
}
const canvas = ("canvas");
("click", handleInput);
```

图形用户界面

最后，我们需要创建一个图形用户界面来显示游戏板和棋子。我们可以使用 HTML Canvas 元素来绘制游戏板和棋子。```html

```
```javascript
const ctx = ("2d");
function drawBoard() {
= "black";
= 1;
for (let i = 0; i < 16; i++) {
();
(i * 30, 0);
(i * 30, 450);
();
();
(0, i * 30);
(450, i * 30);
();
}
}
function drawPiece(x, y, type) {
= type === BLACK ? "black" : "white";
();
(x * 30 + 15, y * 30 + 15, 12, 0, 2 * );
();
}
function updateDisplay() {
drawBoard();
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
if (board[i][j] !== 0) {
drawPiece(i, j, board[i][j]);
}
}
}
}
```