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


    前言

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

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

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

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

    何谓千秋戏?

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

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

    为什么要做这个工具?

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

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

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

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

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

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

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

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

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

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

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

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

    总结

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

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

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

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

  • 相关阅读:
    阅读第十到十二章有感
    程序测试学习之5.2作业
    作业五——封装
    作业4 阅读《构建之法》第6 第7章有感
    汉堡包~~~
    作业3 阅读《构建之法》1-5章
    结对子实验——小学生四则运算
    小学生四则运算程序
    学会提问(转)
    error of “omission” and “commission”
  • 原文地址:https://www.cnblogs.com/vvjiang/p/12328971.html
Copyright © 2020-2023  润新知