一、项目介绍

猛兽派对动物特征分类系统是一个基于特征分类的猛兽派对动物互动展示分类系统，通过 HTML、CSS 和 JavaScript 实现，能够直观地展示动物的不同特征，并支持用户新增自定义动物。

二、特征编号说明

系统使用数字数组表示动物的特征，每个数字对应具体特征：

注意：新增动物时，请确保特征编号与上述表格保持一致。

三、新增动物步骤

1. 更新动物数据

打开项目中的 script.js 文件，找到 animals 数组，每个动物由以下属性组成：

• name：动物名称。
• features：特征编号数组。

示例如下：

const animals = [
    { name: '鳄鱼', features: [0, 2, 3, 8] }
];

2. 添加动物头像

• 在 images/ 文件夹内添加动物头像图片。
• 图片文件名与动物 name 属性一致，例如 鳄鱼.png。
• 图片建议尺寸为 100px × 100px，格式为 PNG。

3. 检查特征编号

• 确保动物的特征编号与网页上的特征按钮顺序一致。
• 如新增特征，需同时更新 HTML（按钮）、CSS（样式）和 JavaScript（匹配逻辑）。

四、快速开始

下载项目

git clone https://github.com/gufei233/partyanimals.git

本地预览

打开项目文件夹，双击运行 index.html 文件即可。

推荐使用 VS Code 的 Live Server 插件，实现实时自动刷新。

五、部署到服务器

推荐使用 Nginx 部署：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /var/www/partyanimals;
        index index.html;
    }

    location ~* \.(js|css)$ {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires 0;
    }
}

重启 Nginx 服务：

sudo systemctl restart nginx

六、常见问题

Q1：为何修改动物数据后无变化？

• 请检查浏览器缓存，或使用版本号参数解决缓存问题。

Q2：如何扩展更多特征？

• 按需修改 HTML、CSS 和 JavaScript，以扩展新的特征按钮与交互逻辑。