/wzry

🌈基于 Vue3+TS的王者荣耀图鉴🚀

Primary LanguageTypeScript

🚀一、主要技术栈

✈️二、主要插件

🚁三、其他插件

  • basic-ssl 开发环境下https访问
  • autoprefixer + postcss 编译时自动加CSS兼容性前缀
  • vite-plugin-pwa 实现网站作为应用程序安装,从浏览器分离
  • cspell 拼写检查工具
  • eslint 代码校验工具
  • prettier 代码美化工具
  • stylelint css检验工具(主要用来css属性排序)

🏡四、模块列表

  • Zip包下载
  • 更新公告
  • 邮箱
  • 设置
  • 音效反馈
  • 音乐播放器
  • 鼠标悬浮反馈
  • 小贴士小窗
  • 个人中心
  • 任务中心
  • 皮肤、技能竞猜活动
  • 英雄列表
  • 英雄详情(包含基本信息页、关系网页、皮肤语音页、技能页)
  • 皮肤列表
  • 英雄海报、皮肤海报合集列表
  • 装备三级联动
  • 英雄夺宝
  • 皮肤夺宝
  • 道具商店、英雄碎片商店和皮肤碎片商店、王者水晶商店和荣耀水晶商店
  • 铭文列表、铭文搭配、铭文套装及套装信息
  • 背包
  • 开箱、英雄熟练度升级、英雄兑换和皮肤兑换、双倍道具卡和夺宝周卡
  • 乂宝部件个性化套装搭配及购买、部件订单列表
  • 可点击播放语音的弹幕
  • 个人数据统计
  • 召唤师卡数据合并与读取写入

✨五、项目细节

1、PWA应用

当浏览网站三分钟后会提示安装PWA应用,安装后网站将会从浏览器分离成为单独的应用程序,体验更佳

2、Zip下载

为了解决在体验时出现音效点击会因为网速问题迟迟没有播放,贴图还需要边看边加载

网站素材及游戏数据采用下载压缩包,部署在Github

下载后解压并存储在内存中,访问内存中的图片,提高网站浏览的顺畅度

如果浏览器刷新,由于缓存的原因,压缩包不会重新下载,但需要重新解压

下载的资源总共不足10MB,分包下载是为了方便更新

下载资源时按顺序依次下载,不会同时下载设计如此

下载的游戏数据存储在IndexDB

3、版本更新

版本分为网站部署版本数据版本,检测到新版会在网站下载资源之前弹出更新弹窗。

通过请求版本JSON文件获取两个版本号与本地版本号比对,如果是部署版本更新,则要求点击按钮刷新浏览器并写入版本号。

如果是数据版本更新,点击按钮后关闭弹窗删除本地指定数据库

此时进入下载阶段,下载是会判断本地是否存在指定数据来决定是否下载并解压数据

4、数据存储

用户数据加密后存储在LocalStorage,当在个人中心退卡时,会导出一个召唤师卡片文件,下次登录可凭此卡在任何设备上登录。

5、数据展示

英雄海报、皮肤海报、铭文贴图加载时,会读取本地下载的小图,加载大图时,将小图模糊,当大图加载完成后,替换为大图并去除模糊。

每一张皮肤海报包含了三种尺寸:小图(100×100,用于模糊加载)、中图(640×294,用于列表封面展示)、大图(2351×1080,用于英雄详情页全屏皮肤背景)、4K图(用于查看大图及下载原图)。

英雄列表、商城-碎片商店-英雄列表采用分页加载,皮肤列表、商城-碎片商店-英雄列表、商城-水晶商店-皮肤列表采用虚拟列表,图集列表采用瀑布流布局+分页加载,当屏幕尺寸缩小时,通过改变列表一行的个数来进行适配,虚拟列表瀑布流布局都有适配。

所有图片列表都使用了懒加载,即进入可视区后才会加载图片,但做了一个防抖,必须停留可视区250ms才会加载,不会加载快速略过的图片。

6、夺宝及开箱概率

每个普通道具的数量为2,每个稀有道具的数量为1,以这样的方式存在奖池中,每次夺宝和开箱会重新打乱奖池随机获取其中一个。

7、乂宝

跟随鼠标的3D方块,通过CSS拼接六面合成一个立方体

乂宝页的乂宝跳跃动画使用的是JSElement.animate帧动画,在进入乂宝页和购买乂宝部件装扮时调用并播放帧动画函数。

📚六、素材来源

  • 英雄头像、技能图标、图片素材——王者荣耀官网
  • 英雄语音——王者世界观体验站
  • 点击音效——游戏内录制视频、提取音频、截取音频
  • 英雄封面——对100多个英雄的海报进行裁剪获取
  • 技能信息——游戏内对每个英雄的详情页进行截图、识字、富文本编辑器对关键文字设置颜色
  • 英雄基础信息——手敲
  • 游戏装备——游戏内截图、抠图、利用深度卷积神经网络进行修复

🎉七、网站地址

Github部署的网站,需要科学上网,勉强适配手机,但为了更好地体验,推荐使用使用电脑横屏浏览。

⭐求Star⭐求Star⭐求Star⭐

🌈八、29张截图

0.png

1.png

2.png

3.png

4.png

5.png

6.png

7.png

8.png

9.png

10.png

11.png

12.png

13.png

14.png

15.png

16.png

17.png

18.png

19.png

20.png

21.png

22.png

23.png

24.png

25.png

26.png

27.png

28.png