文章同步发布于博客

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

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

桌面网页端效果图:
效果图

网址: https://lihaobhsfer.github.io/my-animal-crossing-catching-guide/

Repo: https://github.com/lihaobhsfer/my-animal-crossing-catching-guide

数据

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

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

前端

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

功能/信息

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

  • [x]卡片
    • [ ]详细/简略信息
  • [ ]完整卡片和列表
  • [x]当月
    • [x]本月新出现
    • [x]下月即将消失
  • [x]按月份筛选
  • [x]按南北半球/鱼虫筛选
  • [x]按价格排序

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

小伙伴们有啥想法,欢迎一起交流!