similasyon

PE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Labirent Simülasyonu</title>
    <style>
        body {
            margin: 0;
            background-color: #111;
            color: #fff;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        #ui {
            margin-bottom: 10px;
            font-size: 16px;
            display: flex;
            gap: 20px;
        }
        canvas {
            border: 2px solid #444;
            background-color: #1a1a1a;
            cursor: none;
        }
    </style>
</head>
<body>

    <div id="ui">
        <div>Canın: <span id="lives">10</span></div>
        <div>Senin Küme Canlı: <span id="myClusterAlive">8</span>/8</div>
        <div>Toplam Küme: <span id="clusterCount">0</span></div>
        <div>Durum: <span id="status">Aktif</span></div>
    </div>

    <canvas id="simCanvas" width="800" height="600"></canvas>

    <script>
        const canvas = document.getElementById("simCanvas");
        const ctx = canvas.getContext("2d");

        // UI Elementleri
        const livesEl = document.getElementById("lives");
        const myClusterAliveEl = document.getElementById("myClusterAlive");
        const clusterCountEl = document.getElementById("clusterCount");
        const statusEl = document.getElementById("status");

        // Simülasyon Ayarları
        const CLUSTER_SIZE = 8;
        const TOTAL_CLUSTERS = 30; 
        let playerLives = 10;
        let isPlayerInvulnerable = false; 

        let mouseX = canvas.width / 2;
        let mouseY = canvas.height / 2;

        let walls = [];
        let clusters = [];
        let playerClusterId = 0;

        // Fare Takibi
        window.addEventListener("mousemove", (e) => {
            const rect = canvas.getBoundingClientRect();
            mouseX = e.clientX - rect.left;
            mouseY = e.clientY - rect.top;
        });

        // Labirent Duvarları Üretici
        function generateMaze() {
            walls = [];
            // Dış Sınırlar
            walls.push({x: 0, y: 0, w: 800, h: 10});
            walls.push({x: 0, y: 590, w: 800, h: 10});
            walls.push({x: 0, y: 0, w: 10, h: 600});
            walls.push({x: 790, y: 0, w: 10, h: 600});

            // Rastgele İç Duvarlar
            for (let i = 0; i < 15; i++) {
                walls.push({
                    x: Math.random() * 700 + 50,
                    y: Math.random() * 500 + 50,
                    w: Math.random() * 140 + 40,
                    h: 15
                });
            }
        }

        // Her küme için farklı ve belirgin renk üretici
        function getClusterColor(id) {
            const hue = (id * 137.5) % 360;
            return `hsl(${hue}, 80%, 60%)`;
        }

        // Kümeleri ve Bireyleri Başlat
        function initSimulation() {
            generateMaze();
            clusters = [];
            playerLives = 10;

            for (let c = 0; c < TOTAL_CLUSTERS; c++) {
                let clusterColor = getClusterColor(c);
                let cluster = {
                    id: c,
                    color: clusterColor,
                    members: []
                };
                
                let startX = Math.random() * 700 + 50;
                let startY = Math.random() * 500 + 50;

                for (let i = 0; i < CLUSTER_SIZE; i++) {
                    cluster.members.push({
                        x: startX + (Math.random() * 15 - 7.5),
                        y: startY + (Math.random() * 15 - 7.5),
                        vx: (Math.random() - 0.5) * 1.5,
                        vy: (Math.random() - 0.5) * 1.5,
                        lives: 10, 
                        alive: true
                    });
                }
                clusters.push(cluster);
            }
            playerClusterId = 0; 
        }

        // Çarpışma Kontrolü (AABB)
        function checkWallCollision(x, y, radius = 6) {
            for (let w of walls) {
                if (x + radius > w.x && x - radius < w.x + w.w &&
                    y + radius > w.y && y - radius < w.y + w.h) {
                    return true;
                }
            }
            return false;
        }

        // Güncelleme Döngüsü
        function update() {
            if (checkWallCollision(mouseX, mouseY, 8)) {
                if (!isPlayerInvulnerable) {
                    playerLives--;
                    isPlayerInvulnerable = true;
                    setTimeout(() => { isPlayerInvulnerable = false; }, 600); 
                }
            }

            let totalAliveClusters = 0;
            let myClusterAliveCount = 0;

            for (let cluster of clusters) {
                let clusterAliveCount = 0;
                for (let member of cluster.members) {
                    if (!member.alive) continue;

                    member.x += member.vx;
                    member.y += member.vy;

                    if (checkWallCollision(member.x, member.y, 5)) {
                        member.x -= member.vx * 2;
                        member.y -= member.vy * 2;
                        member.vx = (Math.random() - 0.5) * 2.5;
                        member.vy = (Math.random() - 0.5) * 2.5;
                        
                        member.lives--; 
                        if (member.lives <= 0) {
                            member.alive = false; 
                        }
                    }

                    if (member.alive) {
                        clusterAliveCount++;
                    }
                }

                if (cluster.id === playerClusterId) {
                    myClusterAliveCount = clusterAliveCount;
                }

                if (clusterAliveCount > 0) {
                    totalAliveClusters++;
                }
            }

            if (playerLives <= 0) {
                if (myClusterAliveCount >= 5) {
                    playerLives = 10;
                    statusEl.innerText = "Ekip Destek Verdi: Yeniden Canlandın!";
                } else {
                    statusEl.innerText = "Küme Zayıf Düştü! Bekleniyor...";
                }
            } else {
                statusEl.innerText = "Simülasyon Aktif";
            }

            if (totalAliveClusters === 0 || (myClusterAliveCount === 0 && playerLives <= 0)) {
                statusEl.innerText = "Tüm Kümeler Tükendi / Yeni Labirent Başlatılıyor...";
                setTimeout(() => {
                    initSimulation();
                }, 1500);
            }

            livesEl.innerText = playerLives;
            myClusterAliveEl.innerText = myClusterAliveCount;
            clusterCountEl.innerText = totalAliveClusters;
        }

        // Çizim Döngüsü
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = "#333";
            for (let w of walls) {
                ctx.fillRect(w.x, w.y, w.w, w.h);
            }

            for (let cluster of clusters) {
                for (let member of cluster.members) {
                    if (!member.alive) continue;

                    ctx.beginPath();
                    ctx.arc(member.x, member.y, 4, 0, Math.PI * 2);
                    ctx.fillStyle = cluster.color;
                    ctx.fill();
                    if (cluster.id === playerClusterId) {
                        ctx.lineWidth = 1.5;
                        ctx.strokeStyle = "#ffffff";
                        ctx.stroke();
                    }
                    ctx.closePath();
                }
            }

            ctx.beginPath();
            ctx.arc(mouseX, mouseY, 9, 0, Math.PI * 2);
            ctx.fillStyle = isPlayerInvulnerable ? "#e74c3c" : "#2ecc71"; 
            ctx.fill();
            ctx.lineWidth = 2;
            ctx.strokeStyle = "#fff";
            ctx.stroke();
            ctx.closePath();
        }

        // Ana Döngü
        function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

        initSimulation();
        loop();
    </script>
</body>
</html>
</body>
</html>