《明日方舟》前端界面复刻

最近也是迎来了五一黄金周，大家过的怎么样，还开心吗？刚好《明日方舟》公测也迎来了一周年，这里试着用网页还原了下其中几个页面，另外这篇文章的风格也是参照的这款游戏呢。

部分界面预览

演示地址

页面是有部分音效的！！！小心不要上班点出来！！！

预览地址: http://118.24.147.213/ READ MORE+

源码地址: https://github.com/viewweiwu/arknights-react READ MORE+

服务器配置有点差，访问的有点点慢。

技术选择

• react 套餐
• react-hook
• typescript
• less css 预处理
• howler 音频管理
• Live2dHelper live2d
• parallax-js 视差动效

资源数据来源

来源	数据类型	明细
明日方舟WIKI READ MORE+	图片、数据	道具列表、干员列表、干员立绘...
明日方舟官网 READ MORE+	图标、纹理、音频、音效	-
mdnice	文档、静态资源	该文档自定义 CSS

最后

本来在采购商城的页面里是有一个 live2d 的，但是因为加载资源太慢了（bug 也多），就给去掉了，换回了帅气的可露希尔。另外，如果有同学想要知道一些技术细节，可以选择直接看源码，其中一部分的，之后我也会再开文章介绍的。