Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abyssal Guard: Coral Defender</title>
    <style>
        body { margin: 0; background: #001a33; overflow: hidden; font-family: 'Courier New', Courier, monospace; color: white; }
        canvas { display: block; background: linear-gradient(#004e92, #000428); }
        #ui { position: absolute; top: 20px; left: 20px; pointer-events: none; }
        #game-over { 
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            text-align: center; display: none; background: rgba(0,0,0,0.8); padding: 20px; border: 2px solid #00f2ff;
        }
        button { background: #00f2ff; border: none; padding: 10px 20px; cursor: pointer; font-weight: bold; }
    </style>
</head>
<body>

<div id="ui">
    <h2 id="score">Plastic Recycled: 0kg</h2>
    <div style="width: 200px; height: 20px; border: 2px solid #fff;">
        <div id="health-bar" style="width: 100%; height: 100%; background: #00ff00; transition: width 0.3s;"></div>
    </div>
    <p id="status">Reef Status: Healthy</p>
</div>

<div id="game-over">
    <h1>REEF BLEACHED</h1>
    <p id="final-score"></p>
    <button onclick="location.reload()">EVOLVE & TRY AGAIN</button>
</div>

<canvas id="gameCanvas"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const healthBar = document.getElementById('health-bar');
const scoreEl = document.getElementById('score');
const statusEl = document.getElementById('status');
const gameOverEl = document.getElementById('game-over');
const finalScoreEl = document.getElementById('final-score');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Game State
let score = 0;
let health = 100;
let gameActive = true;
const trashArray = [];
const particles = [];

// Player (The Manta Ray)
const player = {
    x: canvas.width / 2,
    y: canvas.height - 100,
    w: 60,
    h: 40,
    color: '#00f2ff'
};

// Controls
window.addEventListener('mousemove', (e) => {
    player.x = e.clientX - player.w / 2;
    player.y = e.clientY - player.h / 2;
});

class Trash {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = -50;
        this.size = Math.random() * 30 + 10;
        this.speed = Math.random() * 2 + 1 + (score / 1000); // Speeds up as you play
        this.type = Math.random() > 0.8 ? 'oil' : 'plastic';
    }

    update() {
        this.y += this.speed;
        
        // Collision with Player
        if (this.x < player.x + player.w && this.x + this.size > player.x &&
            this.y < player.y + player.h && this.y + this.size > player.y) {
            this.destroy(true);
        }

        // Hit the Reef (Bottom)
        if (this.y > canvas.height) {
            this.destroy(false);
        }
    }

    draw() {
        ctx.fillStyle = this.type === 'oil' ? '#ff4444' : '#cccccc';
        ctx.beginPath();
        if (this.type === 'oil') {
            ctx.rect(this.x, this.y, this.size, this.size * 1.5);
        } else {
            ctx.arc(this.x, this.y, this.size / 2, 0, Math.PI * 2);
        }
        ctx.fill();
    }

    destroy(saved) {
        const index = trashArray.indexOf(this);
        if (index > -1) trashArray.splice(index, 1);
        
        if (saved) {
            score += Math.floor(this.size);
            scoreEl.innerText = `Plastic Recycled: ${score}kg`;
            createExplosion(this.x, this.y, '#00f2ff');
        } else {
            health -= (this.type === 'oil' ? 15 : 5);
            updateUI();
            createExplosion(this.x, canvas.height, '#ff0000');
        }
    }
}

function createExplosion(x, y, color) {
    for (let i = 0; i < 10; i++) {
        particles.push({
            x, y, 
            vx: (Math.random() - 0.5) * 10,
            vy: (Math.random() - 0.5) * 10,
            life: 20,
            color
        });
    }
}

function updateUI() {
    healthBar.style.width = health + '%';
    if (health > 60) {
        healthBar.style.background = '#00ff00';
        statusEl.innerText = "Reef Status: Healthy";
    } else if (health > 30) {
        healthBar.style.background = '#ffff00';
        statusEl.innerText = "Reef Status: Warning - Bleaching!";
    } else {
        healthBar.style.background = '#ff0000';
        statusEl.innerText = "Reef Status: CRITICAL CONDITION";
    }

    if (health <= 0 && gameActive) {
        gameActive = false;
        gameOverEl.style.display = 'block';
        finalScoreEl.innerText = `You saved ${score}kg of the ocean.`;
    }
}

function spawnTrash() {
    if (gameActive) {
        trashArray.push(new Trash());
        setTimeout(spawnTrash, Math.max(200, 1000 - score/5));
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw Reef at bottom
    ctx.fillStyle = `rgb(${255-health*2.5}, ${health*2.5}, 150)`;
    ctx.fillRect(0, canvas.height - 20, canvas.width, 20);

    // Player
    ctx.fillStyle = player.color;
    ctx.shadowBlur = 15;
    ctx.shadowColor = "#00f2ff";
    ctx.beginPath();
    ctx.moveTo(player.x, player.y + player.h/2);
    ctx.lineTo(player.x + player.w, player.y);
    ctx.lineTo(player.x + player.w, player.y + player.h);
    ctx.closePath();
    ctx.fill();
    ctx.shadowBlur = 0;

    // Trash
    trashArray.forEach(t => {
        t.update();
        t.draw();
    });

    // Particles
    particles.forEach((p, i) => {
        p.x += p.vx;
        p.y += p.vy;
        p.life--;
        ctx.fillStyle = p.color;
        ctx.fillRect(p.x, p.y, 2, 2);
        if (p.life <= 0) particles.splice(i, 1);
    });

    if (gameActive) requestAnimationFrame(animate);
}

spawnTrash();
animate();
</script>
</body>
</html>