东方非想天则 ～ 超弩级ギニョルの谜を追え web tsk

东方。作为一个过气的车万。已经蹦跶不出多少活力了。更别提th12.3东方非想天则了。作为入坑较晚的人。回顾过去十年则的发展。真是感慨万千。总想着能以自己的能力为则来做点儿什么。嗯。于是就是在线tsk数据分析了。tsk嘛。是记录则战绩的软件。不知道请@钢琴男。

在线预览：Demo
github

更新历史

2018-12-01

1、模仿游戏标题样式制作了个标题。

2、增加表格排序功能。

3、canvas增加datazoom实现大数据量情况下优雅展示。

4、增加查看当天对战人和对战胜率。

5、添加了个动态背景可把玩。

2018-11-30

1、拖拽或上传db文件或样例完成解析。

2、综合符卡、角色胜率计算。

3、可选择符卡、角色、对手符卡、对手角色进行筛选、统计和可视化。

前情提要

从五月末放弃魂斗罗之后。出现了史无前例的游戏荒。炉石不玩了。switch吃灰中。想想居然没什么好玩的了。于是开始找自己以前玩的单机游戏。筛选到东方的时候。玩起了东方绯想天。感觉还是挺不错的。忽而转向了旁边的东方非想天则。以前尝试过。但是剧情模式不好玩。不如绯想天华丽。可是。。。抱着不如试试的态度。一去不复返。

可通过下文初探该游戏。

《东方非想天则》兴衰史

心路历程

入坑伊始

电脑、好友对战、神AI。。。

初入则吧

我向来都是只看不说的。于是发现许多人加了QQ群。其中提到的最多的一个名字就是。《天则局》

浅尝辄止

说浅尝不合适。在天则居呆了很久也是。因为有时候扔IP没有人理。于是想多加点儿群多仍点儿IP。就这样加入了《贴吧群》。

tsk

则是没有战绩统计的。但是有录像记录。不过录像名字内容看不出胜利与否。于是找到了通用的记录工具tsk。至于上传tenco评测相对。那是用不到滴。

我要做记录！

十月初用tsk。感觉挺好用。可是除了显示胜率和胜场。什么功能也没有了。感觉很难受。于是萌生了想自己做tsk展示的想法。就在今天。！

制作过程

数据文件

tsk的数据文件存储在tsk的目录下。以.db文件存储。可用sqlite打开查看。里面分别记录了时间戳、1p名字、1p角色、1p胜场、2p名字、2p角色、2p胜场。有了这些数据。应该可以做出来一些分析了吧？大概。

技术选型

技术选型这里我想了试了很多。原本想用election做一个程序。但问题是很多则的小软件都销声匿迹。原因之一就是因为都需要下载。如果做成在线的多么的方便。那就决定是你了。做个网页。！

解析db文件

首先db文件不属于正常可解析格式。因此就需要转换为二进制操作再转换为js可识别的数据。这一步嘛。不需要自己动手。只是。。。一般db文件最多也就几百K。解析库居然有2.5M。还很难减少体积。简直是丧心病狂。

获取db文件

获取分为两部分。一部分是用户上传。这一步可以通过input获取。顺手也做个拖拽上传。使用ondrag事件。还是蛮简单的。

/* 点击上传 */
input.addEventListener('change',function(e){
    let file = this.files[0]
    formatFile(file)
},false)

/* 拖拽上传 */
box.addEventListener('dragover',function(e){
    e.preventDefault()
},false)
box.addEventListener('drop',function(e){
    e.preventDefault()
    let file = e.dataTransfer.files[0]
    formatFile(file)
    return false
},false)

/* 处理文件*/
function formatFile(file){
    file.suffixType = file.name.match(/.+\.(.*)/)[1].toLowerCase()
    if ( file.suffixType !== 'db' ){
        /* error */
        return false;
    }
    let fr = new FileReader();
    fr.onload = function () {
        /* success */
    }
    fr.readAsArrayBuffer(file)
}

还有案例。就是去请求一个我自己的db文件做案例。用ajax库就有些捉襟见肘了。用原生的吧。

let xhr = new XMLHttpRequest();
xhr.open('GET','./json/Default.db', true);
xhr.responseType = 'arraybuffer'; //二进制格式获取文件
xhr.onload = function(e) {
    /* success 因为简单。没必要判定状态 */
};
xhr.send();

数据整合

我一直在思考一个问题。因为对战场次是一个庞大的数字。因此db文件一般至少也有几千行。虽然这点儿数据量还不足以影响太大性能。但是。是一次循环计算出所有可能用到的数据好。还是一次循环先计算出需要的数据。之后到需要再次循环好呢？这是个问题。

我选择的折中。js的对象是引用而不是深拷贝。挺好。不过我还是更进一步的只记录下标。大概会提升一些性能吧。大概。

用户筛选

理论上数据库各个键位都应该支持检索筛选条件。不过时间筛选还没有做。目前支持1p名称、1P角色、2P名称、2P角色四个纬度筛选。

数据展示

展示。其实就是折线图了。没啥好说的。数据量太大的时候应该加上时间轴或时间段的展示的。不过嘛。以后以后。完善。

结案

打则世界悲哀。（其实tsk现在都没人用了。这个tsk web更不必说了。归根结底。还是辣鸡游戏不行了呀。毕竟十年了。。。）