Jeu de pistolet JavaScript simple dans un canvas HTML

407 geraldthetrashcan

Remixer Ouvrir dans l'éditeur Publiez votre code

Jeu de pistolet JavaScript simple dans un canvas HTML

Recommandé

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

24 June 2025

Modèle HTML pour agence numérique | Tailwind CSS

23 May 2024

formulaire d'inscription simple et descendant

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