Vscode同款风格搭配：🌈Vscode外观定制🎨
🚀一、主要技术栈
✈️二、主要插件
- axios 网络请求库
- mitt 事件总线
- dayjs 时间处理工具
- vue-i18n 国际化
- lodash 实用工具库
- js-base64 Base64加密解密工具
- localforage IndexedDB数据存储库
- jszip Zip压缩、解压工具
- decimal.js 高精度运算工具
- pinyin-pro 中文转拼音工具
- vueuse Vue组合式API实用工具集
🚁三、其他插件
basic-ssl开发环境下https访问autoprefixer + postcss编译时自动加CSS兼容性前缀vite-plugin-pwa实现网站作为应用程序安装，从浏览器分离cspell拼写检查工具eslint代码校验工具prettier代码美化工具stylelintcss检验工具(主要用来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拼接六面合成一个立方体。
乂宝页的乂宝跳跃动画使用的是JS的Element.animate帧动画，在进入乂宝页和购买乂宝部件装扮时调用并播放帧动画函数。
📚六、素材来源
- 英雄头像、技能图标、图片素材——王者荣耀官网
- 英雄语音——王者世界观体验站
- 点击音效——游戏内录制视频、提取音频、截取音频
- 英雄封面——对
100多个英雄的海报进行裁剪获取 - 技能信息——游戏内对每个英雄的详情页进行截图、识字、富文本编辑器对关键文字设置颜色
- 英雄基础信息——手敲
- 游戏装备——游戏内截图、抠图、利用深度卷积神经网络进行修复
🎉七、网站地址
Github部署的网站，需要科学上网，勉强适配手机，但为了更好地体验，推荐使用使用电脑横屏浏览。
- 访问地址：lengyibai.github.io/wztj
- Github仓库：github.com/lengyibai/w…
⭐求Star⭐求Star⭐求Star⭐
🌈八、29张截图
👻九、工作经历
在大一下学期的时候，网页设计老师看我前端学的比较用心，挺有前途，就默默告诉一位学后端的学长，让他以后上班了，如果公司缺人的话，可以带带我。
在大二下学期，也就是2021年8月还在上课的时候，老师打电话给我们班长，问我要不要去一家公司实习，工资3k，我立马就答应了。下课回到寝室，了解公司的项目，并尝试开始写项目。
在国庆节就去签实习协议，公司只有我一个前端、还有两个测试、一个后端、一个UI。自家项目是一个商城，后面又去接了政府的地图道路管理项目和后台管理项目。
22年春节过后，公司就开始接外包项目了，在3月的时候，我也给自己立了一个王者荣耀图鉴的Vue2项目，为了统一一下自己的代码风格，将自己所学所用的东西加入这个项目，里面的一些功能兴许在以后的项目中用上。
6月毕业，转正了，但这时也种下了跳槽的种子。考虑到下一份工作可能会使用Vue3，我也开始着手学习。学有所成后开始学Typescript，因为我看某些招聘信息上出现了Typescript结合Vue3来写项目。看视频做的都是一些小案例，难以做到过目不忘，看文档也看不明白，打算直接上手，把我的这个Vue2项目转成Vue3 + Typescript积累项目经验。刚开始写类型声明，有什么类型报错解决不了的就去查，到后面发现结合实际项目去学Typescript真的超级容易。
23年春节，趁着假期，完成了王者荣耀图鉴的第一个版本，最后在这家公司以前同事的内推下，靠着这个项目免技术面进了一家游戏公司，我的期望薪资是8k，面试官看了我的项目，觉得很符合他们公司的招聘要求，给了9K的工资，负责写H5游戏。游戏没有使用什么游戏引擎，就一些用css+js动画操作的游戏。
公司也招了安卓开发和iOS开发，我们仨一起写相同UI项目，一起解决同样的问题，谁提前做好了某个功能，会跟即将开始做的交流需求和代码设计思路，有效避坑。某些效果做不出来的，也会希望做的出来那方能统一换个简洁点的效果。他俩都是三十岁左右的人，虽然年龄差这么大，但和他们一起写项目非常快乐。我们一起经历了996，经历了经常加班到凌晨一点，甚至经历过三次赶工熬通宵项目上线，没有加班工资，加班晚打车费报销，第二天可以晚到几小时，通宵加班第二天可以不用来。
干了半年，老板要求更换工作地点到迪拜去，总部就在迪拜。因为平时都是线上交流需求，不方便。去了迪拜，工资会翻三倍。但大部分人不愿意换，出国给人一种不安全的感觉，因为今年为了高薪出国被搞到缅甸、柬埔寨的新闻热搜数不胜数，让我们产生了各种疑虑，最后导致小组解散。
但我又被另一个项目组组长无缝衔接挖到他那边写PC和H5的游戏大厅及活动，虽然都是同一个老板，但这个项目组的人就比较多了，UI有好几个，还有专门负责制作贴图动画的，两个策划，好几个用COCOS做游戏，各种职位分工明确，氛围非常好。
我们每周都会有下午茶，每个月团建聚餐一次，对我来说是非常理想的公司。
干了几个月，本来已经在年底涨薪名单中，由于老板跟股东介绍产品的时候游戏客户端数据出了问题，小组又解散了。这件事只是个导火索，因为游戏客户端那边经常延误工期才经常加班，老板很不满，我们项目组长也经常谈判争取时间。解散后，按n来赔偿，其他员工嫌赔偿少，想要n+1，就跟老板闹，但老板在国外，根本拿他没办法，最后老板生气，赔偿干脆不给了。其实老板在国外，能给赔偿就不错了，能闹成这样真的不应该。最后留了几个人留下来对项目做收尾工作，我也限时返场。
今年24年春节过后，项目组长把我拉到了他的公司，打算和第一个项目组的组长重启第一个项目，自己运营，带上了我和之前的几位员工。发了第一个月的工资后，给了我们两个选择：正常发工资、按项目收益来分红。我们都选择了分红。
项目后面上线，小范围推广，用户充值量少，一直亏损，感觉推广推不起来，后端埋点上报也一直有点问题，项目最后也凉了，大家伙一分钱也没挣到，白干了三个月。
后面又说有投资人想让我们把第二个项目组的项目重启，但还是没了消息。
👾十、兴趣追溯
初二开始玩Minecraft，高中那会儿就开始通过修改json代码来美化UI，通过手机版Photoshop用阴影效果搞伪3D贴图制作Minecraft手机版材质包，发布到多玩我的世界盒子，收获了不少粉丝。
后来多玩我的世界盒子停服了，粉丝也就清空了...
到了大学，自然就看上了网页设计这门课程，整天沉迷代码，当时就开始用王者荣耀的素材设计充满动画效果的网页，参考：在校学习HTML5+CSS半学年的成果之一。
在二家公司解散后，当时网站仅仅是一个图鉴网站，没有什么新颖的地方，所以就考虑开始开发游戏夺宝这个稍微比较有难度的玩法。因为夺宝会衍生出很多功能，会加入各种道具，有道具就能兑换英雄和皮肤，有道具就有背包和商城。这个时候就会产生很多用户的体验数据，数据就通过召唤师卡片文件来存储，凭此卡可在多端读取自己的使用数据。
网站中跟随鼠标跳跃移动的方块，参考的王者荣耀的灵宝，取名为乂(yì)宝，与我网名的弋同音。其实在大学学完JavaScript(还没有系统性地学ES6，甚至还没不知道CSS预处理器)，那会儿就做过一个简易的，参考小电视跳舞演示以及小电视制作历程，也算是将我的一些想法更好的展现出来。
总的来说，写这个项目的目的：
一是为了熟悉前端的工程化、代码规范化、模块化、组件化，养成比较良好的开发习惯，并且对我这个强迫症也是一种福利。
二是为了能在未来的项目中，用上里面现成的技术，这个项目包含了一些我在公司用过的效果和功能，毕竟里面的效果和功能是测试更新了很多次的，比较深刻。
三是为了面试，虽然不喜欢背八股文，但还是得略看一下，就当查漏补缺了，八股文为辅，这个项目为主。
四是因为兴趣，做过Minecraft材质包，自然就对设计网页感兴趣，玩过王者，自然要将这个项目贯彻到底。当然，做这个项目获得的成就感可比玩游戏多得多，兴趣是最好的老师，让我学前端时没那么枯燥，成就感也是最重要的“燃料”，带给我写这个项目的动力。
PS：只要标注项目的
Github仓库地址，允许搬运文章内容。
