Animal Battle Stats

Animal Battle Stats, compare & analyze.

Comment

Animal Battle Stats

Interactive Fighting Game-Style Animal Statistics Webapp

Live Demo License Animals

A cutting-edge web application that presents scientifically accurate animal statistics in an engaging fighting game-style interface. Compare stats, view animals in a character select screen, and pit them against each other in VS battles!

Live Demo

Click here to view the live site: https://raminoodle733.github.io/animal-battle-stats/

Features

Fighting Game Interface

  • Character Select Screen: Stats view with centered character display and flanking stat panels
  • VS Battle Mode: Compare two fighters head-to-head with dramatic VS badge
  • Transparent PNG Images: All 123 animals feature clean, background-free images
  • Responsive Design: Optimized for desktop, tablet, and mobile devices
  • Glowing Effects: Cyan and gold accents with pulsing animations
  • Scrollable Character Grid: Quick access to all animals at the bottom

Comprehensive Stats

  • 123 Animals: From African Elephants to Sea Otters
  • Combat Stats: Attack, Defense, Agility, Stamina, Intelligence, Special Attack
  • Deep Substats: Detailed breakdown including Raw Power, Armor, Speed, Tactics, and more
  • Scientific Data: Weight, speed, lifespan, bite force, and more
  • Special Abilities: Unique attacks and traits for each animal
  • Class System: Apex Predators, Tanks, Speed Demons, and more

Interactive Features

  • Stats Mode: View detailed stats for any animal with centered character display
  • Compare Mode: Select two fighters for head-to-head comparison
  • Stat Visualization: Gradient-filled bars with dynamic colors based on values
  • Fight Simulation: Simulate battles between animals with calculated outcomes
  • Smooth Animations: Floating character models and pulsing effects

Quick Start

Option 1: Live Demo

Visit the live demo directly in your browser.

Option 2: Local Setup

# Clone the repository
git clone https://github.com/RamiNoodle733/animal-battle-stats.git

# Navigate to the project
cd animal-battle-stats

# Open index.html in your browser
# Or use a simple server:
python -m http.server 8000

Project Structure

animal-battle-stats/
 index.html          # Main HTML structure
 styles.css          # Fighting game aesthetic styles
 script.js           # Interactive functionality
 animal_stats.json   # Complete animal database
 favicon.svg         # Site icon
 images/             # Animal images folder
 README.md           # This file
 LICENSE             # MIT License
 DEPLOYMENT.md       # GitHub Pages deployment guide

Design Philosophy

The interface is inspired by classic fighting games like Street Fighter and Mortal Kombat:

  • Character select screen layout for Stats view
  • VS battle screen for Compare mode
  • Centered character models with flanking stat panels
  • Dramatic colors: Cyan (#00d4ff) and orange (#ff6b00) with gold accents
  • Glowing effects and pulsing animations
  • Bebas Neue font for that fighting game feel

Technologies

  • Pure HTML5/CSS3/JavaScript - No frameworks, no dependencies
  • Font Awesome 6.4.0 - Icons for stats
  • Google Fonts - Bebas Neue and Inter fonts
  • JSON - Animal data storage
  • GitHub Pages - Free hosting

License

This project is licensed under the MIT License - see the LICENSE file for details.

Share this project:

Updates