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
代码美化工具stylelint
css检验工具(主要用来css属性排序)
- Zip包下载
- 更新公告
- 邮箱
- 设置
- 音效反馈
- 音乐播放器
- 鼠标悬浮反馈
- 小贴士小窗
- 个人中心
- 任务中心
- 皮肤、技能竞猜活动
- 英雄列表
- 英雄详情(包含基本信息页、关系网页、皮肤语音页、技能页)
- 皮肤列表
- 英雄海报、皮肤海报合集列表
- 装备三级联动
- 英雄夺宝
- 皮肤夺宝
- 道具商店、英雄碎片商店和皮肤碎片商店、王者水晶商店和荣耀水晶商店
- 铭文列表、铭文搭配、铭文套装及套装信息
- 背包
- 开箱、英雄熟练度升级、英雄兑换和皮肤兑换、双倍道具卡和夺宝周卡
- 乂宝部件个性化套装搭配及购买、部件订单列表
- 可点击播放语音的弹幕
- 个人数据统计
- 召唤师卡数据合并与读取写入
当浏览网站三分钟后
会提示安装PWA
应用,安装后网站将会从浏览器分离
成为单独的应用程序,体验更佳
。
为了解决在体验时出现音效点击会因为网速问题
迟迟没有播放,贴图还需要边看边加载
。
网站素材及游戏数据采用下载压缩包
,部署在Github
。
下载后解压
并存储在内存中,访问内存中的图片,提高网站浏览的顺畅度
。
如果浏览器刷新,由于缓存
的原因,压缩包不会重新下载
,但需要重新解压
。
下载的资源总共不足10MB
,分包下载是为了方便更新
。
下载资源时按顺序依次下载
,不会同时下载
,设计如此
。
下载的游戏数据存储在IndexDB
。
版本分为网站部署版本
和数据版本
,检测到新版会在网站下载资源之前弹出更新弹窗。
通过请求版本JSON文件
获取两个版本号与本地版本号比对
,如果是部署版本更新,则要求点击按钮刷新浏览器
并写入版本号。
如果是数据版本更新,点击按钮后关闭弹窗
并删除本地指定数据库
。
此时进入下载阶段
,下载是会判断本地是否存在指定数据来决定是否下载并解压数据
。
用户数据加密后存储在LocalStorage
,当在个人中心退卡
时,会导出一个召唤师卡片文件
,下次登录可凭此卡在任何设备上登录。
英雄海报、皮肤海报、铭文贴图加载时,会读取本地
下载的小图,加载大图时,将小图模糊,当大图加载完成后,替换为大图并去除模糊。
每一张皮肤海报包含了三种尺寸:小图(100×100,用于模糊加载
)、中图(640×294,用于列表封面展示
)、大图(2351×1080,用于英雄详情页全屏皮肤背景
)、4K图(用于查看大图及下载原图
)。
英雄列表、商城-碎片商店-英雄列表采用分页加载
,皮肤列表、商城-碎片商店-英雄列表、商城-水晶商店-皮肤列表采用虚拟列表
,图集列表采用瀑布流布局
+分页加载
,当屏幕尺寸缩小时,通过改变列表一行的个数来进行适配,虚拟列表
和瀑布流布局
都有适配。
所有图片列表都使用了懒加载
,即进入可视区
后才会加载图片,但做了一个防抖
,必须停留可视区250ms
才会加载,不会加载快速略过
的图片。
每个普通道具的数量为2
,每个稀有道具的数量为1
,以这样的方式存在奖池
中,每次夺宝和开箱会重新打乱奖池
并随机获取
其中一个。
跟随鼠标的3D
方块,通过CSS
拼接六面合成一个立方体
。
乂宝页的乂宝
跳跃动画使用的是JS
的Element.animate
帧动画,在进入乂宝页
和购买乂宝
部件装扮时调用并播放帧动画函数。
- 英雄头像、技能图标、图片素材——王者荣耀官网
- 英雄语音——王者世界观体验站
- 点击音效——游戏内录制视频、提取音频、截取音频
- 英雄封面——对
100
多个英雄的海报进行裁剪获取 - 技能信息——游戏内对每个英雄的详情页进行截图、识字、富文本编辑器对关键文字设置颜色
- 英雄基础信息——手敲
- 游戏装备——游戏内截图、抠图、利用深度卷积神经网络进行修复
Github部署的网站,需要科学上网,勉强适配手机,但为了更好地体验,推荐使用使用电脑横屏浏览。
⭐求Star⭐求Star⭐求Star⭐
当时进了一家除了后端全是实习生的4个人的小公司实习,刚开始比较闲,回家也是打王者,闲着无聊就用Vue2
做王者图鉴
这个项目。这家公司写后台管理系统,以及地图,项目过于陈旧,老板审美略低,后面项目写起来太枯燥,同时维护4个项目,还有甲方的需求和BUG交织,作为实习生实在顶不住,迫于压力,选择离职,隔了一个月打电话让我写完剩下的功能,新来的实习生写不动,我没答应,最后离职当月的工资也没发。
毕业后工作不好找,BOSS直聘
找了两个月,一次面试都没有,最后退租回家专心写我的项目,给这个项目开发更多的功能。失业了半年,项目也差不多完成了一个版本,最后在以前同事的内推下,靠这项目免技术面进了一家游戏公司,负责写H5
游戏(没有使用Canvas
)。
干了半年,由于要更换工作地点,大部分人不愿意换,导致小组解散。
但我又被另一个项目组组长挖到他那边写PC和H5的游戏大厅及活动。
干了几个月,本来已经在年底涨薪名单中,由于老板跟客户介绍产品的时候游戏客户端数据出了问题,小组又解散了。其他员工嫌赔偿少,跟老板闹,老板在国外,最后赔偿老板直接不给了,赔偿也没办法拿到。
第一个小组的组长打算重启第一个项目自己运营,又把我拉上了,远程办公,偶尔聚在一起对接需求。发了第一个月的工资后,发不起工资,打算按项目收益来分红,由于推广推不起来,用户充值量少,而且后端数据上报问题一直解决不了,项目在这个月也凉了,大家伙一分钱也没挣到,白干了两三个月。
初二开始玩Minecraft
,高中那会儿就开始通过修改json
代码来美化UI
,通过手机版Photoshop
用阴影效果搞伪3D贴图制作Minecraft
手机版材质包,发布到多玩我的世界盒子,收获了不少粉丝。
后来多玩我的世界盒子停服了,粉丝也就清空了...
到了大学,自然就看上了网页设计这门课程,整天沉迷代码,当时就开始用王者荣耀的素材设计充满动画效果的网页,参考:在校学习HTML5+CSS半学年的成果之一。
王者图鉴是在2022年3月
使用Vue2
搭建的,一开始是为了统一自己的代码风格,在未来能够按照这个风格来写项目,项目里面的一些功能兴许也能在以后的项目中用上。从第一家公司离职后,就开始学习Vue3
,学有所成后开始学习Typescript
,看视频做的都是一些小案例,难以做到过目不忘,看文档也看不明白,打算直接上手,把我这个Vue2
项目转成Vue3+TS
。刚开始写类型声明,有什么类型报错解决不了的就去查,到后面发现结合实际项目去学Typescript
真的超级容易,最后就靠这个项目进了第二家公司。
进了公司之后,因为兴趣,在业余时间继续维护这个项目,再加上自己也只玩王者荣耀,并且游戏官网素材也很丰富,对它的数据很熟悉,能很好地管理。
第二家公司解散后,当时网站仅仅是一个图鉴网站,没有什么新颖的地方,所以就考虑开始开发游戏夺宝这个稍微比较有难度的玩法。因为夺宝会衍生出很多功能,会加入各种道具,有道具就能兑换英雄和皮肤,有道具就有背包和商城。这个时候就会产生很多用户的体验数据,数据就通过召唤师卡片文件
来存储,凭此卡可在多端读取
自己的使用数据。
网站中跟随鼠标跳跃移动的方块
,参考的王者荣耀的灵宝
,取名为乂(yì)宝
,与我网名的弋
同音。其实在大学学完JavaScript
(还没有系统性地学ES6
,甚至还没不知道CSS预处理器
),那会儿就做过一个简易的,参考小电视跳舞演示以及小电视制作历程,也算是将我的一些想法更好的展现出来。
总的来说,写这个项目的目的:
一是为了熟悉前端的工程化、代码规范化、模块化、组件化,养成比较良好的开发习惯,并且对我这个强迫症也是一种福利。
二是为了能在未来的项目中,用上里面现成的技术,这个项目包含了一些我在公司用过的效果和功能,毕竟里面的效果和功能是测试更新了很多次的,比较深刻。
三是为了面试,虽然不喜欢背八股文,但还是得略看一下,就当查漏补缺了,八股文为辅,这个项目为主。
四是因为兴趣,做过Minecraft
材质包,自然就对设计网页感兴趣,玩过王者,自然要将这个项目贯彻到底。当然,做这个项目获得的成就感可比玩游戏多得多,兴趣是最好的老师,让我学前端时没那么枯燥,成就感也是最重要的“燃料”,带给我写这个项目的动力。
PS:只要
标注作者
及Github
地址,允许搬运
文章内容。