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

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

部分界面预览

演示地址

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

预览地址: 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 也多),就给去掉了,换回了帅气的可露希尔。另外,如果有同学想要知道一些技术细节,可以选择直接看源码,其中一部分的,之后我也会再开文章介绍的。

你可能感兴趣的:(前端,react.js,typescript,animation,html5)