Jeu Zombie City Defender HTML Canvas

563 30jdiehl

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 September 2025

Modèle HTML de site Web de portefeuille

13 March 2026

Code HTML5 du jeu de puzzle Block Blast

15 August 2025

Code HTML pour tablette graphique avec Javascript

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