Jeu Zombie City Defender HTML Canvas

692 30jdiehl

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 October 2025

Animation de chargement CSS Structure HTML

22 January 2026

Chargeur de jeu HTML5 pour le portage Web de Pizza Tower

10 July 2025

Modèle de formulaire de connexion HTML CSS

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