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

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

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