使用 ink + react 制作一個命令行的在線五子棋游戲客戶端

macg0406 發布于2019-08-23 17:00 / 646人閱讀

摘要：背景是在命令行中渲染系統的一個實現在上已經有看著蠻好玩因此嘗試著寫了一個五子棋游戲經過若干天的劃水終于初見成效了先來看個演示動畫太大這里放不下請移步觀看需要聲明的是這個客戶端我已經開源在了上地址是但是這是一個在線游戲的客戶端因為商業原因服務

背景

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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