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

背景

Ink 是 React 在命令行中衬着体系的一个完成, 在 GitHub 上已有 1w+ Star. 看着蛮好玩, 因而尝试着写了一个五子棋游戏, 经由多少天的划水, 终究初见成效了!

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

需要声明的是: 这个客户端我已开源在了 GitHub 上, 地点是 https://github.com/acrazing/g&＃8230;, 然则这是一个在线游戏的客户端, 由于贸易缘由, 服务端代码没有开源, 所以这篇文章重要形貌 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&＃8230;
npm 包地点: https://www.npmjs.com/package&＃8230;