Zombie City Defender Game HTML Canvas

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zombie City Defender</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #1a1a1a;
            font-family: 'Arial', sans-serif;
            color: white;
            user-select: none;
        }
        canvas {
            display: block;
            cursor: crosshair;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            pointer-events: none;
        }
        .stat {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            margin-bottom: 5px;
        }
        #msg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            color: #ff4444;
            display: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="ui">
        <div class="stat">KILLS: <span id="score">0</span></div>
        <div class="stat">WEAPON: <span id="weapon">Pistol</span></div>
        <div class="stat" style="color: #44ff44;">CITY HP: <span id="hp">100</span></div>
    </div>
    <div id="msg">CITY OVERRUN!<br><span style="font-size: 20px; color: white;">Refresh to Restart</span></div>
    <canvas id="gameCanvas"></canvas>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let score = 0;
        let cityHP = 100;
        let gameActive = true;
        let weaponLevel = 1;
        
        const player = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 20,
            angle: 0
        };

const bullets = [];
        const zombies = [];
        const particles = []; // For blood

let mouseX = 0;
        let mouseY = 0;
        let isMouseDown = false;
        let lastShotTime = 0;

window.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

window.addEventListener('mousedown', () => isMouseDown = true);
        window.addEventListener('mouseup', () => isMouseDown = false);

class Bullet {
            constructor(x, y, angle, speed, color) {
                this.x = x;
                this.y = y;
                this.angle = angle;
                this.speed = speed;
                this.radius = 4;
                this.color = color;
            }
            update() {
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }
        }

class Zombie {
            constructor() {
                const edge = Math.floor(Math.random() * 4);
                if (edge === 0) { this.x = Math.random() * canvas.width; this.y = -50; }
                else if (edge === 1) { this.x = canvas.width + 50; this.y = Math.random() * canvas.height; }
                else if (edge === 2) { this.x = Math.random() * canvas.width; this.y = canvas.height + 50; }
                else { this.x = -50; this.y = Math.random() * canvas.height; }

this.radius = 15;
                this.speed = 1.5 + Math.random() * 2;
                this.hp = 1;
            }
            update() {
                const dx = player.x - this.x;
                const dy = player.y - this.y;
                const angle = Math.atan2(dy, dx);
                this.x += Math.cos(angle) * this.speed;
                this.y += Math.sin(angle) * this.speed;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = '#4a7c44';
                ctx.fill();
                ctx.strokeStyle = '#2d4d29';
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.closePath();
            }
        }

class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = (Math.random() - 0.5) * 6;
                this.vy = (Math.random() - 0.5) * 6;
                this.alpha = 1;
                this.size = Math.random() * 4 + 2;
            }
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.alpha -= 0.01;
            }
            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = '#880000';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

function spawnZombie() {
            if (!gameActive) return;
            zombies.push(new Zombie());
            // High spawn rate: spawn again soon
            setTimeout(spawnZombie, Math.max(100, 500 - score)); 
        }

function shoot() {
            const angle = Math.atan2(mouseY - player.y, mouseX - player.x);
            let fireDelay = 100; // Fast shooting
            
            if (weaponLevel >= 2) fireDelay = 70;
            if (weaponLevel >= 3) fireDelay = 40;

function update() {
            if (!gameActive) return;

// Shooting
            if (isMouseDown) shoot();

// Update Bullets
            bullets.forEach((b, index) => {
                b.update();
                if (b.x < 0 || b.x > canvas.width || b.y < 0 || b.y > canvas.height) {
                    bullets.splice(index, 1);
                }
            });

// Update Zombies
            zombies.forEach((z, zIdx) => {
                z.update();

// Check City Collision
                const dist = Math.hypot(player.x - z.x, player.y - z.y);
                if (dist < player.radius + z.radius) {
                    cityHP -= 1;
                    hpEl.innerText = cityHP;
                    zombies.splice(zIdx, 1);
                    if (cityHP <= 0) {
                        gameActive = false;
                        msgEl.style.display = 'block';
                    }
                }

// Bullet Collision
                bullets.forEach((b, bIdx) => {
                    const bDist = Math.hypot(b.x - z.x, b.y - z.y);
                    if (bDist < b.radius + z.radius) {
                        // Blood effect
                        for (let i = 0; i < 8; i++) {
                            particles.push(new Particle(z.x, z.y));
                        }
                        
                        zombies.splice(zIdx, 1);
                        bullets.splice(bIdx, 1);
                        score++;
                        scoreEl.innerText = score;

// Weapon Upgrades
                        if (score === 50) { weaponLevel = 2; weaponEl.innerText = "Dual SMG"; weaponEl.style.color = "#00ffff"; }
                        if (score === 150) { weaponLevel = 3; weaponEl.innerText = "Plasma Repeater"; weaponEl.style.color = "#ff00ff"; }
                    }
                });
            });

// Update Particles
            particles.forEach((p, index) => {
                p.update();
                if (p.alpha <= 0) particles.splice(index, 1);
            });
        }

function draw() {
            ctx.fillStyle = 'rgba(26, 26, 26, 0.3)'; // Trail effect
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw City/Center
            ctx.beginPath();
            ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
            ctx.fillStyle = '#333';
            ctx.fill();
            ctx.strokeStyle = '#00ff00';
            ctx.lineWidth = 4;
            ctx.stroke();

// Draw Aim Line
            const angle = Math.atan2(mouseY - player.y, mouseX - player.x);
            ctx.beginPath();
            ctx.moveTo(player.x, player.y);
            ctx.lineTo(player.x + Math.cos(angle) * 30, player.y + Math.sin(angle) * 30);
            ctx.strokeStyle = 'white';
            ctx.stroke();

particles.forEach(p => p.draw());
            bullets.forEach(b => b.draw());
            zombies.forEach(z => z.draw());
        }

function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

// Adjust canvas on resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            player.x = canvas.width / 2;
            player.y = canvas.height / 2;
        });

spawnZombie();
        loop();
    </script>
</body>
</html>

Zombie City Defender Game HTML Canvas

Recommended

Presentations Website Template HTML & CSS

HTML Login Form Example

Muhammad Atif.Snake game

HTML

CSS

JS

Recommended

Presentations Website Template HTML & CSS

HTML Login Form Example

Muhammad Atif.Snake game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS