文章同步发布于博客

最近每天在玩动物森友会，刷狼蛛刷樱花手册炒大头菜，愣是把休闲养生游戏玩成了硬核生存游戏。。。不过整体上还是很轻松的。

朋友给我发来一个 Animal Crossing Catch Guide 的网页，列出了游戏中南北半球鱼类和虫类动物的出现月份、时间、地点、价格等等。看了一看做得还不错，但是缺几个我比较想要的功能。正好练练手。

桌面网页端效果图：

数据

用 Python 爬了 Fandom 的 Wiki，再一通操作处理一波，整理出需要的信息。一开始写的比较急，有一些重复代码，后来数据没问题了就精简了一下，能够循环的都用循环解决了。因为爬的 Wiki 内容都是英文，没有找到一个很好的中英对照的网页，所以暂时没有加中文，只能看图识鱼虫了。

目前数据文件存储在自己的服务器上，通过 Nginx 设置跨域允许了我的 github.io 域名。由于数据量不大，加载速度也还算过得去。

前端

前端框架使用 React + Antd 编写。主要就是简单的卡片、按钮、单选组件。比较头疼的是修改 antd 组件的样式。简单的项目也不会去调整主题，就要找到对应的类、伪类等等，在 CSS 里分别设置。

目前觉得用处比较大的功能都做出来了，卡片会显示鱼类和虫类的信息，可以按照价格分类（看看哪些比较值钱），可以仅显示下月即将消失的鱼虫，提醒玩家记得抓一只捐博物馆。

后续功能还需要稍微规划一下，比如手机端屏幕较小，是不是可以仅显示最必要的那些信息，然后再查看详细信息等等。

小伙伴们有啥想法，欢迎一起交流！