Interactive Aquarium

HTML

<div class="instructions">
        <h1>šŸ  Interactive Aquarium šŸ </h1>
        <p>Click anywhere in the aquarium to drop food for the fish!</p>
        <p>Watch as the fish swim gracefully and chase after their meals.</p>
    </div>
    
    <div class="aquarium-container">
        <canvas id="aquariumCanvas" width="800" height="600"></canvas>
        <div class="water-overlay"></div>
        <div class="fish-count" id="fishCount">Fish: 0</div>
    </div>

CSS

body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        .aquarium-container {
            position: relative;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            background: linear-gradient(to bottom, 
                rgba(135, 206, 235, 0.8) 0%,
                rgba(70, 130, 180, 0.9) 30%,
                rgba(25, 25, 112, 0.95) 70%,
                rgba(0, 0, 139, 1) 100%);
        }

        #aquariumCanvas {
            display: block;
            cursor: crosshair;
            background: transparent;
        }

        .water-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: linear-gradient(to bottom, 
                rgba(255, 255, 255, 0.1) 0%,
                transparent 100%);
            pointer-events: none;
        }

        .instructions {
            color: white;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            background: rgba(0, 0, 0, 0.3);
            padding: 15px 30px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }

        .fish-count {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            background: rgba(0, 0, 0, 0.4);
            padding: 5px 10px;
            border-radius: 5px;
            backdrop-filter: blur(3px);
        }

JavaScript

class FoodParticle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.radius = 3;
                this.color = '#8B4513';
                this.alpha = 1.0;
                this.sinking = true;
                this.sinkSpeed = 0.5 + Math.random() * 0.5;
            }

            update() {
                if (this.sinking && this.y < 550) {
                    this.y += this.sinkSpeed;
                } else {
                    this.sinking = false;
                }
                
                // Gentle bobbing motion
                this.x += Math.sin(Date.now() * 0.001 + this.y * 0.01) * 0.1;
            }

            draw(ctx) {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fill();
                
                // Add sparkle effect
                ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
                ctx.beginPath();
                ctx.arc(this.x - 1, this.y - 1, 1, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }

            getBounds() {
                return {
                    left: this.x - this.radius,
                    right: this.x + this.radius,
                    top: this.y - this.radius,
                    bottom: this.y + this.radius
                };
            }
        }

        class Fish {
            constructor(x, y, type) {
                this.x = x;
                this.y = y;
                this.type = type;
                this.velocityX = (Math.random() - 0.5) * 2;
                this.velocityY = (Math.random() - 0.5) * 1;
                this.baseSpeed = 1 + Math.random() * 1.5;
                this.targetFood = null;
                this.size =...