Spaces:

awacke1
/

TankGameSVG

Running

File size: 13,824 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tank Game with Random Spawns</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
        #gameArea { width: 100vw; height: 100vh; background-color: #f0f0f0; }
        #score { position: absolute; top: 10px; left: 10px; font-size: 24px; font-weight: bold; }
        #level { position: absolute; top: 10px; right: 10px; font-size: 24px; font-weight: bold; }
        #nextLevel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; font-weight: bold; display: none; }
    </style>
</head>
<body>
    <div id="score">Score: 0</div>
    <div id="level">Level: 1</div>
    <div id="nextLevel">Next Level</div>
    <svg id="gameArea"></svg>
    <script>
        const svg = document.getElementById('gameArea');
        const scoreElement = document.getElementById('score');
        const levelElement = document.getElementById('level');
        const nextLevelElement = document.getElementById('nextLevel');
        const svgNS = "http://www.w3.org/2000/svg";

        let GAME_WIDTH = window.innerWidth;
        let GAME_HEIGHT = window.innerHeight;
        const TANK_SIZE = 30;
        const BULLET_SIZE = 5;
        const TANK_SPEED = 2;
        const AI_TANK_SPEED = 1.5;
        const BULLET_SPEED = 5;
        const MAX_HIT_POINTS = 20;
        const MAX_TANKS = 5;
        const MAX_TANKS_ON_SCREEN = 50;
        const SPAWN_DELAY = 5000; // 5 seconds in milliseconds
        const SHOCKWAVE_RADIUS = 150;
        const SHOCKWAVE_DURATION = 1000; // 1 second in milliseconds

        let score = 0;
        let level = 1;
        let spawnQueue = [];
        let lastSpawnTime = 0;
        let shockwaveActive = false;
        let shockwaveStartTime = 0;

        class Tank {
            constructor(color, isPlayer = false) {
                this.color = color;
                this.isPlayer = isPlayer;
                this.hitPoints = MAX_HIT_POINTS;
                this.element = document.createElementNS(svgNS, "g");
                this.tankBody = document.createElementNS(svgNS, "polygon");
                this.shield = document.createElementNS(svgNS, "circle");
                this.hitPointsText = document.createElementNS(svgNS, "text");
                
                this.tankBody.setAttribute("fill", color);
                this.shield.setAttribute("fill", "none");
                this.shield.setAttribute("stroke", color);
                this.shield.setAttribute("stroke-width", this.hitPoints);
                this.shield.setAttribute("r", TANK_SIZE + 10);
                
                this.hitPointsText.setAttribute("text-anchor", "middle");
                this.hitPointsText.setAttribute("fill", "black");
                this.hitPointsText.setAttribute("font-size", "12px");
                
                this.element.appendChild(this.shield);
                this.element.appendChild(this.tankBody);
                this.element.appendChild(this.hitPointsText);
                svg.appendChild(this.element);
                
                this.velocity = { x: 0, y: 0 };
                this.isAlive = true;
                this.respawn();
            }

            respawn() {
                this.x = Math.random() * (GAME_WIDTH - 2 * TANK_SIZE) + TANK_SIZE;
                this.y = Math.random() * (GAME_HEIGHT - 2 * TANK_SIZE) + TANK_SIZE;
                this.angle = Math.random() * 2 * Math.PI;
            }

            update(playerX, playerY) {
                if (!this.isAlive) return;

                if (!this.isPlayer) {
                    const dx = playerX - this.x;
                    const dy = playerY - this.y;
                    this.angle = Math.atan2(dy, dx);
                    this.x += Math.cos(this.angle) * AI_TANK_SPEED;
                    this.y += Math.sin(this.angle) * AI_TANK_SPEED;
                } else {
                    this.x += this.velocity.x;
                    this.y += this.velocity.y;
                }

                // Bounce off walls
                if (this.x < TANK_SIZE || this.x > GAME_WIDTH - TANK_SIZE) {
                    this.velocity.x *= -1;
                    this.x = Math.max(TANK_SIZE, Math.min(GAME_WIDTH - TANK_SIZE, this.x));
                }
                if (this.y < TANK_SIZE || this.y > GAME_HEIGHT - TANK_SIZE) {
                    this.velocity.y *= -1;
                    this.y = Math.max(TANK_SIZE, Math.min(GAME_HEIGHT - TANK_SIZE, this.y));
                }

                const points = [
                    [TANK_SIZE, 0],
                    [-TANK_SIZE / 2, -TANK_SIZE / 2],
                    [-TANK_SIZE / 2, TANK_SIZE / 2]
                ].map(([x, y]) => {
                    const rotatedX = x * Math.cos(this.angle) - y * Math.sin(this.angle);
                    const rotatedY = x * Math.sin(this.angle) + y * Math.cos(this.angle);
                    return `${rotatedX},${rotatedY}`;
                }).join(" ");

                this.tankBody.setAttribute("points", points);
                this.shield.setAttribute("cx", 0);
                this.shield.setAttribute("cy", 0);
                this.shield.setAttribute("stroke-width", this.hitPoints);
                this.hitPointsText.textContent = this.hitPoints;
                this.hitPointsText.setAttribute("x", 0);
                this.hitPointsText.setAttribute("y", -TANK_SIZE - 5);
                
                this.element.setAttribute("transform", `translate(${this.x},${this.y}) rotate(${this.angle * 180 / Math.PI})`);
            }

            shoot() {
                return new Bullet(this.x + Math.cos(this.angle) * TANK_SIZE, 
                                  this.y + Math.sin(this.angle) * TANK_SIZE, 
                                  this.angle, 
                                  this.color,
                                  this.isPlayer);
            }

            takeDamage(damage) {
                this.hitPoints -= damage;
                if (this.hitPoints <= 0) {
                    this.explode();
                }
            }

            explode() {
                if (!this.isAlive) return;
                this.isAlive = false;
                this.element.remove();
                updateScore(1);
            }
        }

        class Bullet {
            constructor(x, y, angle, color, isPlayerBullet) {
                this.x = x;
                this.y = y;
                this.angle = angle;
                this.color = color;
                this.isPlayerBullet = isPlayerBullet;
                this.element = document.createElementNS(svgNS, "circle");
                this.element.setAttribute("r", BULLET_SIZE);
                this.element.setAttribute("fill", color);
                svg.appendChild(this.element);
            }

            update() {
                this.x += Math.cos(this.angle) * BULLET_SPEED;
                this.y += Math.sin(this.angle) * BULLET_SPEED;
                this.element.setAttribute("cx", this.x);
                this.element.setAttribute("cy", this.y);

                return this.x > 0 && this.x < GAME_WIDTH && this.y > 0 && this.y < GAME_HEIGHT;
            }

            remove() {
                this.element.remove();
            }
        }

        const player = new Tank("blue", true);
        let aiTanks = [];

        function queueEnemySpawn() {
            const tanksToSpawn = MAX_TANKS - aiTanks.length;
            for (let i = 0; i < tanksToSpawn; i++) {
                spawnQueue.push({
                    color: `hsl(${Math.random() * 360}, 100%, 50%)`
                });
            }
        }

        function spawnEnemies() {
            const currentTime = Date.now();
            if (currentTime - lastSpawnTime > SPAWN_DELAY && spawnQueue.length > 0 && aiTanks.length < MAX_TANKS_ON_SCREEN) {
                const spawnData = spawnQueue.shift();
                let newTank = new Tank(spawnData.color);
                
                // Ensure the new tank doesn't overlap with existing tanks
                while (aiTanks.some(tank => distance(newTank, tank) < 3 * TANK_SIZE)) {
                    newTank.respawn();
                }
                
                aiTanks.push(newTank);
                lastSpawnTime = currentTime;
            }
        }

        let bullets = [];
        let keys = {};

        document.addEventListener('keydown', (event) => {
            keys[event.key.toLowerCase()] = true;
            if (event.code === 'Space' && !shockwaveActive) {
                activateShockwave();
            }
        });

        document.addEventListener('keyup', (event) => {
            keys[event.key.toLowerCase()] = false;
        });

        svg.addEventListener('mousemove', (event) => {
            const rect = svg.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;
            player.angle = Math.atan2(mouseY - player.y, mouseX - player.x);
        });

        svg.addEventListener('click', () => {
            bullets.push(player.shoot());
        });

        function updatePlayerPosition() {
            let dx = 0, dy = 0;
            if (keys['w']) dy -= TANK_SPEED;
            if (keys['s']) dy += TANK_SPEED;
            if (keys['a']) dx -= TANK_SPEED;
            if (keys['d']) dx += TANK_SPEED;

            // Normalize diagonal movement
            if (dx !== 0 && dy !== 0) {
                dx /= Math.sqrt(2);
                dy /= Math.sqrt(2);
            }

            player.velocity = { x: dx, y: dy };
        }

        function checkCollisions() {
            bullets.forEach((bullet, bulletIndex) => {
                if (bullet.isPlayerBullet) {
                    aiTanks.forEach((tank, tankIndex) => {
                        if (tank.isAlive && distance(bullet, tank) < TANK_SIZE) {
                            bullet.remove();
                            bullets.splice(bulletIndex, 1);
                            tank.takeDamage(1);
                        }
                    });
                }
            });
        }

        function distance(obj1, obj2) {
            return Math.sqrt((obj1.x - obj2.x)**2 + (obj1.y - obj2.y)**2);
        }

        function updateScore(points) {
            score += points;
            scoreElement.textContent = `Score: ${score}`;
        }

        function updateLevel() {
            level++;
            levelElement.textContent = `Level: ${level}`;
            nextLevelElement.style.display = 'block';
            setTimeout(() => {
                nextLevelElement.style.display = 'none';
                queueEnemySpawn();
            }, 2000);
        }

        function activateShockwave() {
            shockwaveActive = true;
            shockwaveStartTime = Date.now();

            const shockwave = document.createElementNS(svgNS, "circle");
            shockwave.setAttribute("cx", player.x);
            shockwave.setAttribute("cy", player.y);
            shockwave.setAttribute("r", 0);
            shockwave.setAttribute("fill", "none");
            shockwave.setAttribute("stroke", "rgba(0, 255, 255, 0.5)");
            shockwave.setAttribute("stroke-width", "5");
            svg.appendChild(shockwave);

            const expandShockwave = setInterval(() => {
                const currentRadius = parseFloat(shockwave.getAttribute("r"));
                if (currentRadius < SHOCKWAVE_RADIUS) {
                    shockwave.setAttribute("r", currentRadius + 5);
                } else {
                    clearInterval(expandShockwave);
                    setTimeout(() => {
                        shockwave.remove();
                    }, 200);
                }
            }, 20);

            // Check for enemy tanks within shockwave radius
            aiTanks.forEach(tank => {
                if (distance(player, tank) <= SHOCKWAVE_RADIUS) {
                    tank.explode();
                    updateScore(10);
                }
            });
        }

        function handleResize() {
            GAME_WIDTH = window.innerWidth;
            GAME_HEIGHT = window.innerHeight;
            svg.setAttribute("width", GAME_WIDTH);
            svg.setAttribute("height", GAME_HEIGHT);

            // Reposition all tanks
            [player, ...aiTanks].forEach(tank => {
                tank.x = Math.min(Math.max(tank.x, TANK_SIZE), GAME_WIDTH - TANK_SIZE);
                tank.y = Math.min(Math.max(tank.y, TANK_SIZE), GAME_HEIGHT - TANK_SIZE);
            });
        }

        window.addEventListener('resize', handleResize);

        function gameLoop() {
            updatePlayerPosition();
            player.update();
            aiTanks = aiTanks.filter(tank => tank.isAlive);
            aiTanks.forEach(tank => {
                tank.update(player.x, player.y);
                if (Math.random() < 0.02) {
                    bullets.push(tank.shoot());
                }
            });

            bullets = bullets.filter(bullet => bullet.update());
            checkCollisions();
            spawnEnemies();

            if (shockwaveActive && Date.now() - shockwaveStartTime > SHOCKWAVE_DURATION) {
                shockwaveActive = false;
            }

            if (aiTanks.length === 0 && spawnQueue.length === 0) {
                updateLevel();
            }

            requestAnimationFrame(gameLoop);
        }

        // Set initial SVG size
        svg.setAttribute("width", GAME_WIDTH);
        svg.setAttribute("height", GAME_HEIGHT);

        queueEnemySpawn(); // Initial spawn queue
        gameLoop();
    </script>
</body>
</html>