Skip to content

lengyibai/wzry

Repository files navigation

🚀一、主要技术栈

✈️二、主要插件

🚁三、其他插件

  • 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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published