用前端技术打造五子棋小游戏，GitHub代码分享！

用前端技术打造五子棋小游戏，GitHub代码分享！

引用

CSDN

等

9

来源

1.

https://blog.csdn.net/xcc212/article/details/141946452

2.

https://blog.csdn.net/m0_49315169/article/details/118197223

3.

https://blog.csdn.net/qq_19309473/article/details/139392473

4.

https://github.com/HullQin/gobang

5.

https://github.com/wangdongdongc/Gomoku

6.

https://juejin.cn/post/7314937895039057958

7.

https://my.oschina.net/emacs_8577418/blog/16688833

8.

https://developer.aliyun.com/article/1261989

9.

https://jasonleaster.github.io/GoBang/

五子棋是一种广受欢迎的策略棋类游戏，起源于中国，具有悠久的历史。它不仅考验玩家的逻辑思维能力，还兼具趣味性和挑战性。在当今数字化时代，将五子棋游戏搬上网页，用前端技术实现，不仅能让我们重温经典，还能体验到现代技术带来的便利。

技术实现要点

HTML结构

我们使用canvas元素来创建棋盘，通过JavaScript绘制网格。canvas提供了强大的绘图API，非常适合绘制棋盘和棋子。

<canvas id="chessBoard" width="450" height="450"></canvas>

CSS样式

通过CSS设置棋盘的边框和背景色，使其更具视觉吸引力。

canvas {
    border: 2px solid #654321;
    background: #f0d9b5;
}

JavaScript逻辑

这是整个游戏的核心部分，包括棋盘初始化、落子处理、胜负判断等功能。

1. 初始化棋盘

我们创建一个二维数组来记录棋盘状态，使用drawBoard函数绘制棋盘网格。

const boardSize = 15;
let board = Array(boardSize).fill().map(() => Array(boardSize).fill(0));

function drawBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < boardSize; i++) {
        ctx.beginPath();
        ctx.moveTo(offset, i * gridSize + offset);
        ctx.lineTo(canvas.width - offset, i * gridSize + offset);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(i * gridSize + offset, offset);
        ctx.lineTo(i * gridSize + offset, canvas.height - offset);
        ctx.stroke();
    }
}

2. 处理落子

通过监听canvas的点击事件，获取落子位置并更新棋盘状态。

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = Math.round((e.clientX - rect.left - offset) / gridSize);
    const y = Math.round((e.clientY - rect.top - offset) / gridSize);
    if (x >= 0 && x < boardSize && y >= 0 && y < boardSize && board[y][x] === 0) {
        board[y][x] = currentPlayer;
        drawPiece(x, y, currentPlayer);
        if (checkWin(x, y)) {
            info.textContent = `${currentPlayer === 1 ? '黑棋' : '白棋'} 获胜！`;
            gameOver = true;
        } else {
            currentPlayer = currentPlayer === 1 ? 2 : 1;
            info.textContent = `当前回合：${currentPlayer === 1 ? '黑棋' : '白棋'}`;
        }
    }
});

3. 胜负判断

这是游戏逻辑中最复杂的一部分。我们需要检查当前落子位置的四个方向（水平、垂直、两个对角线）是否有连续的五子。

function checkWin(x, y) {
    const directions = [
        [1, 0],  // 水平
        [0, 1],  // 垂直
        [1, 1],  // 右下
        [1, -1]  // 右上
    ];

    for (let [dx, dy] of directions) {
        let count = 1;
        let i = x + dx, j = y + dy;
        while (i >= 0 && i < boardSize && j >= 0 && j < boardSize && board[j][i] === currentPlayer) {
            count++;
            i += dx;
            j += dy;
        }
        i = x - dx;
        j = y - dy;
        while (i >= 0 && i < boardSize && j >= 0 && j < boardSize && board[j][i] === currentPlayer) {
            count++;
            i -= dx;
            j -= dy;
        }
        if (count >= 5) return true;
    }
    return false;
}

4. 重新开始功能

提供一个按钮，允许玩家重新开始游戏。

function resetGame() {
    board = Array(boardSize).fill().map(() => Array(boardSize).fill(0));
    currentPlayer = 1;
    gameOver = false;
    info.textContent = '当前回合：黑棋';
    drawBoard();
}

运行效果展示

GitHub代码仓库

为了方便大家学习和实践，我将完整的代码上传到了GitHub仓库。你可以直接下载代码并在本地运行。

GitHub仓库链接

总结与扩展

通过这个简单的五子棋游戏，我们不仅重温了经典，还学习了如何用前端技术实现一个完整的交互式应用。如果你对这个游戏感兴趣，可以尝试以下扩展功能：

1. AI对手：实现一个简单的AI算法，让玩家可以与电脑对战。
2. 联机对战：利用WebSocket技术，实现双人在线对战功能。
3. 棋谱记录：记录每一步棋的位置，方便复盘和分析。

希望这篇文章能激发你对前端开发的兴趣，也期待你能在这个基础上创造出更多有趣的作品！