亲宝软件园·资讯

展开

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

韩子卢 人气:2

前言

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

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

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

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

何谓千秋戏?

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

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

为什么要做这个工具?

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

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

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

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

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

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

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

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

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

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

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

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

总结

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

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

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

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

加载全部内容

相关教程
猜你喜欢
用户评论