Simple JavaScript Gun Game in HTML Canvas

39 geraldthetrashcan

<!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

Simple JavaScript Gun Game in HTML Canvas

Recommended