使用 ink + react 制作一个命令行的在线五子棋游戏客户端

macg0406 发布于2019-08-23 17:00 / 627人阅读

摘要：背景是在命令行中渲染系统的一个实现在上已经有看着蛮好玩因此尝试着写了一个五子棋游戏经过若干天的划水终于初见成效了先来看个演示动画太大这里放不下请移步观看需要声明的是这个客户端我已经开源在了上地址是但是这是一个在线游戏的客户端因为商业原因服务

背景

Ink 是 React 在命令行中渲染系统的一个实现, 在 GitHub 上已经有 1w+ Star. 看着蛮好玩, 因此尝试着写了一个五子棋游戏, 经过若干天的划水, 终于初见成效了!

先来看个演示动画(Gif 太大这里放不下, 请移步 GitHub 观看):

需要声明的是: 这个客户端我已经开源在了 GitHub 上, 地址是 https://github.com/acrazing/g..., 但是这是一个在线游戏的客户端, 因为商业原因, 服务端代码没有开源, 所以这篇文章主要描述 Ink + React 构建客户端的过程, 后续如果有机会的话会考虑写一篇文章来聊聊服务端的架构与思路.

如何使用

首先需要你在本地安装 node + npm, 然后使用 npm 全局安装本项目的 npm 包:

npm i -g gomoku-terminal

这个时候全存在一个命令行入口 gomoku, 其使用方法是:

$ gomoku --help
gomoku [options]

Options:
  --version  Show version number                                       [boolean]
  --api      the api host        [string] [default: "http://23.106.139.99:5001"]
  --store    the config & session store file
                                   [string] [default: "~/.gomoku-terminal.json"]
  --help     Show help                                                 [boolean]

如果只启动一个实例, 则不需要传递任何参数在命令行中直接调用即可, 但是如果要启动多个实例, 则需要传入 --store 参数, 指向不同的文件名, 来储存会话信息.

第一次启动或者 token 过期时, 会首先进入登录界面:

这个时候你需要使用方向键来控制焦点, 然后输入用户名和密码再将焦点移动到 Go 上按回车键登录, 或者不输入用户名和密码直接按 Anonymous 进行匿名登录, 目前注册接口似乎有问题, 只支持匿名登录.

登录成功后, 会跳转到房间列表页面:

这个页面会展示5个房间, 你可以使用上下键来选择一个房间进入(如果有的话), 或者点击 New 来创建一个房间并进入. 按 R 可以手动刷新房间列表.

进入房间后, 会自动跳转到房间页面:

这个时候你首先需要按 Ready 键(或者按键盘 R)来准备, 长时间未准备会被踢出, 双方均准备后游戏自动开始. 这个时候如果该你落子的话可以通过方向键来选择要落子的位置, 然后按回车落子, 长时间未落子会自动判负:

技术实现

主要有两个难点:

一个是键盘控制, 这个 ink 并没有提供一个有效的方案来进行操作, 只提供了一个 StdinContext 来暴露了标准输入, 而通过按键来控制焦点则需要自行实现, 本项目中的实现是通过一个 Focusable 组件来实现的, 具体可以查看该文件: Focusable.ts.

另一个是性能问题, Ink 的组件每一次刷新(render)都会触发一次全量渲染, 这个和 react-dom 不一样, react-dom 做了大量的优化(主要是 diff 算法与 patch update). 在绘制棋盘界面的过程中, 至少需要有255(15 * 15)个元素, 因此必须要严格控制每个 Piece 的刷新过程, 绝对不能出现一个状态变更导致所有 Piece 都渲染的情况, 因此只能通过元素局部状态来控制, 而不能通过 props.

此外, 本项目中使用 mobx 来管理状态, mobx-sync 来持久化状态到文件系统, 还实现了一个快捷键系统, 具体可以查看该文件: KeyboardReceiver.

TODO

优化性能: 目前的渲染性能实在太糟糕, 只能说是勉强能用的状态, 这个需要 ink 自身做大量的优化

优化体验: 目前只完成了基础的交互功能, 但是外观相当丑

源代码地址: https://github.com/acrazing/g...
npm 包地址: https://www.npmjs.com/package...

GPU云服务器云服务器 linux命令在线使用 php五子棋游戏源码 react使用webrtc cdn在线react

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103663.html

您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

wushuiyong 2019-08-02 16:15 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

amc 2019-08-23 17:14 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：目前预览版现在已经可以在上使用，很快就可以在上使用。版本发布月日，官博发文宣告正式发布。距离年月发布版已有一年多了。官方表示，这是系列的最后一个版本，他们将全力准备。发布时隔一年，如约而至，正式发布第一个版本。showImg(https://user-gold-cdn.xitu.io/2019/4/30/16a6c4a6f112f3d6); 【阿里云 TXD 前端月刊】- 热门前端技术快报，...

fevin 2019-05-23 17:30 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

Joonas 2019-08-29 18:45 评论0 收藏0