《古劍奇譚3》千秋戲輔助工具(前端React制作)


前言

一直身在武漢,基於眾所周知的疫情原因,這個春節只能宅着。

不過其實這個春節是這些年來過得最爽的一個了。

沒有鞭炮,不用四處跑,安安心心呆在家里玩玩游戲看看書寫寫代碼,其實日子過得還是挺悠閑的。

廢話少說,這段時間買了《古劍奇譚3》,全成就拿齊了之后,就抽了點時間來分享在玩游戲的過程中自制的一個千秋戲輔助工具。

何謂千秋戲?

千秋戲是《古劍奇譚3》中的一個紙牌玩法,幾十張牌,每張牌都有自己的基礎分,這里我們默認分數一樣。

然后這些牌可以構成各種各樣的組合,從2張牌的組合到6張牌的組合不等,分數也有大小差別。

為什么要做這個工具?

因為這些組合都是根據前兩作中人物間的關系來的,對於沒有玩過前兩作的我而言一臉懵逼。

所以它的直接意義是幫助我打贏每把牌。

但是它的意義並不只是如此,它也是我的一個小嘗試:如何理清復雜的組合關系並展示給用戶。

我們在日常做業務的過程中,也會面臨一些給用戶展示各類關系的需求,比如明星間的關系、各種企業或者組織之間的關系。

之前沒做過這樣的事情,這里就想去玩一玩。

效果圖展示與一點簡單的介紹

這個輔助工具並不是修改器,實際上就是一個簡單的網頁程序,還需要自己去手動操作才行。

我們來看下下面的效果圖:

這里我們使用了Echarts的關系圖來處理,通過在左側拖動相應的牌到各個牌區,右側也會進一步推測手牌還能形成哪些組合,並通過關系圖展示出來。

而每張牌的節點大小則展現了它能形成的組合數量和權值,組合越多,節點就越大,那么就表示這張牌越重要,不論是自己形成組合還是干擾對手形成組合都很重要。

具體的玩法就不說了,這里單說一下在制作過程中的一些想法。

在展示這些關系的時候,我們不僅可以通過節點的顏色和大小,我們其實也可以通過各個線的粗細和顏色(包括鼠標hover到節點上的情況)來給用戶更直觀的展示。

總結

這里最后放上項目地址:WeCanWin

這個項目是一個花了兩天做成的小項目,基本上以完成功能為主,有一些地方有待優化,注釋也不全。

但是人太懶就懶得改了,功能沒問題用起來順暢就行。

有興趣的牌友可以玩玩看,基本大比分穩贏。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM