位置: IT常识 - 正文

【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器(实战到底究竟是什么意思啊)

编辑:rootadmin
【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器 1. 杂谈 

推荐整理分享【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器(实战到底究竟是什么意思啊),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:实战好吗,实战是什么,实战到底究竟是什么意思啊,实战到底究竟是什么意思啊,实战是什么,实战是什么,实战是什么,实战的解释,内容如对您有帮助,希望把文章链接给更多的朋友!

作为一名十多年游戏王玩家,学生时代玩的是PSP和PS2上的游戏,到毕业后使用YGOPRO同步新卡片进行联网对战,再到现在约到线下进行实体卡片游戏。有些卡片价格太贵,因此我们对于这些卡在未购买之前都会自己打印出来暂时游玩。这里不得不提国内的制卡小工具游戏王卡片生成器。

 比较遗憾的是该网站即将下线。

值得庆幸的是作者对网站的更新一直以https://github.com/kooriookami/tools-vue的形式进行保存,本篇博文也是记录博主如何一步一步实现在本地运行起开源项目的经过。 

2. 分析

一般拿到一个开源项目我们可以通过ReadMe了解到他很多相关内容,通过ReadMe可以知道该项目是一个vue开发的前后端分离项目。跟着指引步骤运行项目,非常顺利运行了项目,在本地运行会发现以下问题

3. 解决

这里要介绍杂谈中提到的ygopro,他是一款开源的由国人Fluorohydride(圆神)自制的游戏王决斗系统。在国内我们一般使用萌卡所维护的版本,因此后续的讨论我们都会以萌卡的github项目进行分析。

3.1 获取数据3.1.1 卡片明细数据

在查看萌卡的项目中的我重点关注标题为YGO的仓库,其中ygopro-database这个仓库,引起我的注意。通过查看他的ReadMe我们可以知道这个项目就是用来管理我们的卡片信息内容。

Some databases of ygopro.

They are for now just for test.

切换到dump分支可以看到通过仓库提供了databases对应数据SQL脚本,这里省下了我很多时间去寻找如何提取数据库文件的卡片数据明细。

这里说一下我在github学习开源项目的另外一个方式就是查看issue,一般在项目上遇到问题都可以在issue进行提问,我在issue中发现这样的提问请问下数据库cdb文件是从哪里获取的,在里面我知道ygo的数据库文件可以通过DataEditorX来提取数据的明细。

3.1.2  卡片插画数据

通过查看源码还有网站公告中我们可以知道ygoprodeck这个网站,他提供了图片API可以进行查看下载。

3.2 功能复现3.2.1 自建API【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器(实战到底究竟是什么意思啊)

通过chrome的开发工具,我们可以知道对应操作下会触发什么样的API请求,那剩下就是分析请求的返回内容与我们手头上的内容进行关联。得益于2.1.1获取到的SQL脚本,我们知道了我们数据收属性结构。

卡片明细表

记录了卡片各内基础信息

CREATE TABLE datas( id integer primary key, ot integer, alias integer, setcode integer, type integer, atk integer, def integer, level integer, race integer, attribute integer, category integer);

卡片描述表

记录卡片的效果信息

CREATE TABLE texts( id integer primary key, name text, desc text, str1 text, str2 text, str3 text, str4 text, str5 text, str6 text, str7 text, str8 text, str9 text, str10 text, str11 text, str12 text, str13 text, str14 text, str15 text, str16 text);

有了图片还有数据信息,只要我们构建API去读取内容即可,详细可以查看我的api项目。

3.2.2 项目本身修改修改目标API

在main.js我们可以配置数据获取api根目录

// 接口请求地址配置if (process.env.NODE_ENV === 'production') { // 上线环境 app.config.globalProperties.baseURL = 'http://127.0.0.1:8080/api';//https://tools.kooriookami.top/api} else { // 本地环境 app.config.globalProperties.baseURL = 'http://127.0.0.1:8080/api';}适配简体中文YGOPRO数据

使用自己提供的API的时候会发现当我们查看的是灵摆类的卡片的时候不能正常展示内容,我尝试分析加载数据。我们能发现在网站中加载的灵摆数据json中他们的卡片描述有【Pendulum Effect】、【Monster Effect】

{ "data": { "name": "终焉龙 混沌帝", "atk": 3000, "def": 2500, "attribute": 32, "desc": "←1 【Pendulum Effect】 1→\r\n这个卡名的灵摆效果1回合只能使用1次。\r\n①:支付1000基本分,以除外的1只自己的龙族怪兽为对象才能发动。这张卡破坏,那只怪兽加入手卡。\r\n【Monster Effect】\r\n这张卡不能通常召唤。「终焉龙 混沌帝」1回合1次在把自己墓地的光属性和暗属性的怪兽各1只除外的场合才能从手卡·额外卡组特殊召唤。\r\n①:1回合1次,把基本分支付一半才能发动。额外怪兽区域以外的自己场上的卡全部送去墓地,选最多有送去墓地的数量的对方场上的卡送去墓地。那之后,给与对方送去对方墓地的数量×300伤害。\r\n②:特殊召唤的表侧表示的这张卡从场上离开的场合回到卡组最下面。", "id": 4538826, "level": 16842760, "race": 8192, "type": 50331681 }, "message": "success", "status": 200}

再查看源码,源码也是使用【Pendulum Effect】、【Monster Effect】来数据的提取,因此要根据简体中文YGOPRO数据进行定制化修改。

export function parsePendulumScale(data) { if (parseType(data) === 'pendulum') { let list = data.desc.split('【Pendulum Effect】'); return parseInt(list[0]?.replace(/[^\d]/g, '')); } else { return 0; }}export function parsePendulumDescription(data, lang) { if (parseType(data) === 'pendulum') { let description = characterToHalf(data.desc).replace(/'''/g, '') .replace(/\r/g, '\n').replace(/(\n)\1*/g, '\n'); const list = description.split(/【Pendulum Effect】|【Monster Effect】|【Flavor Text】|【怪獸敘述】|【怪獸效果】|【怪獸描述】/).filter(item => item && item !== '\n'); if (lang === 'tc') { description = list[2]?.replace(/\d+→|\n/g, '') || ''; } else { description = list[1]?.replace(/\d+→|\n/g, '') || ''; } if (['jp', 'sc'].includes(lang)) { // 效果数字全角,卡名数字半角 description = numberToFull(description).replace(/(「.*?」)|(“.*?”)/g, s => numberToHalf(s)); } return description.trim(); } else { return ''; }}

 根据简体中文YGOPRO数据添加分割简体中文内容的字符

{ "data": { "name": "终焉龙 混沌帝", "atk": 3000, "def": 2500, "attribute": 32, "desc": "←1 【灵摆】 1→\r\n这个卡名的灵摆效果1回合只能使用1次。\r\n①:支付1000基本分,以除外的1只自己的龙族怪兽为对象才能发动。这张卡破坏,那只怪兽加入手卡。\r\n【怪兽效果】\r\n这张卡不能通常召唤。「终焉龙 混沌帝」1回合1次在把自己墓地的光属性和暗属性的怪兽各1只除外的场合才能从手卡·额外卡组特殊召唤。\r\n①:1回合1次,把基本分支付一半才能发动。额外怪兽区域以外的自己场上的卡全部送去墓地,选最多有送去墓地的数量的对方场上的卡送去墓地。那之后,给与对方送去对方墓地的数量×300伤害。\r\n②:特殊召唤的表侧表示的这张卡从场上离开的场合回到卡组最下面。", "id": 4538826, "level": 16842760, "race": 8192, "type": 50331681 }, "message": "success", "status": 200}export function parsePendulumScale(data) { if (parseType(data) === 'pendulum') { let list = data.desc.split('【灵摆】');//let list = data.desc.split('【Pendulum Effect】'); return parseInt(list[0]?.replace(/[^\d]/g, '')); } else { return 0; }}export function parsePendulumDescription(data, lang) { if (parseType(data) === 'pendulum') { let description = characterToHalf(data.desc).replace(/'''/g, '') .replace(/\r/g, '\n').replace(/(\n)\1*/g, '\n'); const list = description.split(/【Pendulum Effect】|【Monster Effect】|【灵摆】|【怪兽效果】|【Flavor Text】|【怪獸敘述】|【怪獸效果】|【怪獸描述】/).filter(item => item && item !== '\n'); if (lang === 'tc') { description = list[2]?.replace(/\d+→|\n/g, '') || ''; } else { description = list[1]?.replace(/\d+→|\n/g, '') || ''; } if (['jp', 'sc'].includes(lang)) { // 效果数字全角,卡名数字半角 description = numberToFull(description).replace(/(「.*?」)|(“.*?”)/g, s => numberToHalf(s)); } return description.trim(); } else { return ''; }}能直加载卡片原画

因为运行成本的原因ygoprodeck提供卡片原画API无法进行外链了,我们通过通告知道还是可以通过ygoprodeck提供的api下载图片,通过自选图片上传来加载卡片原画

 通过添加debugger我们定位到\src\render\views\yugioh.js代码中这段代码负责加载图片

export function parseImage(data) { debugger; return '/';}

只要我们拥有自己的图片库,通过自己构建api即可,修改如下,关于如何批量去下载图片请自行在网络上进行查询。

export function parseImage(data) { return `http://127.0.0.1:8080/images/${data.id}`;}4. 效果

5. 感想

这次网站复活是一个很典型的开源项目应用样例,跳过了开源项目的选型(关于开源项目的选型可以阅读我之前的这篇博客记开源系统落地-我是如何在工作中应用ShardingSphere-JDBC),从使用开源项目,遇到问题如何解决,到最终符合自己的使用需求。

参考:ygocore版本&服务器介绍+操作方法+实用链接

https://github.com/mycard/ygopro-database

修改后代码:GitHub - tale2009/tools-vue

对应后端API:GitHub - tale2009/KenhoYUGIOHAPI

本文链接地址:https://www.jiuchutong.com/zhishi/297648.html 转载请保留说明!

上一篇:【vue】 vue-router安装和配置方法(vue $route)

下一篇:YOLOv7改进之二十二:涨点神器——引入递归门控卷积(gnConv)(yolox改进)

  • iqoo8pro支持wifi6吗(iqoo8pro支持多少w快充)

    iqoo8pro支持wifi6吗(iqoo8pro支持多少w快充)

  • 怎么备份qq的聊天记录(怎么备份qq的聊天记录手机)

    怎么备份qq的聊天记录(怎么备份qq的聊天记录手机)

  • 苹果微信扫一扫怎么使用(苹果微信扫一扫怎么添加到桌面小组件)

    苹果微信扫一扫怎么使用(苹果微信扫一扫怎么添加到桌面小组件)

  • win11怎么投屏(win11怎么投屏到手机)

    win11怎么投屏(win11怎么投屏到手机)

  • 苹果手机微信跟随系统深色模式如何设置(苹果手机微信跟别人视频,对方听不到声音)

    苹果手机微信跟随系统深色模式如何设置(苹果手机微信跟别人视频,对方听不到声音)

  • 抖音怎么才能出现歌词(抖音怎么才能出圈)

    抖音怎么才能出现歌词(抖音怎么才能出圈)

  • 打印机不能初始化是怎么回事(打印机不能初始化是什么意思)

    打印机不能初始化是怎么回事(打印机不能初始化是什么意思)

  • 华为智慧分屏怎么用

    华为智慧分屏怎么用

  • 苹果投屏电脑画面卡顿(苹果投屏电脑操作)

    苹果投屏电脑画面卡顿(苹果投屏电脑操作)

  • 手机摔了屏幕出现裂痕(手机摔了屏幕出现彩色条纹修要花多少钱)

    手机摔了屏幕出现裂痕(手机摔了屏幕出现彩色条纹修要花多少钱)

  • qq自动回复可以针对个人吗(qq自动回复可以续火花吗)

    qq自动回复可以针对个人吗(qq自动回复可以续火花吗)

  • 电脑主板坏了能修吗(电脑主板坏了能保修吗)

    电脑主板坏了能修吗(电脑主板坏了能保修吗)

  • trt tl10a是什么型号(trt—tl10a)

    trt tl10a是什么型号(trt—tl10a)

  • ctrl+alt+z是什么快捷键(ctrl +alt+r)

    ctrl+alt+z是什么快捷键(ctrl +alt+r)

  • 座机电话打不出去是怎么回事(如何把座机电话转接到手机)

    座机电话打不出去是怎么回事(如何把座机电话转接到手机)

  • 苹果序列号g0开头什么意思(苹果序列号g0开头是哪里生产的)

    苹果序列号g0开头什么意思(苹果序列号g0开头是哪里生产的)

  • 电脑蓝屏0000007e怎么解决(电脑蓝屏0000003b什么原因)

    电脑蓝屏0000007e怎么解决(电脑蓝屏0000003b什么原因)

  • 一个人可以申请几个头条号(一个人可以申请几个支付宝号码)

    一个人可以申请几个头条号(一个人可以申请几个支付宝号码)

  • powerpoint模板的扩展名(powerpoint模板)

    powerpoint模板的扩展名(powerpoint模板)

  • 美团会员买一赠一什么意思(美团外卖会员赠送)

    美团会员买一赠一什么意思(美团外卖会员赠送)

  • 手机怎么看qq加密相册(手机怎么看qq加过的所有人)

    手机怎么看qq加密相册(手机怎么看qq加过的所有人)

  • 电视棒在淘宝叫什么(电视棒在淘宝叫什么店铺)

    电视棒在淘宝叫什么(电视棒在淘宝叫什么店铺)

  • 微信小程序占用手机内存吗(微信小程序占用存储空间怎么清理)

    微信小程序占用手机内存吗(微信小程序占用存储空间怎么清理)

  • vivos1有256g的吗(vivos1有5g功能吗)

    vivos1有256g的吗(vivos1有5g功能吗)

  • 花呗怎么付款给别人(花呗怎么付款给商家怎么付不了)

    花呗怎么付款给别人(花呗怎么付款给商家怎么付不了)

  • 硬盘转速是什么意思(硬盘的转速有什么用)

    硬盘转速是什么意思(硬盘的转速有什么用)

  • 个人所得税C表怎么填写
  • 增值税几个点怎么算
  • 运输费用的增值税税率
  • 注册资本金入账需要缴税么
  • 年初建账考虑要点有哪些
  • 税控盘必须一直插着吗
  • 项目转包是什么意思
  • 道路货物运输服务可以加计扣除吗
  • 建筑业工人工资保障
  • 研发过程中材料费计入
  • 企业收到工程款开发票要扣哪些税
  • 超过180天增票不抵扣财务还可以入账吗?
  • 施工费增值税税率是9%
  • 不适用研究开发费用税前加计扣除政策的有
  • 开手续费发票开多了怎么做账
  • 发票丢失联次
  • 跨地区经营建筑企业预缴企业所得税
  • 开发成本开发间接费用是哪类账户
  • 独生子女补贴怎么查询
  • 分红个人所得税怎么交
  • 补交以前年度个税怎么做账
  • 餐饮业现金流
  • 预提成本的会计处理
  • 苹果静音模式siri
  • 申请一般纳税人公司流程
  • php字符串变量
  • 企业所得税汇算清缴调增的项目有哪些
  • 委托代销商品的代销费用
  • 什么情形不属于经警告无效人民警察可以使用武器的情形
  • php日历如何实现
  • react组件定义
  • 个人电子发票怎么查询
  • 一联发票可以开多少钱
  • 汇总纳税企业所得税征收管理办法
  • 进项税额转出会计分录
  • 供热企业税收优惠
  • 增值税收范围
  • 蔬菜免征增值税优惠
  • ca证书收费金额是多少?
  • 公司注册资金多好还是少好
  • 事业单位收入入账
  • dedecms标签怎么用
  • 公司股东向银行货款,与私人财产有没有关系
  • 增值税不得抵扣的情形
  • 全资子公司注销的账务处理
  • 企业消费税应计入资产成本的有哪些
  • 房产税的纳税人包括
  • 电子承兑到期怎么收款
  • 委外研发费用如何界定
  • 产品因质量问题换新质保期如何计算
  • 用友反结账怎么操作
  • 企业不如实申报个税的风险
  • 公司注销应付账款要为零吗
  • 损益平准金结转
  • 结算账户分为哪几种?其用途结构如何?
  • 个人所得税专项扣除能抵多少
  • 会计的总目标是什么意思
  • 会计学主要是学什么
  • mysql innode
  • mysql 免安装版
  • centos7安装MySQL5.6
  • 控制windows外观和工作方式
  • Win10 PC RS2快速预览版14926更新与修复内容汇总
  • 在Linux系统中安装虚拟window
  • 苹果mac太卡
  • linux怎么配置vim
  • 微软推送win11
  • Metaio in Unity3d 教程--- 二. 创建自己的Application
  • node.js连接mysql的数据怎么可视化
  • nodejsapi
  • 用注册表更改用户名后无法登陆
  • jquery示例
  • python库怎么用
  • 浅析是什么意思
  • linux中安装python的工具包
  • 税务局电话客服人工服务
  • 非税收入发票盖什么章
  • 办理增值税一般纳税人所需资料
  • 请问农村自建房彩钢瓦下面修房吊什么顶好
  • 过了征期更正申报进项税可以多认证嘛
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设