hello, O1. I have this code written, its for a pseduo plant's vs zombies game. but Its not great, could you improve it?
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plants vs Zombies - Enhanced Edition</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #gameCanvas {
            display: block;
            background: linear-gradient(to bottom, #87CEEB, #228B22);
        }
        .hud {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 20px;
        }
        .health-bar {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: red;
            width: 200px;
            height: 20px;
        }
        .health {
            background-color: limegreen;
            height: 100%;
        }
        .plant-menu {
            position: absolute;
            bottom: 10px;
            left: 10px;
            display: flex;
            gap: 10px;
        }
        .plant-option {
            width: 50px;
            height: 50px;
            background-color: forestgreen;
            border: 2px solid darkgreen;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <div class="hud" id="score">Sun: 50</div>
    <div class="health-bar"><div class="health" id="health"></div></div>
    <div class="plant-menu">
        <div class="plant-option" data-type="sunflower">SF</div>
        <div class="plant-option" data-type="peashooter">PS</div>
        <div class="plant-option" data-type="repeater">RP</div>
        <div class="plant-option" data-type="wallnut">WN</div>
    </div>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let lastTime = 0;
        let sunPoints = 50;
        let health = 100;
        const zombies = [];
        const bullets = [];
        const plants = [];
        const plantCosts = {
            sunflower: 50,
            peashooter: 100,
            repeater: 200,
            wallnut: 50
        };
        let selectedPlantType = 'sunflower';

        class Zombie {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.width = 50;
                this.height = 70;
                this.speed = 50 + Math.random() * 20;
            }
            update(deltaTime) {
                this.x -= this.speed * deltaTime;
                if (this.x + this.width < 0) {
                    health -= 10;
                    updateHealthBar();
                    zombies.splice(zombies.indexOf(this), 1);
                }
            }
            draw() {
                ctx.fillStyle = 'darkgreen';
                ctx.fillRect(this.x, this.y, this.width, this.height);
                ctx.fillStyle = 'black';
                ctx.fillRect(this.x + 10, this.y + 20, 10, 10); // eyes
                ctx.fillRect(this.x + 30, this.y + 20, 10, 10);
            }
        }

        class Bullet {
            constructor(x, y, type) {
                this.x = x;
                this.y = y;
                this.width = 10;
                this.height = 5;
                this.speed = type === 'repeater' ? 400 : 300;
                this.color = 'yellow';
            }
            update(deltaTime) {
                this.x += this.speed * deltaTime;
            }
            draw() {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }

        class Plant {
            constructor(x, y, type) {
                this.x = x;
                this.y = y;
                this.width = 50;
                this.height = 50;
                this.type = type;
                this.shootInterval = type === 'repeater' ? 0.5 : 1;
                this.timeSinceLastShot = 0;
                this.sunProductionInterval = 5;
                this.timeSinceLastSun = 0;
            }
            update(deltaTime) {
                if (this.type === 'sunflower') {
                    this.timeSinceLastSun += deltaTime;
                    if (this.timeSinceLastSun >= this.sunProductionInterval) {
                        sunPoints += 25;
                        updateSunPoints();
                        this.timeSinceLastSun = 0;
                    }
                } else if (this.type !== 'wallnut') {
                    this.timeSinceLastShot += deltaTime;
                    if (this.timeSinceLastShot >= this.shootInterval) {
                        bullets.push(new Bullet(this.x + this.width, this.y + this.height / 2, this.type));
                        this.timeSinceLastShot = 0;
                    }
                }
            }
            draw() {
                ctx.fillStyle = this.type === 'sunflower' ? 'gold' : this.type === 'wallnut' ? 'saddlebrown' : 'forestgreen';
                ctx.fillRect(this.x, this.y, this.width, this.height);
                ctx.fillStyle = 'darkgreen';
                ctx.beginPath();
                ctx.arc(this.x + this.width / 2, this.y + this.height / 2, 15, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function spawnZombie() {
            const yPosition = Math.random() * (canvas.height - 70);
            zombies.push(new Zombie(canvas.width, yPosition));
        }

        function updateHealthBar() {
            const healthElement = document.getElementById('health');
            healthElement.style.width = `${health * 2}px`;
            if (health <= 0) {
                alert('Game Over! Your sun points: ' + sunPoints);
                document.location.reload();
            }
        }

        function updateSunPoints() {
            document.getElementById('score').innerText = `Sun: ${sunPoints}`;
        }

        function gameLoop(timestamp) {
            const deltaTime = (timestamp - lastTime) / 1000;
            lastTime = timestamp;

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            plants.forEach(plant => plant.update(deltaTime));
            zombies.forEach(zombie => zombie.update(deltaTime));
            bullets.forEach(bullet => bullet.update(deltaTime));

            zombies.forEach((zombie, zIndex) => {
                bullets.forEach((bullet, bIndex) => {
                    if (bullet.x < zombie.x + zombie.width &&
                        bullet.x + bullet.width > zombie.x &&
                        bullet.y < zombie.y + zombie.height &&
                        bullet.y + bullet.height > zombie.y) {
                        zombies.splice(zIndex, 1);
                        bullets.splice(bIndex, 1);
                    }
                });
            });

            plants.forEach(plant => plant.draw());
            zombies.forEach(zombie => zombie.draw());
            bullets.forEach(bullet => bullet.draw());

            requestAnimationFrame(gameLoop);
        }

        function init() {
            setInterval(spawnZombie, 2000);
            requestAnimationFrame(gameLoop);
        }

        canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            if (sunPoints >= plantCosts[selectedPlantType]) {
                plants.push(new Plant(x - 25, y - 25, selectedPlantType));
                sunPoints -= plantCosts[selectedPlantType];
                updateSunPoints();
            }
        });

        document.querySelectorAll('.plant-option').forEach(option => {
            option.addEventListener('click', () => {
                selectedPlantType = option.dataset.type;
            });
        });

        init();
    </script>
</body>
</html>
```