Aquarium Fish Animation

HTML

<div class="container">
        <h1>🐠 Aquarium Fish Animation 🐠</h1>
        <canvas id="aquarium" width="800" height="600"></canvas>
        <div class="instructions">
            Left-click to drop fish food. Watch the fishes chase it!
        </div>
    </div>
    <script src="aquarium.js"></script>

CSS

body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        .container {
            text-align: center;
        }
        
        h1 {
            color: white;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        
        #aquarium {
            border: 8px solid #2c3e50;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            cursor: crosshair;
            background: linear-gradient(180deg, 
                rgba(64, 164, 223, 0.8) 0%, 
                rgba(41, 128, 185, 0.9) 50%, 
                rgba(52, 73, 94, 0.95) 100%);
        }
        
        .instructions {
            color: white;
            margin-top: 15px;
            font-size: 14px;
            opacity: 0.8;
        }

JavaScript

const canvas = document.getElementById('aquarium');
const ctx = canvas.getContext('2d');

// Fish array to store all fish objects
let fishes = [];
let foods = [];

// Fish colors for variety
const fishColors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
    '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'
];

class Fish {
    constructor() {
        this.x = Math.random() * (canvas.width - 60) + 30;
        this.y = Math.random() * (canvas.height - 60) + 30;
        this.size = Math.random() * 20 + 15;
        this.color = fishColors[Math.floor(Math.random() * fishColors.length)];
        this.speedX = (Math.random() - 0.5) * 2;
        this.speedY = (Math.random() - 0.5) * 2;
        this.targetFood = null;
        this.tailOffset = 0;
        this.tailDirection = 1;
        this.angle = 0;
    }

    update() {
        // Tail animation
        this.tailOffset += this.tailDirection * 0.3;
        if (Math.abs(this.tailOffset) > 5) {
            this.tailDirection *= -1;
        }

        // Check for food
        if (foods.length > 0) {
            this.findNearestFood();
        } else {
            this.targetFood = null;
        }

        // Move towards food or swim normally
        if (this.targetFood) {
            const dx = this.targetFood.x - this.x;
            const dy = this.targetFood.y - this.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            this.angle = Math.atan2(dy, dx);
            
            if (distance > 5) {
                this.speedX = (dx / distance) * 3;
                this.speedY = (dy / distance) * 3;
            }
        } else {
            // Normal swimming behavior
            this.angle = Math.atan2(this.speedY, this.speedX);
            
            // Change direction occasionally
            if (Math.random() < 0.02) {
                this.speedX += (Math.random() - 0.5) * 0.5;
               ...