Webleb - UI Elements - Neon Vector

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 Vector Arcade</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #080810;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #gameCanvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: none;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #00ffcc;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
            pointer-events: none;
            user-select: none;
        }
        #menu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            background: rgba(13, 13, 25, 0.85);
            padding: 40px;
            border-radius: 16px;
            border: 2px solid #ff0055;
            box-shadow: 0 0 30px rgba(255, 0, 85, 0.3);
            user-select: none;
        }
        h1 {
            font-size: 42px;
            margin-bottom: 10px;
            color: #ff0055;
            text-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
            letter-spacing: 2px;
        }
        p {
            color: #aaa;
            margin-bottom: 25px;
            font-size: 16px;
        }
        button {
            padding: 12px 30px;
            font-size: 18px;
            font-weight: bold;
            color: #080810;
            background-color: #00ffcc;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
            transition: all 0.2s ease;
        }
        button:hover {
            background-color: #fff;
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
        }
    </style>
</head>
<body>

<canvas id="gameCanvas"></canvas>
    
    <div id="ui">Score: <span id="scoreVal">0</span></div>

<div id="menu">
        <h1 id="menuTitle">NEON VECTOR</h1>
        <p id="menuDesc">Move your cursor/finger to dodge obstacles and collect green fragments!</p>
        <button id="startBtn">START GAME</button>
    </div>

// Game Configuration
        let gameActive = false;
        let score = 0;
        let spawnRate = 0.04; 
        let speedMultiplier = 1;

const player = {
            x: 0,
            y: 0,
            radius: 12,
            shield: 0
        };

let enemies = [];
        let items = [];
        let particles = [];

// Dynamic Resize
        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            if(!gameActive) {
                player.x = canvas.width / 2;
                player.y = canvas.height * 0.7;
            }
        }
        window.addEventListener('resize', resize);
        resize();

// Control Inputs
        function updateMouse(e) {
            player.x = e.clientX;
            player.y = e.clientY;
        }
        function updateTouch(e) {
            if(e.touches.length > 0) {
                player.x = e.touches[0].clientX;
                player.y = e.touches[0].clientY;
            }
        }
        window.addEventListener('mousemove', updateMouse);
        window.addEventListener('touchmove', updateTouch, {passive: true});

// Entities Factory
        function createEnemy() {
            const size = Math.random() * 20 + 15;
            let x, y, dx, dy;

if (Math.random() < 0.5) {
                x = Math.random() < 0.5 ? -size : canvas.width + size;
                y = Math.random() * canvas.height;
                dx = (x < 0 ? 1 : -1) * (Math.random() * 3 + 2);
                dy = (Math.random() - 0.5) * 4;
            } else {
                x = Math.random() * canvas.width;
                y = Math.random() < 0.5 ? -size : canvas.height + size;
                dx = (Math.random() - 0.5) * 4;
                dy = (y < 0 ? 1 : -1) * (Math.random() * 3 + 2);
            }

enemies.push({ x, y, radius: size / 2, dx, dy, color: '#ff0055' });
        }

function createItem() {
            items.push({
                x: Math.random() * (canvas.width - 40) + 20,
                y: Math.random() * (canvas.height - 40) + 20,
                radius: 8,
                pulse: 0
            });
        }

// Logic & Render Loop
        function resetGame() {
            score = 0;
            enemies = [];
            items = [];
            particles = [];
            spawnRate = 0.03;
            speedMultiplier = 1;
            scoreVal.innerText = score;
            createItem();
            createItem();
        }

function gameOver() {
            gameActive = false;
            menuTitle.innerText = "GAME OVER";
            menuDesc.innerText = `Final Score: ${score}`;
            startBtn.innerText = "PLAY AGAIN";
            menu.style.display = "block";
        }

function loop() {
            // Neon Trail Effect
            ctx.fillStyle = 'rgba(8, 8, 16, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

if (!gameActive) return;

// Difficulty Escalation
            speedMultiplier += 0.0002;
            if (Math.random() < spawnRate) createEnemy();

// Handle Items
            for (let i = items.length - 1; i >= 0; i--) {
                let it = items[i];
                it.pulse += 0.1;
                let currentRadius = it.radius + Math.sin(it.pulse) * 2;

ctx.beginPath();
                ctx.arc(it.x, it.y, currentRadius, 0, Math.PI * 2);
                ctx.fillStyle = '#00ffcc';
                ctx.shadowColor = '#00ffcc';
                ctx.shadowBlur = 15;
                ctx.fill();

// Collision with player
                let dist = Math.hypot(player.x - it.x, player.y - it.y);
                if (dist < player.radius + it.radius) {
                    createExplosion(it.x, it.y, '#00ffcc');
                    items.splice(i, 1);
                    score += 10;
                    scoreVal.innerText = score;
                    player.shield = 45; // Give short grace framing
                    createItem();
                    if(Math.random() < 0.4) createItem(); // Chance to multiply items
                }
            }

// Handle Enemies
            for (let i = enemies.length - 1; i >= 0; i--) {
                let e = enemies[i];
                e.x += e.dx * speedMultiplier;
                e.y += e.dy * speedMultiplier;

ctx.beginPath();
                ctx.arc(e.x, e.y, e.radius, 0, Math.PI * 2);
                ctx.fillStyle = e.color;
                ctx.shadowColor = e.color;
                ctx.shadowBlur = 12;
                ctx.fill();

// Offscreen clean up
                if (e.x < -100 || e.x > canvas.width + 100 || e.y < -100 || e.y > canvas.height + 100) {
                    enemies.splice(i, 1);
                    continue;
                }

// Collision with player
                let dist = Math.hypot(player.x - e.x, player.y - e.y);
                if (dist < player.radius + e.radius) {
                    if (player.shield > 0) {
                        createExplosion(e.x, e.y, '#ff0055');
                        enemies.splice(i, 1);
                        score += 5;
                        scoreVal.innerText = score;
                    } else {
                        createExplosion(player.x, player.y, '#ffffff');
                        gameOver();
                    }
                }
            }

// Handle Particles
            for (let i = particles.length - 1; i >= 0; i--) {
                let p = particles[i];
                p.x += p.dx;
                p.y += p.dy;
                p.alpha -= 0.02;

if (p.alpha <= 0) {
                    particles.splice(i, 1);
                    continue;
                }

ctx.save();
                ctx.globalAlpha = p.alpha;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = p.color;
                ctx.shadowBlur = 0;
                ctx.fill();
                ctx.restore();
            }

// Draw Player
            if(player.shield > 0) {
                player.shield--;
                ctx.beginPath();
                ctx.arc(player.x, player.y, player.radius + 8, 0, Math.PI * 2);

Preview

Open Advanced Editor Full Screen