Jeu de pistolet JavaScript simple dans un canvas HTML

41 geraldthetrashcan

Ouvrir dans l'éditeur Publiez votre code

Jeu de pistolet JavaScript simple dans un canvas HTML

Recommandé

15 May 2025

Un code par kouadioarmel055

28 August 2025

Installation de panneaux solaires | Services et tarifs

7 May 2025

Un code de Developer7

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