使用前端技术开发五子棋小游戏
在这篇博文中，我们将详细介绍如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏。我们将展示如何初始化棋盘、处理用户交互以及实现胜负判定。特别是，我们将着重介绍胜负判定的逻辑实现。
完整代码我放在了这里：github
项目结构
项目主要由两个文件组成：
- HTML文件：用于定义页面结构。
- JavaScript文件：负责游戏的逻辑和交互。
HTML结构
首先，我们创建一个简单的HTML文件，它定义了棋盘和基本样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋小游戏</title>
<style>
/* 添加简单的样式 */
#board {
display: grid;
grid-template-columns: repeat(15, 40px);
grid-template-rows: repeat(15, 40px);
border: 1px solid #000;
}
.cell {
width: 40px;
height: 40px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1>五子棋小游戏</h1>
<div id="board"></div>
<script src="game.js"></script>
</body>
</html>
棋盘初始化
在 game.js 文件中，我们首先初始化棋盘和相关变量，然后生成棋盘界面并为每个单元格添加点击事件监听器。
const board = document.getElementById('board');
const size = 15;
let currentPlayer = 'black';
// 初始化棋盘数组
const boardArray = Array(size).fill(null).map(() => Array(size).fill(null));
// 初始化棋盘
for (let i = 0; i < size * size; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.index = i;
board.appendChild(cell);
}
// 监听点击事件
board.addEventListener('click', (event) => {
const cell = event.target;
if (cell.classList.contains('cell') && !cell.innerHTML) {
const index = +cell.dataset.index;
const x = index % size;
const y = Math.floor(index / size);
const disc = document.createElement('div');
disc.style.width = '30px';
disc.style.height = '30px';
disc.style.borderRadius = '50%';
disc.style.backgroundColor = currentPlayer;
cell.appendChild(disc);
// 更新棋盘状态
boardArray[y][x] = currentPlayer;
// 检查胜负
if (checkWinner(boardArray, currentPlayer)) {
alert(`${currentPlayer} wins!`);
} else {
// 切换玩家
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
}
}
});
胜负判定
胜负判定逻辑是这个游戏的核心部分。我们需要检测棋盘上是否有五个连续的棋子。我们将从四个方向（水平、垂直、左上到右下、右上到左下）进行检查。
function checkWinner(boardArray, player) {
const directions = [
[1, 0], // 水平
[0, 1], // 垂直
[1, 1], // 左上到右下
[1, -1] // 右上到左下
];
for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
if (boardArray[y][x] === player) {
for (let [dx, dy] of directions) {
let count = 1;
for (let step = 1; step < 5; step++) {
const nx = x + dx * step;
const ny = y + dy * step;
if (
nx >= 0 && nx < size &&
ny >= 0 && ny < size &&
boardArray[ny][nx] === player
) {
count++;
} else {
break;
}
}
if (count === 5) {
return true;
}
}
}
}
}
return false;
}
胜负判定逻辑解释
定义四个方向：我们定义了四个方向的增量
(dx, dy)，分别对应水平、垂直、左上到右下和右上到左下。遍历棋盘：在每个格子上，如果该格子是当前玩家的棋子，我们检查四个方向上是否有连续五个棋子。
检测五个连续的棋子：在每个方向上，我们使用一个
for循环从1到4逐步增加步数(step)，计算新的坐标(nx, ny)，如果新坐标上的棋子和当前玩家相同，则增加计数器count。返回胜利结果：如果在任何方向上计数器
count达到5，则当前玩家胜利，函数返回true，否则返回false。
总结
通过这篇博客，我们介绍了如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏，重点介绍了棋盘初始化和点击事件处理，以及胜负判定的逻辑实现。希望这篇文章能帮助你更好地理解前端开发和算法的基础知识。享受编程的乐趣吧！
