<html><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;
}

html, body {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

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

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

.circle {
    width: 100px;
    height: 100px;
    background: #4169e1;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

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

.hp-bar {
    position: absolute;
    width: 50px;
    height: 5px;
    background: #ddd;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.hp-fill {
    height: 100%;
    background: #2ecc71;
    transition: width 0.2s;
}

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

.bullet {
    position: fixed;
    background: #4169e1;
    border-radius: 50%;
    pointer-events: none;
}
</style>
</head>
<body>
    <div id="gameContainer">
        <div id="world">
            <div class="circle"></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>
    </div>

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

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", "#666");
    rect.setAttribute("stroke", "black");
    rect.setAttribute("stroke-width", "1");

    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();
});

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

// Game state
const gameState = {
    player: { x: 2000, y: 2000 },
    shapes: [],
    keys: { w: false, a: false, s: false, d: false },
    moveSpeed: 5
};

function createShape(type) {
    const shape = document.createElement('div');
    shape.className = 'shape';
    let hp, color, size;
    
    switch(type) {
        case 'square':
            hp = 1;
            color = 'yellow';
            size = 40;
            shape.style.width = size + 'px';
            shape.style.height = size + 'px';
            shape.style.background = color;
            break;
        case 'triangle':
            hp = 3;
            color = 'red';
            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 = 10;
            color = 'blue';
            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;
    }

    const hpBar = document.createElement('div');
    hpBar.className = 'hp-bar';
    const hpFill = document.createElement('div');
    hpFill.className = 'hp-fill';
    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() {
    for(let i = 0; i < 5; i++) {
        gameState.shapes.push(createShape('square'));
        gameState.shapes.push(createShape('triangle'));
        gameState.shapes.push(createShape('pentagon'));
    }
}

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)`;
}

function checkBulletCollisions(bullet) {
    const bulletRect = bullet.getBoundingClientRect();
    const bulletX = gameState.player.x + (bulletRect.left - window.innerWidth/2);
    const bulletY = gameState.player.y + (bulletRect.top - window.innerHeight/2);
    
    gameState.shapes.forEach(shape => {
        const shapeX = parseFloat(shape.element.style.left);
        const shapeY = parseFloat(shape.element.style.top);
        
        if(Math.hypot(bulletX - shapeX, bulletY - shapeY) < shape.size) {
            shape.element.currentHp--;
            const hpPercentage = (shape.element.currentHp / shape.element.maxHp) * 100;
            shape.element.querySelector('.hp-fill').style.width = hpPercentage + '%';
            
            if(shape.element.currentHp <= 0) {
                shape.element.remove();
                gameState.shapes = gameState.shapes.filter(s => s !== shape);
                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/2;
    bullet.style.width = bulletSize + 'px';
    bullet.style.height = bulletSize + 'px';
    bullet.style.left = x + 'px';
    bullet.style.top = y + 'px';
    document.body.appendChild(bullet);
    
    let distance = 0;
    let speed = 15;
    
    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();
}

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

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

function gameLoop() {
    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();
gameLoop();

document.addEventListener('mousedown', () => {
    shoot();
    shootingInterval = setInterval(shoot, 150);
});

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

document.addEventListener('mousemove', (e) => {
    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.position = 'fixed';
    gun.style.display = 'block';
    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);
}
</script>
</body>
</html>

make the player be able to move along the map but the camera will always follow him so it appears that the player is always in the center but they're moving
also make it so there are settings in the top left that allow you to change the width and height of the gun. the bullet size will be the same as the gun width.
every time the player moves the mouse or rotates the gun or moves the tank the gun should snap back into place. the gun should be behind the circle. currently it has a lower z index but it still doesn't work.
add 10 more improvements and post the full improved code here.