Webleb - UI Elements - Neon Strike: HTML5 Shooting Game Source Code

HTML CSS JS

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

Preview

Open Advanced Editor