BoardGame.io 五子棋（一）

已于 2023-03-19 11:27:11 修改
阅读量1k 收藏 2
点赞数 3
分类专栏： 五子棋 文章标签： 游戏 javascript
于 2021-06-02 11:05:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zml086/article/details/117433757
版权

太长不看：直接点击这里查看代码

BoardGame.io 是一个专门为回合制游戏打造的游戏引擎。无需一行网络或存储相关的代码，只需要编写简单函数描述游戏动作如何影响游戏状态，即可自动帮你生成一个支持多人在线的完整游戏。它支持回合制游戏的方方面面，比如状态管理、多人在线、AI、游戏进程或回合管理、游戏大厅等诸多功能。今天我们就用它结合 React 制作一个五子棋游戏。

准备

首先，我们准备一个 React 项目，并添加 boadgame.io 依赖。

npx create-react-app gomoku
cd gomoku
npm install boardgame.io

定义游戏

接下来，我们要定义游戏。定义游戏相当于告诉 boardgame.io 游戏是怎么玩的。由于引擎会管理好当前玩家、游戏是否结束等这些状态，对于五子棋游戏来说，只剩下局面信息需要定义了。通过创建一个满足特定接口的对象，即可定义一个游戏。这些接口当中，setup 函数是起点，它负责创建游戏状态 G。而 moves 则定义了此游戏中有多少种可以执行的动作。

动作实际是一个函数，它接收当前状态 G 作为参数，并对它进行修改，使它成为新的状态。动作函数还接收另外一个参数 ctx, 它包含当前玩家、当前回合等这些信息，由 boardgame.io 管理，无法修改。除 G 和 ctx 外，其它参数你可自由定义，它们将被视为执行该动作的额外参数。

五子棋游戏中，我们只有一个动作，就是落子。且把它命名为 putStone，它需要一个 ID 参数告诉它该在哪里下子。

创建 src/Game.js 文件，并添加以下内容：

export const Gomoku = {
    setup: () => ({ stones: Array(15*15).fill(0) }),

    moves: {
        putStone: (G, ctx, id) => {
          G.stones[id] = [1,-1][ctx.currentPlayer];
        },
    },
};

定义客户端

客户端相当于一个可以玩游戏，只不过只能通过 API 玩。将 src/App.js 内容替换为以下内容：

import { Client } from 'boardgame.io/react';
import { Gomoku } from './Game';

const App = Client({ game: Gomoku});

export default App;

若此时运行 npm start ，会看到一个 UI，这是 boardgame.io 渲染的 Debug 面板。当前状态下，使用这个 UI 下虽然也可以进行游戏，但玩起来相当费劲，就不介绍了。

Debug 面板在生产环境构建时 （NODE_ENV='production'）会被自动去除，也可以在 Client 的配置中添加 debug: false 关闭。

改善游戏逻辑

着法验证

目前为止，若玩家对已经落子的位置调用 putStone , 则那个位置的棋子会被覆盖。这挺扯的，需要防止。

要让 boardgame.io 就能知道此着法是无效的，需返回一个从 boardgame.io 中引入的特别常量：

import { INVALID_MOVE } from 'boardgame.io/core';

现在，我们在 putStone 中验证着法并返回 INVALID_MOVE:

putStone: (G, ctx, id) => {
    if (G.stones[id] !== 0) {
        return INVALID_MOVE;
    }
    G.stones[id] = [1,-1][ctx.currentPlayer];
}

回合管理

不同的游戏，玩家在一回合可以进行的动作数量可能不同，结束回合的条件也不同。有的游戏一回合可以进行多个动作，有的一回合一个动作。五子棋就是一回合一个动作的游戏。在 Debug 面板中，我们可以点击 endTurn 手动结束回合。其实，客户端代码也可以执行完动作后自动结束回合。

在 boardgame.io 中有多种方法管理回合，使用 moveLimit 就是其中之一。下面我们就使用这种方法让引擎自动帮我们结束当前回合：

export const Gomoku = {
    setup: () => { /* ... */ },
    
	turn: {
	    moveLimit: 1,
	},
	
	moves: { /* ... */ },
};

胜利条件

我们的五子棋游戏定义得差不多了，只差最后一环：胜利局面判断。

首先，我们先加几个函数：

/**
 * 检查一条线上某一方是否成 5
 * @param {number[]} stones
 * @param {number} clr
 * @param {number} start
 * @param {number} end
 * @param {number} stride
 */
function checkWinnerByLine(stones, clr, start, end, stride) {
    let cnt = 0;
    for (; cnt < 5 && start !== end; start += stride) {
        if (stones[start] === clr) cnt++;
        else cnt = 0;
    }
    return cnt >= 5;
}

/**
 * 检查某位玩家是否获胜
 * @param {number[]} stones
 * @param {number} clr
 */
function isVictory(stones, clr) {
    const boardSize = 15;
    let x = 0,
        y = 0;
    let start = 0,
        end = 0,
        stride = 1;

    // horizontal
    stride = 1;
    start = 0;
    end = start + boardSize;
    for (y = 0; y < boardSize; y++) {
        let win= checkWinnerByLine(stones, clr, start, end, stride);
        if (win) return true;
        start += boardSize;
        end += boardSize;
    }

    // vertical
    stride = boardSize;
    start = 0;
    end = start + stride * boardSize;
    for (x = 0; x < boardSize; x++) {
        let win= checkWinnerByLine(stones, clr, start, end, stride);
        if (win) return true;
        start += 1;
        end += 1;
    }

    // major diag
    stride = boardSize + 1;
    start = 0;
    end = start + stride * boardSize;

    for (x = 0; x < boardSize - 4; x++) {
        let win= checkWinnerByLine(stones, clr, start, end, stride);
        if (win) return true;
        start += 1;
        end -= boardSize;
    }

    start = boardSize;
    end = start + stride * (boardSize - 1);

    for (y = 1; y < boardSize - 4; y++) {
        let win= checkWinnerByLine(stones, clr, start, end, stride);
        if (win) return true;
        start += boardSize;
        end -= 1;
    }

    // secondary diag
    stride = boardSize - 1;
    start = 4;
    end = start + stride * 5;

    for (x = 4; x < boardSize; x++) {
        let win= checkWinnerByLine(stones, clr, start, end, stride);
        if (win) return true;
        start += 1;
        end += boardSize;
    }

    start = 2 * boardSize - 1;
    end = start + stride * (boardSize - 1);

    for (y = 1; y < boardSize - 4; y++) {
        let win= checkWinnerByLine(stones, clr, start, end, stride);
        if (win) return true;
        start += boardSize;
        end += 1;
    }

    return false;
}

/**
 * @param {number[]} stones
 */
function isDraw(stones) {
    return stones.every(s => s !== 0);
}

这几个函数用来判断胜利局面和平局。其中，胜利局面判断方式是四个方向逐行扫描 “成 5 ” 棋型。由于现在我们不知道上次落子点，所以无法做局部扫描。

接下来，我们添加 endIf 函数到我们的游戏定义中。此函数会在每次游戏状态更新后被调用，引擎借此知道游戏是否结束。

export const Gomoku = {
  	// setup, moves, etc.

  	endIf: (G, ctx) => {
        if (isVictory(G.stones, [1, -1][ctx.currentPlayer])) {
            return { winner: ctx.currentPlayer };
        }
        if (isDraw(G.stones)) {
            return { draw: true };
        }
    },
};

若游戏未结束，endIf 必须返回 undefined 或者 null，其它值都会视为游戏结束。若游戏结束，函数返回值将赋值给 ctx.gameOver。

制作棋盘

到这里，整个游戏只差 UI 了，有了 UI 我们就可以使用鼠标点击棋盘进行游戏了。UI 可以先简单做，直接把游戏状态 G 转换成可以点击的格子即可。

创建 src/Board.js 文件，并添加以下内容：

export function GomokuBoard({ G, ctx, moves }) {
    function handleClick(id) {
        moves.putStone(id);
    }

    let winner = "";
    if (ctx.gameover) {
        winner =
            ctx.gameover.winner !== undefined ? (
                <div id="winner">Winner: {ctx.gameover.winner}</div>
            ) : (
                <div id="winner">Draw!</div>
            );
    }

    const cellStyle = {
        border: "1px solid #555",
        width: "50px",
        height: "50px",
        lineHeight: "50px",
        textAlign: "center"
    };

    let tbody = [];
    for (let i = 0; i < BOARD_SIZE; i++) {
        let cells = [];
        for (let j = 0; j < BOARD_SIZE; j++) {
            const id = BOARD_SIZE * i + j;
            cells.push(
                <td style={cellStyle} key={id} onClick={() => handleClick(id)}>
                    {G.stones[id]}
                </td>
            );
        }
        tbody.push(<tr key={i}>{cells}</tr>);
    }

    return (
        <div>
            <table id="board">
                <tbody>{tbody}</tbody>
            </table>
            {winner}
        </div>
    );
}

渲染效果如下
在这里插入图片描述

查看效果

在使用 CodeSandbox.io 过程中我发现，使用 BoardGame.io 的 react 组件会出现某个模块找不到的情况，而使用非 react 的模块时不会出现。可以把 src/App.js 替换为如下内容解决：

//import { Client } from "boardgame.io/react";
import React, { useEffect, useMemo, useState } from "react";
import { Client } from "boardgame.io/client";
import { Gomoku } from "./Game";
import { GomokuBoard } from "./Board";

//const App = Client({ game: Gomoku });
function App() {
    const client = useMemo(() => Client({ game: Gomoku }), []);
    const [boardProps, setBoardProps] = useState(client.getInitialState());

    useEffect(() => {
        let c = client;
        c.subscribe((s) => {
            setBoardProps({ ...s });
        });
        c.start();
        return () => c.stop();
    }, [client]);
    return <GomokuBoard {...boardProps} moves={client.moves} />;
}

export default App;

添加机器人

前面提到 boardgame.io 支持 AI，只需要告诉引擎当前状态下的可行动作有哪些，AI 就会尝试搜索出最可能获胜的那个动作。

要添加 AI，需要在我们的游戏定义中添加 ai 配置项。其中 enumerate 函数应该返回当前状态 G 的所有可行动作（数组表示）。以五子棋为例，每个空白点位都可以执行一个 putStone 动作，函数就应该返回每个空白点对应的 putStone 动作。

export const Gomoku = {
    // setup, turn, moves, endIf ...

    ai: {
        enumerate: (G, ctx) => {
            let moves = [];
            for (let i = 0; i < G.stones.length; i++) {
                if (G.stones[i] === 0) {
                    moves.push({ move: "putStone", args: [i] });
                }
            }
            return moves;
        }
    }
};

大功造成。现在打开 Debug 面板中的 AI 页，就可以使用 AI 了：

  • play 用来让 AI 执行一个动作。在五子棋中，就是走一步棋
  • simulate 用来让 AI 自己完成一局游戏。相当于自我对局

点击体验

美化棋盘

虽然已经做了一个棋盘，不过表格做的棋盘看起来不太美观，接下来我们美化一下。

wgo.js 是专门为制作网页围棋而开发的库，好在它的棋盘部分通用性和扩展性很好，完全能用于五子棋棋盘。它功能丰富，支持多种棋子渲染样式，还拥有主题、局部棋盘、标记等功能。接下来，我们就使用它的默认主题，制作一个简单的棋盘。

首先，添加 wgo 依赖项

npm install wgo

然后，更新 src/Board.js

import React, { useEffect, useMemo, useRef } from "react";
import { BOARD_SIZE } from "./Consts";
import { FieldBoardObject, SVGBoard } from "wgo";

export function GomokuBoard({ G, ctx, moves }) {
    const boardContainerRef = useRef();
    const cachedStonesRef = useRef([]);
    const board = useMemo(() => {
        return new SVGBoard(document.createElement("div"), {
            size: BOARD_SIZE,
            width: 500,
            heith: 500,
            coordinates: true
        });
    }, []);

    useEffect(() => {
        const elem = board.element;
        boardContainerRef.current.appendChild(elem);

        return () => {
            boardContainerRef.current.removeChild(elem);
        };
    }, [board]);

    useEffect(() => {
        const handler = (ev, pos) => {
            let id = pos.y * BOARD_SIZE + pos.x;
            moves.putStone(id);
        };
        board.on("click", handler);

        return () => {
            board.off("click", handler);
        };
    }, [board, moves]);

    if (cachedStonesRef.current !== G.stones) {
        const cachedStones = cachedStonesRef.current;
        for (let i = 0; i < G.stones.length; i++) {
            if (cachedStones[i] === G.stones[i]) continue;
            let x = i % BOARD_SIZE;
            let y = Math.floor(i / BOARD_SIZE);

            if (cachedStones[i] !== 0) {
                board.removeObjectsAt(x, y);
            }

            if (G.stones[i] === 1) {
                board.addObject(new FieldBoardObject("B", x, y));
            } else if (G.stones[i] === -1) {
                board.addObject(new FieldBoardObject("W", x, y));
            } else {
                board.removeObjectsAt(x, y);
            }
        }
        cachedStonesRef.current = G.stones;
    }

    let winner = "";
    if (ctx.gameover) {
        winner =
            ctx.gameover.winner !== undefined ? (
                <div id="winner">Winner: {ctx.gameover.winner}</div>
            ) : (
                <div id="winner">Draw!</div>
            );
    }

    return (
        <div>
            <div ref={boardContainerRef} />
            {winner}
        </div>
    );
}

修改后的棋盘如下图，好看多了。
在这里插入图片描述
查看效果

wgo.js 目前的文档还是旧版本的，旧版本采用 Canvas 渲染，且只能加载到全局名字空间。新的 3.0 版本支持 SVG 和 UMD 模块，但还处在 alpha 阶段，没有文档和示例代码，需要直接参照它的源码使用。

总结

本文介绍了如何使用 boardgame.io 制作一个五子棋游戏，并添加了简单的 AI 功能，还介绍了如何使用 wgo.js 制作美观的棋盘，也算是一个像模像样的五子棋游戏了。接下来，还可以再美化下界面，强化一下 AI，甚至添加在线对局功能。

one bite
关注
专栏目录
游戏状态自动管理框架 BOARDGAME.IO
12-26 2652
授权协议:MIT 开发语言:JavaScript 操作系统:跨平台 开发厂商:Google BOARDGAME.IO 详细介绍 BOARDGAME.IO 是 Google 开源的一个游戏框架，旨在允许游戏作者将游戏规则从本质上转化为一系列简单的函数，这些函数用于描述当一个指定动作发生时游戏的状态变化，框架负责处理表述性状态传递。 无需再手动编写任何网络或后端代码。
Java之简单人机五子棋(一)
black_kyatu的博客
02-25 8510
继上周实现了C++控制台版的五子棋之后，这周开始学习Java，顺便花了两三天时间，做出了一直想做的图形化界面的五子棋小游戏。同时在原来C++控制台程序的基础上对AI的算法进行了一定修正，修复了一些bug，并加入了悔棋的功能 C++五子棋系列传送门： C++之简单五子棋的设计思路 C++之简单五子棋的语言设计实现 C++简单五子棋的AI设计及实现 五子棋的算法规则和类的设计在C++相关...
boardgame.io 五子棋（二）: AI 改造
1bite 的专栏
06-20 572
太长不看： 点击这里查看完整代码。 上一篇我们使用 boardgame.io + wgo.js + React 制作了一个简单的五子棋游戏，虽然引擎给我们搭配了 AI，不过 AI 实在太弱且效率不高，今天我们就自己做一个AI。 蒙特卡洛！ 通过 Debug 面板我们看到，boardgame.io 搭配的 AI 是基于蒙特卡洛的，只是它的实现因为抽象和架构的原因，效率不高且不支持神经网络评估器，我们做一个自己的蒙特卡洛。 我们的蒙特卡洛需提供如下功能： 自定义评估器。这样我们就能实现神经网络评估和随机模拟评
boardgame-server:boardgame.io 游戏的基础服务器
05-31
桌游服务器 boardgame.io 游戏的简单服务器。 添加新游戏： 创建一个新模块 在src/modules/routes.js添加一个路由。 将你的游戏添加到src/server.js
boardgame.io：回合制游戏的状态管理
02-04
boardgame.io是使用JavaScript创建回合制游戏的引擎。 编写简单的函数，描述进行特定动作时游戏状态的变化。 它会自动转换为具有在线多人游戏功能的可玩游戏，而所有这些都无需您编写一行网络或存储代码。 产品特点 状态管理：自动在客户端，服务器和存储之间无缝管理游戏状态。 多人游戏：游戏状态可实时实时跨平台同步。 AI ：可以玩游戏的自动生成的机器人。 游戏阶段：具有不同的游戏规则和每个阶段的回合顺序。 大厅：玩家配对和游戏创作。 原型：甚至在渲染游戏之前即可模拟移动的界面。 可扩展：允许创建新抽象的插件系统。 View-layer Agnostic ：使用香草JS
弈心五子棋人工智能引擎
08-19
前不久编写五子棋AI的时候在国外的网站上无意中找到的，据说是目前最牛的五子棋AI引擎，可以学习一下，扩展思路。
java代码实现网络编程实现五子棋
06-07
以下是使用Java实现网络对战五子棋的示例代码： 服务端代码： ```java import java.io.IOException; import java.net.ServerSocket; import java.net.Socket; public class Server { public static void main...
在线五子棋对弈游戏代码
最新发布
10-08
编写在线五子棋对弈游戏的代码会涉及到很多技术和组件，以下是一个简化版的大致流程和示例代码框架： 1. **服务器端**（Python + Socket/Flask）： ```python import flask from flask_socketio import SocketIO, ...
Java联机五子棋
qq_47764019的博客
12-19 2435
java联机五子棋，java局域网五子棋，java五子棋
java控制台的五子棋
weixin_43840018的博客
02-29 635
一，创建游戏的各个对象（了解相关知识） 1.棋盘类（Chessboard） 2.游戏类（Gobang） 3.棋子类（Chessman） 1.1Chessboard类 包含以下四种方法：(也是棋盘类的实现过程) 1）void initBoard():初始化出一个新的空棋盘 2）void printBoard():在控制台输出棋盘 3）void setBoard(int posX,int posY,S...
托斯卡纳：boardgame.io并回应托斯卡纳棋盘游戏城堡的实现
02-10
托斯卡纳 boardgame.io并回应托斯卡纳棋盘游戏城堡的实现
Rapfi-gomocup:A relatively strong gomoku AI 一个较强的五子棋人工智能引擎
05-09
拉菲 Rapfi是专为设计的Gomoku（连续5个）引擎。 由于Gomocup要求AI通过进行通信，因此为了舒适地使用它，您可能需要名为的兼容GUI，可以下载。 用作者的母语（中文）部分记录。 由于代码结构不适合将来的开发，因此将不再更新此版本的Rapfi。 概述 Rapfi用C ++编写，基于具有增强功能的alpha-beta算法。 此版本的Rapfi仅支持自由式规则。 它具有相对较强的演奏强度。 它在2018年Gomocup比赛中排名第四，名列前茅之间约有300埃洛差距。 游戏类型 埃洛 + -- 游戏 自由泳 2096年 37 35 1344 快速游戏 2090年 47 44 1008 修改配置 Rapfi具有内置配置，但是，如果要更改配置，则需要重新生成配置文件。 配置文件包含所有需要的信息，例如评估值，得分值，修剪余量等。由于Rapfi具有大量评估值，因此几
五子棋 HGE引擎DEMO
04-23
VC2005编译环境。 使用HGE图形引擎。算是一个小小的练习。 支持人机，双人两种模式。 感谢Haff的引擎，感谢HGEchina网站， 特别感谢 微妙的平衡 师兄的开源中文显示。
五子棋（网页版）
01-22
本游戏是使用纯javascript编写，代码100%原创，代码简洁，计算速率很快，希望大家给与评价、指点
UdaipurGame：使用boardgame.io + ReactJS构建的斋浦尔棋盘游戏的克隆
02-06
乌代浦 流行的2人纸牌游戏棋盘游戏的简约版本，具有使用和React JS构建的Online Multiplayer支持。 您可以在试用该游戏（由于当前正在以免费的dyno运行，因此加载起来可能会有点慢）。 斋浦尔on 关于游戏 斋浦尔是2人交易的纸牌游戏，您和您的对手是交易者，他们试图从市场上买卖资源来赚取最多的钱。 最初，资源出售的数量更多，而随着更多的资源在市场上出售，开始产生的收益更少。 但是，并非所有资源都具有相同的可用性和销售价格，而稀有资源具有需要一次至少出售2张卡片的附加限制。 在斋浦尔游戏中，玩家必须在尝试交易价格较高的稀有资源（例如黄金，钻石和白银）与价格较低的较丰
利用VUE+boardgame.io制作扑克游戏(序)
langhaoben的专栏
05-25 1732
序 vue+boardgame技术体系最近在偶尔翻看技术文章时发现了一个基于js的游戏状态机框架boardgame.io就仔细研究一下,发现boardgame现在只支持react框架,打算换成我更熟悉的VUE框架需要的框架vue :    前端展示及数据状态响应展示vuex:    与vue交互的状态分发插件,可以维护游戏状态及通知vue更新boardgame:    游戏状态机框架,可以控制游戏...
稀疏数组（五子棋，IO）
spades_seven的博客
09-01 242
package cn.gyk.shuzu; import java.io.File; import java.io.FileNotFoundException; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import java.io.Reader; import java.io.Writer; import java.util.ArrayList; public class Spa.
boardgame.io新手教程
world_universe的博客
09-21 259
新手教程这个新手教程介绍了如何实现井字棋游戏。通过新手教程，对boardgame.io及其依赖环境有个初步认识。
基于Java的2D mmorpg开源引擎Threerings系列之五（实战五子棋）
Thinking in Action
05-18 278
Threerings公司在其核心的三个框架(narya, nenya, vilya)之上又封装了一层toybox，构成所谓的gameGarden，使用这个gameGarden可以快速的构建属于你自己的多人在线小游戏，并且还可以上传到gameGarden的主页上http://www.gamegardens.com/，同所有人一同来分享。   更难得的是，Threerings在gameGarden...
let gameBoard = document.getElementById什么意思
06-09
这是一段 JavaScript 代码，其中 `document....在这段代码中，`let gameBoard = document.getElementById(id)` 表示将具有指定 `id` 属性的元素节点赋值给变量 `gameBoard`，以便在代码后续使用该元素节点进行操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值