資訊專欄INFORMATION COLUMN
摘要：背景是在命令行中渲染系統(tǒng)的一個(gè)實(shí)現(xiàn)在上已經(jīng)有看著蠻好玩因此嘗試著寫了一個(gè)五子棋游戲經(jīng)過(guò)若干天的劃水終于初見(jiàn)成效了先來(lái)看個(gè)演示動(dòng)畫(huà)太大這里放不下請(qǐng)移步觀看需要聲明的是這個(gè)客戶端我已經(jīng)開(kāi)源在了上地址是但是這是一個(gè)在線游戲的客戶端因?yàn)樯虡I(yè)原因服務(wù)
背景
Ink 是 React 在命令行中渲染系統(tǒng)的一個(gè)實(shí)現(xiàn), 在 GitHub 上已經(jīng)有 1w+ Star. 看著蠻好玩, 因此嘗試著寫了一個(gè)五子棋游戲, 經(jīng)過(guò)若干天的劃水, 終于初見(jiàn)成效了!
先來(lái)看個(gè)演示動(dòng)畫(huà)(Gif 太大這里放不下, 請(qǐng)移步 GitHub 觀看):
需要聲明的是: 這個(gè)客戶端我已經(jīng)開(kāi)源在了 GitHub 上, 地址是 https://github.com/acrazing/g..., 但是這是一個(gè)在線游戲的客戶端, 因?yàn)樯虡I(yè)原因, 服務(wù)端代碼沒(méi)有開(kāi)源, 所以這篇文章主要描述 Ink + React 構(gòu)建客戶端的過(guò)程, 后續(xù)如果有機(jī)會(huì)的話會(huì)考慮寫一篇文章來(lái)聊聊服務(wù)端的架構(gòu)與思路.
如何使用首先需要你在本地安裝 node + npm, 然后使用 npm 全局安裝本項(xiàng)目的 npm 包:
npm i -g gomoku-terminal
這個(gè)時(shí)候全存在一個(gè)命令行入口 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]
如果只啟動(dòng)一個(gè)實(shí)例, 則不需要傳遞任何參數(shù)在命令行中直接調(diào)用即可, 但是如果要啟動(dòng)多個(gè)實(shí)例, 則需要傳入 --store 參數(shù), 指向不同的文件名, 來(lái)儲(chǔ)存會(huì)話信息.
第一次啟動(dòng)或者 token 過(guò)期時(shí), 會(huì)首先進(jìn)入登錄界面:
這個(gè)時(shí)候你需要使用方向鍵來(lái)控制焦點(diǎn), 然后輸入用戶名和密碼再將焦點(diǎn)移動(dòng)到 Go 上按回車鍵登錄, 或者不輸入用戶名和密碼直接按 Anonymous 進(jìn)行匿名登錄, 目前注冊(cè)接口似乎有問(wèn)題, 只支持匿名登錄.
登錄成功后, 會(huì)跳轉(zhuǎn)到房間列表頁(yè)面:
這個(gè)頁(yè)面會(huì)展示5個(gè)房間, 你可以使用上下鍵來(lái)選擇一個(gè)房間進(jìn)入(如果有的話), 或者點(diǎn)擊 New 來(lái)創(chuàng)建一個(gè)房間并進(jìn)入. 按 R 可以手動(dòng)刷新房間列表.
進(jìn)入房間后, 會(huì)自動(dòng)跳轉(zhuǎn)到房間頁(yè)面:
這個(gè)時(shí)候你首先需要按 Ready 鍵(或者按鍵盤 R)來(lái)準(zhǔn)備, 長(zhǎng)時(shí)間未準(zhǔn)備會(huì)被踢出, 雙方均準(zhǔn)備后游戲自動(dòng)開(kāi)始. 這個(gè)時(shí)候如果該你落子的話可以通過(guò)方向鍵來(lái)選擇要落子的位置, 然后按回車落子, 長(zhǎng)時(shí)間未落子會(huì)自動(dòng)判負(fù):
技術(shù)實(shí)現(xiàn)主要有兩個(gè)難點(diǎn):
一個(gè)是鍵盤控制, 這個(gè) ink 并沒(méi)有提供一個(gè)有效的方案來(lái)進(jìn)行操作, 只提供了一個(gè) StdinContext 來(lái)暴露了標(biāo)準(zhǔn)輸入, 而通過(guò)按鍵來(lái)控制焦點(diǎn)則需要自行實(shí)現(xiàn), 本項(xiàng)目中的實(shí)現(xiàn)是通過(guò)一個(gè) Focusable 組件來(lái)實(shí)現(xiàn)的, 具體可以查看該文件: Focusable.ts.
另一個(gè)是性能問(wèn)題, Ink 的組件每一次刷新(render)都會(huì)觸發(fā)一次全量渲染, 這個(gè)和 react-dom 不一樣, react-dom 做了大量的優(yōu)化(主要是 diff 算法與 patch update). 在繪制棋盤界面的過(guò)程中, 至少需要有255(15 * 15)個(gè)元素, 因此必須要嚴(yán)格控制每個(gè) Piece 的刷新過(guò)程, 絕對(duì)不能出現(xiàn)一個(gè)狀態(tài)變更導(dǎo)致所有 Piece 都渲染的情況, 因此只能通過(guò)元素局部狀態(tài)來(lái)控制, 而不能通過(guò) props.
此外, 本項(xiàng)目中使用 mobx 來(lái)管理狀態(tài), mobx-sync 來(lái)持久化狀態(tài)到文件系統(tǒng), 還實(shí)現(xiàn)了一個(gè)快捷鍵系統(tǒng), 具體可以查看該文件: KeyboardReceiver.
TODO優(yōu)化性能: 目前的渲染性能實(shí)在太糟糕, 只能說(shuō)是勉強(qiáng)能用的狀態(tài), 這個(gè)需要 ink 自身做大量的優(yōu)化
優(yōu)化體驗(yàn): 目前只完成了基礎(chǔ)的交互功能, 但是外觀相當(dāng)丑
源代碼地址: https://github.com/acrazing/g...
npm 包地址: https://www.npmjs.com/package...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103663.html
摘要：版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問(wèn)題，跨端推進(jìn)解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，聚焦業(yè)界新視界；前端領(lǐng)域急速發(fā)展的節(jié)奏...
摘要：版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問(wèn)題，跨端推進(jìn)解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，聚焦業(yè)界新視界；前端領(lǐng)域急速發(fā)展的節(jié)奏...
摘要：目前預(yù)覽版現(xiàn)在已經(jīng)可以在上使用，很快就可以在上使用。版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。距離年月發(fā)布版已有一年多了。官方表示，這是系列的最后一個(gè)版本，他們將全力準(zhǔn)備。發(fā)布時(shí)隔一年，如約而至，正式發(fā)布第一個(gè)版本。showImg(https://user-gold-cdn.xitu.io/2019/4/30/16a6c4a6f112f3d6); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，...
摘要：版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問(wèn)題，跨端推進(jìn)解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，聚焦業(yè)界新視界；前端領(lǐng)域急速發(fā)展的節(jié)奏...
閱讀 1478·2021-11-25 09:43
閱讀 2339·2021-09-27 13:36
閱讀 1183·2021-09-04 16:40
閱讀 2070·2019-08-30 11:12
閱讀 3395·2019-08-29 14:14
閱讀 655·2019-08-28 17:56
閱讀 1427·2019-08-26 13:50
閱讀 1331·2019-08-26 13:29
