《古剑奇谭3》千秋戏辅助工具（前端React制作）

前言

一直身在武汉，基于众所周知的疫情原因，这个春节只能宅着。

不过其实这个春节是这些年来过得最爽的一个了。

没有鞭炮，不用四处跑，安安心心呆在家里玩玩游戏看看书写写代码，其实日子过得还是挺悠闲的。

废话少说，这段时间买了《古剑奇谭3》，全成就拿齐了之后，就抽了点时间来分享在玩游戏的过程中自制的一个千秋戏辅助工具。

何谓千秋戏？

千秋戏是《古剑奇谭3》中的一个纸牌玩法，几十张牌，每张牌都有自己的基础分，这里我们默认分数一样。

然后这些牌可以构成各种各样的组合，从2张牌的组合到6张牌的组合不等，分数也有大小差别。

为什么要做这个工具？

因为这些组合都是根据前两作中人物间的关系来的，对于没有玩过前两作的我而言一脸懵逼。

所以它的直接意义是帮助我打赢每把牌。

但是它的意义并不只是如此，它也是我的一个小尝试：如何理清复杂的组合关系并展示给用户。

我们在日常做业务的过程中，也会面临一些给用户展示各类关系的需求，比如明星间的关系、各种企业或者组织之间的关系。

之前没做过这样的事情，这里就想去玩一玩。

效果图展示与一点简单的介绍

这个辅助工具并不是修改器，实际上就是一个简单的网页程序，还需要自己去手动操作才行。

我们来看下下面的效果图：

这里我们使用了Echarts的关系图来处理，通过在左侧拖动相应的牌到各个牌区，右侧也会进一步推测手牌还能形成哪些组合，并通过关系图展示出来。

而每张牌的节点大小则展现了它能形成的组合数量和权值，组合越多，节点就越大，那么就表示这张牌越重要，不论是自己形成组合还是干扰对手形成组合都很重要。

具体的玩法就不说了，这里单说一下在制作过程中的一些想法。

在展示这些关系的时候，我们不仅可以通过节点的颜色和大小，我们其实也可以通过各个线的粗细和颜色（包括鼠标hover到节点上的情况）来给用户更直观的展示。

总结

这里最后放上项目地址：WeCanWin。

这个项目是一个花了两天做成的小项目，基本上以完成功能为主，有一些地方有待优化，注释也不全。

但是人太懒就懒得改了，功能没问题用起来顺畅就行。

有兴趣的牌友可以玩玩看，基本大比分稳赢。