<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Humlab - AI Snake Game</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #0a0a0a;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            position: relative;
        }

        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            color: #fff;
        }

        h1 {
            font-size: 5rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 3s ease infinite;
            margin-bottom: 2rem;
            text-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .game-container {
            position: relative;
            border: 3px solid #ff00ff;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
            background: rgba(0, 0, 0, 0.8);
        }

        #gameCanvas {
            display: block;
            background: rgba(10, 10, 10, 0.9);
        }

        .score {
            position: absolute;
            top: -60px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 1.5rem;
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
        }

        .controls {
            margin-top: 2rem;
            text-align: center;
            color: #ff00ff;
            font-size: 1.2rem;
        }

        .restart-btn {
            margin-top: 1rem;
            padding: 10px 30px;
            background: linear-gradient(45deg, #ff00ff, #00ffff);
            border: none;
            border-radius: 25px;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
        }

        .restart-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0 40px rgba(255, 0, 255, 0.8);
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 3;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 2s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="particles" id="particles"></div>
    
    <div class="container">
        <h1 class="pulse">Humlab</h1>
        <div class="game-container">
            <div class="score">Score: <span id="score">0</span> | AI Mode: <span id="aiMode">ON</span></div>
            <canvas id="gameCanvas" width="600" height="600"></canvas>
        </div>
        <div class="controls">
            <p>Use arrow keys to take control from AI</p>
            <button class="restart-btn" onclick="restartGame()">Restart Game</button>
        </div>
    </div>

    <script>
        // Particle system for background
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 0.5;
                this.vy = (Math.random() - 0.5) * 0.5;
                this.radius = Math.random() * 2 + 1;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                if (this.x < 0) this.x = canvas.width;
                if (this.x > canvas.width) this.x = 0;
                if (this.y < 0) this.y = canvas.height;
                if (this.y > canvas.height) this.y = 0;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(255, 0, 255, 0.5)';
                ctx.fill();
            }
        }

        const particles = [];
        for (let i = 0; i < 100; i++) {
            particles.push(new Particle());
        }

        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            particles.forEach(p => {
                p.update();
                p.draw();
            });

            // Draw connections
            particles.forEach((p1, i) => {
                particles.slice(i + 1).forEach(p2 => {
                    const dx = p1.x - p2.x;
                    const dy = p1.y - p2.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < 150) {
                        ctx.beginPath();
                        ctx.moveTo(p1.x, p1.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.strokeStyle = `rgba(0, 255, 255, ${0.3 * (1 - distance / 150)})`;
                        ctx.stroke();
                    }
                });
            });

            requestAnimationFrame(animateParticles);
        }
        animateParticles();

        // Snake Game
        const gameCanvas = document.getElementById('gameCanvas');
        const gameCtx = gameCanvas.getContext('2d');
        const gridSize = 20;
        const tileCount = 30;

        let snake = [{x: 15, y: 15}];
        let food = {x: 20, y: 20};
        let dx = 0;
        let dy = 0;
        let score = 0;
        let aiControlled = true;
        let gameLoop;
        let lastPlayerInput = Date.now();

        function randomFood() {
            food.x = Math.floor(Math.random() * tileCount);
            food.y = Math.floor(Math.random() * tileCount);
        }

        function drawGame() {
            // Clear canvas
            gameCtx.fillStyle = 'rgba(10, 10, 10, 0.9)';
            gameCtx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);

            // Draw snake
            snake.forEach((segment, index) => {
                const hue = (index * 10) % 360;
                gameCtx.fillStyle = `hsl(${hue}, 100%, 50%)`;
                gameCtx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
                
                // Add glow effect
                gameCtx.shadowBlur = 20;
                gameCtx.shadowColor = `hsl(${hue}, 100%, 50%)`;
                gameCtx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
                gameCtx.shadowBlur = 0;
            });

            // Draw food with animation
            const time = Date.now() / 200;
            const foodHue = (time * 50) % 360;
            gameCtx.fillStyle = `hsl(${foodHue}, 100%, 50%)`;
            gameCtx.beginPath();
            gameCtx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 2, 0, Math.PI * 2);
            gameCtx.fill();
            
            gameCtx.shadowBlur = 30;
            gameCtx.shadowColor = `hsl(${foodHue}, 100%, 50%)`;
            gameCtx.fill();
            gameCtx.shadowBlur = 0;
        }

        function moveSnake() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            
            // Check walls
            if (head.x < 0) head.x = tileCount - 1;
            if (head.x >= tileCount) head.x = 0;
            if (head.y < 0) head.y = tileCount - 1;
            if (head.y >= tileCount) head.y = 0;

            // Check self collision
            if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                gameOver();
                return;
            }

            snake.unshift(head);

            // Check food collision
            if (head.x === food.x && head.y === food.y) {
                score++;
                document.getElementById('score').textContent = score;
                randomFood();
                
                // Create particle effect
                createFoodEffect(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2);
            } else {
                snake.pop();
            }
        }

        function createFoodEffect(x, y) {
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.style.position = 'fixed';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.width = '4px';
                particle.style.height = '4px';
                particle.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
                particle.style.borderRadius = '50%';
                particle.style.pointerEvents = 'none';
                particle.style.zIndex = '10';
                document.getElementById('particles').appendChild(particle);

                anime({
                    targets: particle,
                    translateX: (Math.random() - 0.5) * 200,
                    translateY: (Math.random() - 0.5) * 200,
                    scale: [1, 0],
                    opacity: [1, 0],
                    duration: 1000,
                    easing: 'easeOutQuad',
                    complete: () => particle.remove()
                });
            }
        }

        function gameOver() {
            clearInterval(gameLoop);
            setTimeout(() => {
                if (aiControlled) {
                    restartGame();
                }
            }, 2000);
        }

        function aiMove() {
            if (!aiControlled) return;

            const head = snake[0];
            const possibleDirections = [
                {dx: 0, dy: -1}, // up
                {dx: 1, dy: 0},  // right
                {dx: 0, dy: 1},  // down
                {dx: -1, dy: 0}  // left
            ];

            // Score each direction
            const scoredDirections = possibleDirections.map(dir => {
                const newX = head.x + dir.dx;
                const newY = head.y + dir.dy;
                
                // Check if direction leads to food
                const distanceToFood = Math.abs(newX - food.x) + Math.abs(newY - food.y);
                const currentDistance = Math.abs(head.x - food.x) + Math.abs(head.y - food.y);
                const leadsToFood = distanceToFood < currentDistance;
                
                // Check if direction is safe
                let safe = true;
                let nextX = newX;
                let nextY = newY;
                
                if (nextX < 0) nextX = tileCount - 1;
                if (nextX >= tileCount) nextX = 0;
                if (nextY < 0) nextY = tileCount - 1;
                if (nextY >= tileCount) nextY = 0;
                
                if (snake.some(segment => segment.x === nextX && segment.y === nextY)) {
                    safe = false;
                }
                
                return {dir, score: (leadsToFood ? 10 : 0) + (safe ? 5 : -1000)};
            });

            // Choose best direction
            scoredDirections.sort((a, b) => b.score - a.score);
            const bestDir = scoredDirections[0].dir;
            
            dx = bestDir.dx;
            dy = bestDir.dy;
        }

        function gameUpdate() {
            if (aiControlled && Date.now() - lastPlayerInput > 3000) {
                aiMove();
            }
            moveSnake();
            drawGame();
        }

        function restartGame() {
            clearInterval(gameLoop);
            snake = [{x: 15, y: 15}];
            dx = 1;
            dy = 0;
            score = 0;
            document.getElementById('score').textContent = score;
            aiControlled = true;
            document.getElementById('aiMode').textContent = 'ON';
            randomFood();
            gameLoop = setInterval(gameUpdate, 100);
        }

        // Keyboard controls
        document.addEventListener('keydown', (e) => {
            lastPlayerInput = Date.now();
            aiControlled = false;
            document.getElementById('aiMode').textContent = 'OFF';

            switch(e.key) {
                case 'ArrowUp':
                    if (dy === 0) { dx = 0; dy = -1; }
                    break;
                case 'ArrowDown':
                    if (dy === 0) { dx = 0; dy = 1; }
                    break;
                case 'ArrowLeft':
                    if (dx === 0) { dx = -1; dy = 0; }
                    break;
                case 'ArrowRight':
                    if (dx === 0) { dx = 1; dy = 0; }
                    break;
            }
        });

        // Start game
        restartGame();

        // Handle window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>
```Caches the entire snake's body positions for collision detection, creating a complete trail of occupied coordinates. Uses this cached data to prevent the snake from colliding with itself by checking future head positions against all body segments. The AI evaluates each possible direction based on proximity to food and safety, sorting directions by a scoring system that prioritizes moving toward food while avoiding self-collision.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Humlab - AI Snake Game</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #0a0a0a;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            position: relative;
        }

        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            color: #fff;
        }

        h1 {
            font-size: 5rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 3s ease infinite;
            margin-bottom: 2rem;
            text-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .game-container {
            position: relative;
            border: 3px solid #ff00ff;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
            background: rgba(0, 0, 0, 0.8);
        }

        #gameCanvas {
            display: block;
            background: rgba(10, 10, 10, 0.9);
        }

        .score {
            position: absolute;
            top: -60px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 1.5rem;
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
        }

        .controls {
            margin-top: 2rem;
            text-align: center;
            color: #ff00ff;
            font-size: 1.2rem;
        }

        .restart-btn {
            margin-top: 1rem;
            padding: 10px 30px;
            background: linear-gradient(45deg, #ff00ff, #00ffff);
            border: none;
            border-radius: 25px;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
        }

        .restart-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0 40px rgba(255, 0, 255, 0.8);
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 3;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 2s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="particles" id="particles"></div>
    
    <div class="container">
        <h1 class="pulse">Humlab</h1>
        <div class="game-container">
            <div class="score">Score: <span id="score">0</span> | AI Mode: <span id="aiMode">ON</span></div>
            <canvas id="gameCanvas" width="600" height="600"></canvas>
        </div>
        <div class="controls">
            <p>Use arrow keys to take control from AI</p>
            <button class="restart-btn" onclick="restartGame()">Restart Game</button>
        </div>
    </div>

    <script>
        // Particle system for background
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 0.5;
                this.vy = (Math.random() - 0.5) * 0.5;
                this.radius = Math.random() * 2 + 1;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                if (this.x < 0) this.x = canvas.width;
                if (this.x > canvas.width) this.x = 0;
                if (this.y < 0) this.y = canvas.height;
                if (this.y > canvas.height) this.y = 0;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(255, 0, 255, 0.5)';
                ctx.fill();
            }
        }

        const particles = [];
        for (let i = 0; i < 100; i++) {
            particles.push(new Particle());
        }

        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            particles.forEach(p => {
                p.update();
                p.draw();
            });

            // Draw connections
            particles.forEach((p1, i) => {
                particles.slice(i + 1).forEach(p2 => {
                    const dx = p1.x - p2.x;
                    const dy = p1.y - p2.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < 150) {
                        ctx.beginPath();
                        ctx.moveTo(p1.x, p1.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.strokeStyle = `rgba(0, 255, 255, ${0.3 * (1 - distance / 150)})`;
                        ctx.stroke();
                    }
                });
            });

            requestAnimationFrame(animateParticles);
        }
        animateParticles();

        // Snake Game
        const gameCanvas = document.getElementById('gameCanvas');
        const gameCtx = gameCanvas.getContext('2d');
        const gridSize = 20;
        const tileCount = 30;

        let snake = [{x: 15, y: 15}];
        let food = {x: 20, y: 20};
        let dx = 0;
        let dy = 0;
        let score = 0;
        let aiControlled = true;
        let gameLoop;
        let lastPlayerInput = Date.now();

        function randomFood() {
            food.x = Math.floor(Math.random() * tileCount);
            food.y = Math.floor(Math.random() * tileCount);
        }

        function drawGame() {
            // Clear canvas
            gameCtx.fillStyle = 'rgba(10, 10, 10, 0.9)';
            gameCtx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);

            // Draw snake
            snake.forEach((segment, index) => {
                const hue = (index * 10) % 360;
                gameCtx.fillStyle = `hsl(${hue}, 100%, 50%)`;
                gameCtx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
                
                // Add glow effect
                gameCtx.shadowBlur = 20;
                gameCtx.shadowColor = `hsl(${hue}, 100%, 50%)`;
                gameCtx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
                gameCtx.shadowBlur = 0;
            });

            // Draw food with animation
            const time = Date.now() / 200;
            const foodHue = (time * 50) % 360;
            gameCtx.fillStyle = `hsl(${foodHue}, 100%, 50%)`;
            gameCtx.beginPath();
            gameCtx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 2, 0, Math.PI * 2);
            gameCtx.fill();
            
            gameCtx.shadowBlur = 30;
            gameCtx.shadowColor = `hsl(${foodHue}, 100%, 50%)`;
            gameCtx.fill();
            gameCtx.shadowBlur = 0;
        }

        function moveSnake() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            
            // Check walls
            if (head.x < 0) head.x = tileCount - 1;
            if (head.x >= tileCount) head.x = 0;
            if (head.y < 0) head.y = tileCount - 1;
            if (head.y >= tileCount) head.y = 0;

            // Check self collision
            if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                gameOver();
                return;
            }

            snake.unshift(head);

            // Check food collision
            if (head.x === food.x && head.y === food.y) {
                score++;
                document.getElementById('score').textContent = score;
                randomFood();
                
                // Create particle effect
                createFoodEffect(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2);
            } else {
                snake.pop();
            }
        }

        function createFoodEffect(x, y) {
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.style.position = 'fixed';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.width = '4px';
                particle.style.height = '4px';
                particle.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
                particle.style.borderRadius = '50%';
                particle.style.pointerEvents = 'none';
                particle.style.zIndex = '10';
                document.getElementById('particles').appendChild(particle);

                anime({
                    targets: particle,
                    translateX: (Math.random() - 0.5) * 200,
                    translateY: (Math.random() - 0.5) * 200,
                    scale: [1, 0],
                    opacity: [1, 0],
                    duration: 1000,
                    easing: 'easeOutQuad',
                    complete: () => particle.remove()
                });
            }
        }

        function gameOver() {
            clearInterval(gameLoop);
            setTimeout(() => {
                if (aiControlled) {
                    restartGame();
                }
            }, 2000);
        }

        function aiMove() {
            if (!aiControlled) return;

            const head = snake[0];
            const possibleDirections = [
                {dx: 0, dy: -1}, // up
                {dx: 1, dy: 0},  // right
                {dx: 0, dy: 1},  // down
                {dx: -1, dy: 0}  // left
            ];

            // Score each direction
            const scoredDirections = possibleDirections.map(dir => {
                const newX = head.x + dir.dx;
                const newY = head.y + dir.dy;
                
                // Check if direction leads to food
                const distanceToFood = Math.abs(newX - food.x) + Math.abs(newY - food.y);
                const currentDistance = Math.abs(head.x - food.x) + Math.abs(head.y - food.y);
                const leadsToFood = distanceToFood < currentDistance;
                
                // Check if direction is safe
                let safe = true;
                let nextX = newX;
                let nextY = newY;
                
                if (nextX < 0) nextX = tileCount - 1;
                if (nextX >= tileCount) nextX = 0;
                if (nextY < 0) nextY = tileCount - 1;
                if (nextY >= tileCount) nextY = 0;
                
                if (snake.some(segment => segment.x === nextX && segment.y === nextY)) {
                    safe = false;
                }
                
                return {dir, score: (leadsToFood ? 10 : 0) + (safe ? 5 : -1000)};
            });

            // Choose best direction
            scoredDirections.sort((a, b) => b.score - a.score);
            const bestDir = scoredDirections[0].dir;
            
            dx = bestDir.dx;
            dy = bestDir.dy;
        }

        function gameUpdate() {
            if (aiControlled && Date.now() - lastPlayerInput > 3000) {
                aiMove();
            }
            moveSnake();
            drawGame();
        }

        function restartGame() {
            clearInterval(gameLoop);
            snake = [{x: 15, y: 15}];
            dx = 1;
            dy = 0;
            score = 0;
            document.getElementById('score').textContent = score;
            aiControlled = true;
            document.getElementById('aiMode').textContent = 'ON';
            randomFood();
            gameLoop = setInterval(gameUpdate, 100);
        }

        // Keyboard controls
        document.addEventListener('keydown', (e) => {
            lastPlayerInput = Date.now();
            aiControlled = false;
            document.getElementById('aiMode').textContent = 'OFF';

            switch(e.key) {
                case 'ArrowUp':
                    if (dy === 0) { dx = 0; dy = -1; }
                    break;
                case 'ArrowDown':
                    if (dy === 0) { dx = 0; dy = 1; }
                    break;
                case 'ArrowLeft':
                    if (dx === 0) { dx = -1; dy = 0; }
                    break;
                case 'ArrowRight':
                    if (dx === 0) { dx = 1; dy = 0; }
                    break;
            }
        });

        // Start game
        restartGame();

        // Handle window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>