特效炸裂：Vue3＋TypeScript 實現王者榮耀圖鑑，已開源！！！

主要技術棧

• Vue3.4

• Typescript

• Vite4

• Pinia

• Vue-Router

• Less

主要插件

• 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 包下載

• ✅ 更新公告

• ✅ 郵箱

• ✅ 設置

• ✅ 音效反饋

• ✅ 音樂播放器

• ✅ 鼠標懸浮反饋

• ✅ 小貼士小窗

• ✅ 個人中心

• ✅ 任務中心

• ✅ 皮膚、技能競猜活動

• ✅ 英雄列表

• ✅ 英雄詳情 (包含基本信息頁、關係網頁、皮膚語音頁、技能頁)

• ✅ 皮膚列表

• ✅ 英雄海報、皮膚海報合集列表

• ✅ 裝備三級聯動

• ✅ 英雄奪寶

• ✅ 皮膚奪寶

• ✅ 道具商店、英雄碎片商店和皮膚碎片商店、王者水晶商店和榮耀水晶商店

• ✅ 銘文列表、銘文搭配、銘文套裝及套裝信息 揹包

• ✅ 開箱、英雄熟練度升級、英雄兌換和皮膚兌換、雙倍道具卡和奪寶周卡

• ✅ 乂寶部件個性化套裝搭配及購買、部件訂單列表 可點擊播放語音的彈幕

• ✅ 個人數據統計

• ✅ 召喚師卡數據合併與讀取寫入

項目細節

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 部署的網站，需要 tz，暫未完全適配手機，部分頁面會顯示不全，不建議使用手機瀏覽。

• 在線訪問地址：https://lengyibai.github.io/wztj

• Github 源碼地址：https://github.com/lengyibai/wzry

作者：冷弋白 | 來源：稀土掘金

鏈接：https://juejin.cn/post/7373937820177940518

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/zcL5I2BFYw8w4JzDeKlk9w