Lienzo HTML del juego Zombie City Defender

691 30jdiehl

Abrir en el editor Publica tu código

Lienzo HTML del juego Zombie City Defender

Recomendado

16 March 2026

Plantilla HTML para videojuegos: Sitio web de estilo cyberpunk

24 August 2025

Blog de tecnología: Plantilla HTML de tecnología y software

11 March 2026

Juego "10 minutos para el amanecer" - Código HTML para insertar

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