<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shape Shooter Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #2c3e50;
            user-select: none;
        }

        #gameContainer {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #34495e;
        }

        #world {
            position: absolute;
            width: 4000px;
            height: 4000px;
            background: #ecf0f1;
            transform-origin: center center;
        }

        .circle {
            width: 100px;
            height: 100px;
            background: #2980b9;
            border-radius: 50%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            border: 3px solid #1abc9c;
        }

        .gun {
            position: fixed;
            z-index: 2;
        }

        .settings-panel {
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 8px;
            z-index: 4;
        }

        .settings-panel label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 14px;
        }

        .hp-bar, .player-hp-bar {
            position: absolute;
            width: 60px;
            height: 8px;
            background: #ddd;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 4px;
            overflow: hidden;
        }

        .hp-fill, .player-hp-fill {
            height: 100%;
            background: #e74c3c;
            transition: width 0.2s;
        }

        .hp-fill.green {
            background: #2ecc71;
        }

        .player-hp-bar {
            position: fixed;
            top: 10px;
            right: 10px;
            width: 150px;
            height: 20px;
        }

        .player-hp-fill {
            width: 100%;
            background: #2ecc71;
        }

        .shape {
            position: absolute;
            pointer-events: none;
        }

        .bullet {
            position: fixed;
            background: #e67e22;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }

        #scoreBoard {
            position: fixed;
            top: 40px;
            left: 10px;
            color: #2c3e50;
            font-size: 16px;
            z-index: 4;
        }

        #minimap {
            position: fixed;
            bottom: 10px;
            left: 10px;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.7);
            border: 2px solid #1abc9c;
            border-radius: 8px;
            z-index: 4;
            overflow: hidden;
        }

        #minimapWorld {
            position: absolute;
            width: 4000px;
            height: 4000px;
            background: #ecf0f1;
        }

        #minimapPlayer {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #e74c3c;
            border-radius: 50%;
            border: 2px solid #2c3e50;
        }

        .particle {
            position: fixed;
            width: 4px;
            height: 4px;
            background: #f1c40f;
            border-radius: 50%;
            pointer-events: none;
            z-index: 5;
            animation: fadeOut 0.5s forwards;
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        /* Pause Overlay */
        #pauseOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(44, 62, 80, 0.8);
            color: #ecf0f1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            z-index: 10;
            display: none;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <div id="world">
            <div class="circle">
                <div class="hp-bar">
                    <div class="hp-fill player-hp-fill"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="settings-panel">
        <label>Gun Height: <input type="range" id="gunWidth" min="20" max="150" value="70"></label>
        <label>Gun Width: <input type="range" id="gunHeight" min="20" max="150" value="70"></label>
        <label>Bullet Type:
            <select id="bulletType">
                <option value="normal">Normal</option>
                <option value="explosive">Explosive</option>
            </select>
        </label>
    </div>

    <div id="scoreBoard">Score: 0</div>

    <div id="minimap">
        <div id="minimapWorld">
            <div id="minimapPlayer"></div>
        </div>
    </div>

    <div id="pauseOverlay">PAUSED</div>

    <audio id="shootSound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3" preload="auto"></audio>
    <audio id="hitSound" src="https://www.soundjay.com/buttons/sounds/button-10.mp3" preload="auto"></audio>

    <script>
        const gunSettings = {
            width: 70,
            height: 70
        };

        const bulletSettings = {
            normal: {
                color: '#e67e22',
                speed: 15
            },
            explosive: {
                color: '#c0392b',
                speed: 10
            }
        };

        let currentBulletType = 'normal';

        function createGunSVG() {
            const gun = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            gun.setAttribute("class", "gun");
            gun.setAttribute("width", gunSettings.width);
            gun.setAttribute("height", gunSettings.height);
            gun.setAttribute("viewBox", `0 0 ${gunSettings.width} ${gunSettings.height}`);

            const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rect.setAttribute("x", "0");
            rect.setAttribute("y", gunSettings.height / 4);
            rect.setAttribute("width", gunSettings.width);
            rect.setAttribute("height", gunSettings.height / 2);
            rect.setAttribute("fill", "#555");
            rect.setAttribute("stroke", "black");
            rect.setAttribute("stroke-width", "2");

            gun.appendChild(rect);
            document.body.appendChild(gun);
            return gun;
        }

        let gun = createGunSVG();
        let currentAngle = 0;
        let shootingInterval = null;

        // Settings event listeners
        document.getElementById('gunWidth').addEventListener('input', (e) => {
            gunSettings.width = parseInt(e.target.value);
            document.body.removeChild(gun);
            gun = createGunSVG();
            updateGunPosition();
        });

        document.getElementById('gunHeight').addEventListener('input', (e) => {
            gunSettings.height = parseInt(e.target.value);
            document.body.removeChild(gun);
            gun = createGunSVG();
            updateGunPosition();
        });

        document.getElementById('bulletType').addEventListener('change', (e) => {
            currentBulletType = e.target.value;
        });

        // Game state
        const gameState = {
            player: { x: 2000, y: 2000, hp: 100, maxHp: 100 },
            shapes: [],
            keys: { w: false, a: false, s: false, d: false },
            moveSpeed: 5,
            score: 0,
            wave: 1,
            canShoot: true,
            isPaused: false
        };

        // Initialize sounds
        const shootSound = document.getElementById('shootSound');
        const hitSound = document.getElementById('hitSound');

        function createShape(type) {
            const shape = document.createElement('div');
            shape.className = 'shape';
            let hp, color, size, shapeSVG;

            switch(type) {
                case 'square':
                    hp = 1;
                    color = '#f1c40f';
                    size = 40;
                    shape.style.width = size + 'px';
                    shape.style.height = size + 'px';
                    shape.style.background = color;
                    break;
                case 'triangle':
                    hp = 3;
                    color = '#e74c3c';
                    size = 50;
                    shape.style.width = '0';
                    shape.style.height = '0';
                    shape.style.borderLeft = size/2 + 'px solid transparent';
                    shape.style.borderRight = size/2 + 'px solid transparent';
                    shape.style.borderBottom = size + 'px solid ' + color;
                    break;
                case 'pentagon':
                    hp = 5;
                    color = '#3498db';
                    size = 60;
                    shape.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 60 60">
                        <polygon points="30,0 60,20 48,55 12,55 0,20" fill="${color}"/>
                    </svg>`;
                    break;
                case 'hexagon':
                    hp = 7;
                    color = '#9b59b6';
                    size = 50;
                    shape.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 60 60">
                        <polygon points="30,0 60,15 60,45 30,60 0,45 0,15" fill="${color}"/>
                    </svg>`;
                    break;
            }

            const hpBar = document.createElement('div');
            hpBar.className = 'hp-bar';
            const hpFill = document.createElement('div');
            hpFill.className = 'hp-fill green';
            hpFill.style.width = '100%';
            hpBar.appendChild(hpFill);
            shape.appendChild(hpBar);

            shape.maxHp = hp;
            shape.currentHp = hp;

            const x = Math.random() * 3800 + 100;
            const y = Math.random() * 3800 + 100;
            shape.style.left = x + 'px';
            shape.style.top = y + 'px';

            document.getElementById('world').appendChild(shape);
            return { element: shape, x, y, type, size };
        }

        function spawnShapes(count = 5) {
            const shapeTypes = ['square', 'triangle', 'pentagon', 'hexagon'];
            for(let i = 0; i < count; i++) {
                const randType = shapeTypes[Math.floor(Math.random() * shapeTypes.length)];
                gameState.shapes.push(createShape(randType));
            }
        }

        function updateCamera() {
            const world = document.getElementById('world');
            world.style.transform = `translate(${-gameState.player.x + window.innerWidth/2}px, ${-gameState.player.y + window.innerHeight/2}px)`;
            updateMinimap();
        }

        function checkBulletCollisions(bullet) {
            const bulletRect = bullet.getBoundingClientRect();
            const bulletX = gameState.player.x + (bulletRect.left - window.innerWidth/2) + bullet.offsetWidth / 2;
            const bulletY = gameState.player.y + (bulletRect.top - window.innerHeight/2) + bullet.offsetHeight / 2;

            gameState.shapes.forEach(shape => {
                const shapeX = parseFloat(shape.element.style.left) + shape.size / 2;
                const shapeY = parseFloat(shape.element.style.top) + shape.size / 2;

                if(Math.hypot(bulletX - shapeX, bulletY - shapeY) < shape.size / 2) {
                    shape.element.currentHp--;
                    hitSound.currentTime = 0;
                    hitSound.play();
                    const hpPercentage = (shape.element.currentHp / shape.element.maxHp) * 100;
                    shape.element.querySelector('.hp-fill').style.width = hpPercentage + '%';

                    // Particle effect on hit
                    createParticle(shapeX, shapeY, '#f39c12');

                    if(shape.element.currentHp <= 0) {
                        shape.element.remove();
                        gameState.shapes = gameState.shapes.filter(s => s !== shape);
                        gameState.score += 10;
                        document.getElementById('scoreBoard').innerText = `Score: ${gameState.score}`;
                        // Particle effect on destruction
                        createExplosion(shapeX, shapeY);
                        setTimeout(() => gameState.shapes.push(createShape(shape.type)), 2000);
                    }

                    bullet.remove();
                }
            });
        }

        function createBullet(x, y, angle) {
            const bullet = document.createElement('div');
            bullet.className = 'bullet';
            const bulletSize = gunSettings.height - 40;
            bullet.style.width = bulletSize + 'px';
            bullet.style.height = bulletSize + 'px';
            bullet.style.background = bulletSettings[currentBulletType].color;
            bullet.style.left = x + 'px';
            bullet.style.top = y + 'px';
            document.body.appendChild(bullet);

            shootSound.currentTime = 0;
            shootSound.play();

            let distance = 0;
            let speed = bulletSettings[currentBulletType].speed;

            function animateBullet() {
                if (speed <= 0.1) {
                    bullet.remove();
                    return;
                }

                distance += speed;
                speed *= 0.99;

                const newX = x + Math.cos(angle) * distance;
                const newY = y + Math.sin(angle) * distance;

                bullet.style.left = (newX - bulletSize / 2) + 'px';
                bullet.style.top = (newY - bulletSize / 2) + 'px';

                checkBulletCollisions(bullet);

                requestAnimationFrame(animateBullet);
            }

            animateBullet();
        }

        function createParticle(x, y, color) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = x + 'px';
            particle.style.top = y + 'px';
            particle.style.background = color;
            document.body.appendChild(particle);
            setTimeout(() => particle.remove(), 500);
        }

        function createExplosion(x, y) {
            for(let i = 0; i < 20; i++) {
                const angle = Math.random() * Math.PI * 2;
                const speed = Math.random() * 4 + 2;
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.width = '6px';
                particle.style.height = '6px';
                particle.style.background = '#c0392b';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                document.body.appendChild(particle);

                let distance = 0;

                function animateParticle() {
                    distance += speed;
                    const newX = x + Math.cos(angle) * distance;
                    const newY = y + Math.sin(angle) * distance;

                    particle.style.left = (newX - 3) + 'px';
                    particle.style.top = (newY - 3) + 'px';

                    if(distance > 100) {
                        particle.remove();
                        return;
                    }

                    requestAnimationFrame(animateParticle);
                }

                animateParticle();
            }
        }

        // Movement controls
        document.addEventListener('keydown', (e) => {
            if(e.key.toLowerCase() in gameState.keys) {
                gameState.keys[e.key.toLowerCase()] = true;
                e.preventDefault();
            }

            // Pause functionality
            if(e.key.toLowerCase() === 'p') {
                togglePause();
            }
        });

        document.addEventListener('keyup', (e) => {
            if(e.key.toLowerCase() in gameState.keys) {
                gameState.keys[e.key.toLowerCase()] = false;
                e.preventDefault();
            }
        });

        function gameLoop() {
            if(!gameState.isPaused) {
                if(gameState.keys.w) gameState.player.y -= gameState.moveSpeed;
                if(gameState.keys.s) gameState.player.y += gameState.moveSpeed;
                if(gameState.keys.a) gameState.player.x -= gameState.moveSpeed;
                if(gameState.keys.d) gameState.player.x += gameState.moveSpeed;

                // Boundary checking
                gameState.player.x = Math.max(0, Math.min(4000, gameState.player.x));
                gameState.player.y = Math.max(0, Math.min(4000, gameState.player.y));

                updateCamera();
            }
            requestAnimationFrame(gameLoop);
        }

        // Initialize game
        spawnShapes(10);
        gameLoop();

        // Gun and Shooting
        document.addEventListener('mousedown', () => {
            if(!gameState.isPaused) {
                shoot();
                shootingInterval = setInterval(shoot, 150);
            }
        });

        document.addEventListener('mouseup', () => {
            if (shootingInterval) {
                clearInterval(shootingInterval);
                shootingInterval = null;
            }
        });

        document.addEventListener('mousemove', (e) => {
            if(!gameState.isPaused) {
                const circle = document.querySelector('.circle');
                const circleRect = circle.getBoundingClientRect();
                const circleCenterX = circleRect.left + circleRect.width / 2;
                const circleCenterY = circleRect.top + circleRect.height / 2;

                currentAngle = Math.atan2(e.clientY - circleCenterY, e.clientX - circleCenterX);

                const radius = circleRect.width / 2;
                const gunPosX = circleCenterX + Math.cos(currentAngle) * radius;
                const gunPosY = circleCenterY + Math.sin(currentAngle) * radius;

                gun.style.left = (gunPosX - gunSettings.width / 2) + 'px';
                gun.style.top = (gunPosY - gunSettings.height / 2) + 'px';
                gun.style.transform = `rotate(${currentAngle}rad)`;
            }
        });

        function shoot() {
            const circle = document.querySelector('.circle');
            const circleRect = circle.getBoundingClientRect();
            const circleCenterX = circleRect.left + circleRect.width / 2;
            const circleCenterY = circleRect.top + circleRect.height / 2;
            const radius = circleRect.width / 2;
            const gunPosX = circleCenterX + Math.cos(currentAngle) * radius;
            const gunPosY = circleCenterY + Math.sin(currentAngle) * radius;
            createBullet(gunPosX, gunPosY, currentAngle);
        }

        function updateGunPosition() {
            const circle = document.querySelector('.circle');
            const circleRect = circle.getBoundingClientRect();
            const circleCenterX = circleRect.left + circleRect.width / 2;
            const circleCenterY = circleRect.top + circleRect.height / 2;

            const gunPosX = circleCenterX + Math.cos(currentAngle) * (circleRect.width / 2);
            const gunPosY = circleCenterY + Math.sin(currentAngle) * (circleRect.height / 2);

            gun.style.left = (gunPosX - gunSettings.width / 2) + 'px';
            gun.style.top = (gunPosY - gunSettings.height / 2) + 'px';
            gun.style.transform = `rotate(${currentAngle}rad)`;
        }

        // Minimap functionality
        function updateMinimap() {
            const minimap = document.getElementById('minimapWorld');
            const minimapPlayer = document.getElementById('minimapPlayer');

            // Position the player on the minimap
            const scale = 150 / 4000; // minimap size / world size
            minimapPlayer.style.left = (gameState.player.x * scale) + 'px';
            minimapPlayer.style.top = (gameState.player.y * scale) + 'px';
        }

        // Pause functionality
        function togglePause() {
            gameState.isPaused = !gameState.isPaused;
            const pauseOverlay = document.getElementById('pauseOverlay');
            if(gameState.isPaused) {
                pauseOverlay.style.display = 'flex';
            } else {
                pauseOverlay.style.display = 'none';
            }
        }

        // Player Health (Future improvement placeholder)
        // You can implement player damage mechanics here

    </script>
</body>
</html>

make the camera follow the player and make it look like it's in the center and the whole world is moving instead. also update the gun position all the time and not just when moving the mouse. send the full improved code