Neon Strike: código fuente del juego de disparos HTML5

561 codex

Abrir en el editor Publica tu código

Neon Strike: código fuente del juego de disparos HTML5

Recomendado

21 May 2026

UNDERTALE (arreglado de nuevo, disculpen)

18 February 2024

Generador de Citas Aleatorias con Tu Nombre

25 November 2025

Cargador de juegos HTML5 con integración con Yandex SDK

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Strike - Shooting Game</title>
    <style>
        body {
            margin: 0;
            background: #050505;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            background: #000;
            display: block;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            pointer-events: none;
            user-select: none;
        }
        #score {
            font-size: 24px;
            color: #0ff;
            text-shadow: 0 0 10px #0ff;
        }
        #msg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border: 2px solid #0ff;
            display: block;
        }
        button {
            background: #0ff;
            border: none;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 10px;
            font-weight: bold;
        }
        button:hover {
            background: #fff;
        }
    </style>
</head>
<body>

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

<div id="msg">
        <h1 id="title">NEON STRIKE</h1>
        <p>Click to shoot. Don't let them reach the bottom!</p>
        <button onclick="startGame()">START GAME</button>
    </div>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let score = 0;
        let gameActive = false;
        let enemies = [];
        let particles = [];
        let projectiles = [];
        let animationId;

class Player {
            constructor() {
                this.x = canvas.width / 2;
                this.y = canvas.height - 50;
                this.radius = 15;
                this.color = '#0ff';
            }
            draw() {
                ctx.beginPath();
                ctx.moveTo(this.x, this.y - 15);
                ctx.lineTo(this.x - 15, this.y + 15);
                ctx.lineTo(this.x + 15, this.y + 15);
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.shadowBlur = 15;
                ctx.shadowColor = this.color;
                ctx.fill();
            }
        }

class Projectile {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.radius = 4;
                this.color = '#fff';
                this.velocity = 8;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
            update() {
                this.y -= this.velocity;
            }
        }

class Enemy {
            constructor() {
                this.radius = Math.random() * (30 - 10) + 10;
                this.x = Math.random() * (canvas.width - this.radius * 2) + this.radius;
                this.y = -this.radius;
                this.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
                this.velocity = Math.random() * 2 + 1;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.shadowBlur = 10;
                ctx.shadowColor = this.color;
                ctx.fill();
            }
            update() {
                this.y += this.velocity;
            }
        }

class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.radius = Math.random() * 3;
                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, this.radius, 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;
            }
        }

const player = new Player();

function spawnEnemy() {
            if (!gameActive) return;
            enemies.push(new Enemy());
            setTimeout(spawnEnemy, 1000 - (score * 2 > 700 ? 700 : score * 2));
        }

function startGame() {
            score = 0;
            enemies = [];
            projectiles = [];
            particles = [];
            gameActive = true;
            scoreEl.innerHTML = `Score: ${score}`;
            msgBox.style.display = 'none';
            spawnEnemy();
            animate();
        }

function gameOver() {
            gameActive = false;
            cancelAnimationFrame(animationId);
            titleEl.innerText = "GAME OVER";
            msgBox.style.display = 'block';
        }

window.addEventListener('click', (e) => {
            if (gameActive) {
                projectiles.push(new Projectile(player.x, player.y));
            }
        });

window.addEventListener('mousemove', (e) => {
            player.x = e.clientX;
        });

function animate() {
            animationId = requestAnimationFrame(animate);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            player.draw();

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

projectiles.forEach((p, index) => {
                p.update();
                p.draw();
                if (p.y < 0) projectiles.splice(index, 1);
            });

enemies.forEach((enemy, index) => {
                enemy.update();
                enemy.draw();

// Lose condition
                if (enemy.y - enemy.radius > canvas.height) {
                    gameOver();
                }

// Collision Detection
                projectiles.forEach((p, pIndex) => {
                    const dist = Math.hypot(p.x - enemy.x, p.y - enemy.y);
                    if (dist - enemy.radius - p.radius < 1) {
                        // Explosion
                        for (let i = 0; i < 15; i++) {
                            particles.push(new Particle(enemy.x, enemy.y, enemy.color));
                        }
                        
                        score += 10;
                        scoreEl.innerHTML = `Score: ${score}`;
                        
                        setTimeout(() => {
                            enemies.splice(index, 1);
                            projectiles.splice(pIndex, 1);
                        }, 0);
                    }
                });
            });
        }

window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            player.y = canvas.height - 50;
        });
    </script>
</body>
</html>

CSS