I. Project Introduction

Party Animals Character Classification System is an interactive display classification system for Party Animals characters based on feature classification. Implemented using HTML, CSS, and JavaScript, it can intuitively display different features of animals and supports users in adding custom animals.

II. Feature Code Explanation

The system uses number arrays to represent animal features, where each number corresponds to a specific feature:

Note: When adding new animals, please ensure the feature IDs are consistent with the table above.

III. Steps to Add New Animals

1. Update Animal Data

Open the script.js file in the project and locate the animals array. Each animal consists of the following properties:

• name: Animal name.
• features: Array of feature IDs.

Example:

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

2. Add Animal Avatar

• Add the animal avatar image to the images/ folder.
• The image filename must be consistent with the animal name property, for example 鳄鱼.png.
• Recommended image size is 100px × 100px, in PNG format.

3. Check Feature IDs

• Ensure the animal's feature IDs match the order of feature buttons on the webpage.
• If adding new features, you need to update HTML (buttons), CSS (styles), and JavaScript (matching logic) simultaneously.

IV. Quick Start

Download Project

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

Local Preview

Open the project folder and double-click the index.html file to run it.

It is recommended to use the Live Server extension for VS Code to enable real-time automatic refreshing.

V. Deploy to Server

Recommended deployment using 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;
    }
}

Restart Nginx service:

sudo systemctl restart nginx

VI. FAQ

Q1: Why are there no changes after modifying animal data?

• Please check browser cache, or use version parameters to resolve caching issues.

Q2: How to extend more features?

• Modify HTML, CSS, and JavaScript as needed to extend new feature buttons and interaction logic.