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

背景

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...