Jeu de pistolet JavaScript simple dans un canvas HTML

310 geraldthetrashcan

Ouvrir dans l'éditeur Publiez votre code

Jeu de pistolet JavaScript simple dans un canvas HTML

Recommandé

28 May 2026

Modèle HTML de jeux débloqués avec prise en charge du plein écran

17 July 2025

Modèle de page HTML d'erreur 404

11 September 2025

Modèle de site Web HTML Starbucks

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Gun Game</title>
    <style>
        body {
            margin: 0;
            background: #111;
            color: white;
            font-family: sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            border: 2px solid #444;
            background: #000;
            cursor: crosshair;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            pointer-events: none;
        }
        #msg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            display: none;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background: #ff4757;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div id="ui">
        <div>Score: <span id="score">0</span></div>
    </div>

<div id="msg">
        <h1>GAME OVER</h1>
        <button onclick="resetGame()">Play Again</button>
    </div>

canvas.width = 800;
        canvas.height = 600;

let score = 0;
        let gameActive = true;
        let targets = [];
        let bullets = [];
        let particles = [];

class Target {
            constructor() {
                this.radius = Math.random() * 20 + 10;
                this.x = Math.random() * (canvas.width - this.radius * 2) + this.radius;
                this.y = -this.radius;
                this.speed = Math.random() * 2 + 1 + (score / 10);
                this.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
            }
            update() {
                this.y += this.speed;
                if (this.y - this.radius > canvas.height) {
                    gameOver();
                }
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }
        }

class Bullet {
            constructor(x, y, targetX, targetY) {
                this.x = x;
                this.y = y;
                const angle = Math.atan2(targetY - y, targetX - x);
                this.velocity = {
                    x: Math.cos(angle) * 10,
                    y: Math.sin(angle) * 10
                };
            }
            update() {
                this.x += this.velocity.x;
                this.y += this.velocity.y;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 4, 0, Math.PI * 2);
                ctx.fillStyle = "#fff";
                ctx.fill();
                ctx.closePath();
            }
        }

class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.velocity = {
                    x: (Math.random() - 0.5) * 5,
                    y: (Math.random() - 0.5) * 5
                };
                this.alpha = 1;
            }
            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }
            update() {
                this.x += this.velocity.x;
                this.y += this.velocity.y;
                this.alpha -= 0.02;
            }
        }

function spawnTarget() {
            if (!gameActive) return;
            targets.push(new Target());
            setTimeout(spawnTarget, Math.max(500, 1500 - score * 50));
        }

function gameOver() {
            gameActive = false;
            msgEl.style.display = 'block';
        }

function resetGame() {
            score = 0;
            scoreEl.innerText = score;
            targets = [];
            bullets = [];
            particles = [];
            gameActive = true;
            msgEl.style.display = 'none';
            animate();
            spawnTarget();
        }

window.addEventListener('mousedown', (e) => {
            if (!gameActive) return;
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            bullets.push(new Bullet(canvas.width / 2, canvas.height - 10, mouseX, mouseY));
        });

function animate() {
            if (!gameActive) return;
            requestAnimationFrame(animate);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw Gun Base
            ctx.fillStyle = '#555';
            ctx.fillRect(canvas.width / 2 - 20, canvas.height - 20, 40, 20);

bullets.forEach((bullet, bIndex) => {
                bullet.update();
                bullet.draw();
                if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0) {
                    bullets.splice(bIndex, 1);
                }
            });

targets.forEach((target, tIndex) => {
                target.update();
                target.draw();

bullets.forEach((bullet, bIndex) => {
                    const dist = Math.hypot(bullet.x - target.x, bullet.y - target.y);
                    if (dist < target.radius) {
                        // Explosion
                        for (let i = 0; i < 10; i++) {
                            particles.push(new Particle(target.x, target.y, target.color));
                        }
                        targets.splice(tIndex, 1);
                        bullets.splice(bIndex, 1);
                        score++;
                        scoreEl.innerText = score;
                    }
                });
            });

particles.forEach((particle, pIndex) => {
                if (particle.alpha <= 0) {
                    particles.splice(pIndex, 1);
                } else {
                    particle.update();
                    particle.draw();
                }
            });
        }

spawnTarget();
        animate();
    </script>
</body>
</html>

CSS