Lienzo HTML del juego Zombie City Defender

918 30jdiehl Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Lienzo HTML del juego Zombie City Defender

Recomendado

22 November 2025

Plantilla HTML de formulario de inicio de sesión de Cyberpunk

24 August 2025

Ejemplo de formulario de registro HTML simple

12 January 2026

Emulador HTML de NES: Juega Mega Man 6 en línea

HTML

<!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>

CSS