【前段】开发五子棋小游戏全流程

使用前端技术开发五子棋小游戏

在这篇博文中，我们将详细介绍如何使用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。