Juego de disparos sencillo en JavaScript con HTML Canvas

214 geraldthetrashcan

Abrir en el editor Publica tu código

Juego de disparos sencillo en JavaScript con HTML Canvas

Recomendado

16 October 2025

Animación de carga CSS con efectos de fragmento

19 December 2025

Emulador de GBA: Juego Dragon Ball Z

10 December 2024

Un código de agilecloud61

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