Flux Avoider – JavaScript Arcade Game Built with HTML, CSS & JS | Your Code Studio

Flux Avoider is a fast-paced arcade-style browser game developed using HTML, CSS, and Vanilla JavaScript by Your Code Studio. The main objective of the game is to dodge continuously moving flux obstacles while surviving as long as possible to achieve a high score.

This project is designed for beginner to intermediate web developers who want to learn practical JavaScript game development concepts. Flux Avoider demonstrates real-time collision detection, smooth animations, keyboard-based controls, and a progressive difficulty system — all implemented without using any external libraries or frameworks.

The game runs directly in the browser and features a fully responsive layout, ensuring smooth gameplay on desktop and mobile devices. The clean and well-structured source code makes this project ideal for learning, practicing, and adding to a professional frontend portfolio.

If you are looking for free and high-quality HTML, CSS, and JavaScript projects, Flux Avoider is a perfect example of how simple technologies can be used to build engaging browser games.

🔗 Official Website & Source Code: https://ycsweb.com
📺 More projects on YouTube: Your Code Studio

✨ Key Features

Built with pure HTML, CSS, and Vanilla JavaScript
Fast-paced arcade gameplay
Smooth animations and collision detection
Keyboard-controlled player movement
Score system with increasing difficulty
Fully responsive and lightweight
Beginner-friendly clean code structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Flux Avoider | Your Code Studio</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600;800&display=swap" rel="stylesheet">

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
        }

body {
            font-family: var(--font-main);
            background-color: var(--color-bg);
            color: var(--color-text);
            overflow: hidden;
            height: 100vh;
            height: 100dvh; 
            display: flex;
            flex-direction: column;
        }

/* --- LOADER --- */
        #page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--color-bg);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease, visibility 0.5s;
        }

.spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.1);
            border-top: 4px solid var(--color-primary);
            border-bottom: 4px solid var(--color-danger);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 15px;
        }

.loader-text {
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 2px;
            animation: pulseText 1.5s infinite;
        }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes pulseText { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* --- Header --- */
        header {
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 1.5rem;
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--glass-border);
            z-index: 10;
            flex-shrink: 0;
        }

.logo {
            font-weight: 800;
            font-size: 1.4rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .logo span { color: var(--color-primary); }
        .logo span.danger { color: var(--color-danger); }

.score-board {
            font-size: 1.3rem;
            font-weight: 700;
            background: rgba(0,0,0,0.3);
            padding: 5px 15px;
            border-radius: 20px;
            border: 1px solid var(--glass-border);
        }
        #score-display { color: var(--color-primary); transition: transform 0.1s; }
        
        /* Added pop effect for score */
        .score-pop { transform: scale(1.5); color: #fff !important; }

/* --- Game Area --- */
        main {
            flex: 1;
            position: relative;
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

canvas {
            display: block;
        }

/* --- Mobile Controls --- */
        .mobile-controls {
            display: none;
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            padding: 0 20px;
            justify-content: space-between;
            z-index: 20;
            pointer-events: none;
        }

.control-btn {
            pointer-events: auto;
            width: 85px;
            height: 85px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            border: 2px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(4px);
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(255,255,255,0.8);
            transition: transform 0.1s, background 0.1s;
        }
        .control-btn svg { width: 40px; height: 40px; }
        
        .control-btn:active {
            transform: scale(0.9);
            background: rgba(82, 113, 255, 0.4);
            border-color: var(--color-primary);
        }

/* --- UI Overlay --- */
        #ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(15, 16, 22, 0.9);
            backdrop-filter: blur(8px);
            z-index: 30;
            transition: opacity 0.3s;
        }
        #ui-layer.hidden { opacity: 0; pointer-events: none; }

h1 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, var(--color-primary), #ffffff, var(--color-danger));
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientMove 3s linear infinite;
            text-align: center;
        }
        @keyframes gradientMove { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

p.subtitle {
            font-size: 1rem;
            margin-bottom: 2rem;
            color: #ccc;
            text-align: center;
            line-height: 1.5;
        }

.btn-start {
            padding: 16px 50px;
            font-family: var(--font-main);
            font-size: 1.2rem;
            font-weight: 700;
            color: white;
            background: linear-gradient(90deg, var(--color-primary), #3a57e8);
            border: none;
            border-radius: 60px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            box-shadow: 0 5px 20px rgba(82, 113, 255, 0.3);
        }
        .btn-start:active { transform: scale(0.96); }

/* --- Footer --- */
        footer {
            height: var(--footer-height);
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--glass-bg);
            border-top: 1px solid var(--glass-border);
            font-size: 0.8rem;
            color: #888;
            z-index: 100;
            text-transform: uppercase;
            letter-spacing: 1px;
            flex-shrink: 0;
        }
        footer strong { color: var(--color-primary); margin-left: 5px; }

/* --- MOBILE TWEAKS --- */
        @media (max-width: 768px) {
            .mobile-controls { 
                display: flex; 
                bottom: 60px; 
            }
            
            footer {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background: #0f1016; 
                border-top: 1px solid rgba(255,255,255,0.15);
            }
            
            main { margin-bottom: var(--footer-height); }
            h1 { font-size: 2.2rem; }
        }
    </style>
</head>
<body>

<div id="page-loader">
        <div class="spinner"></div>
        <div class="loader-text">OPTIMIZING...</div>
    </div>

<header>
        <div class="logo">
            <span>Flux</span><span class="danger">Avoider</span>
        </div>
        <div class="score-board">
            Score: <span id="score-display">0</span>
        </div>
    </header>

<main>
        <canvas id="gameCanvas"></canvas>
        
        <div class="mobile-controls">
            <div class="control-btn" id="btnLeft">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
            </div>
            <div class="control-btn" id="btnRight">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
            </div>
        </div>

<div id="ui-layer">
            <h1 id="game-title">FLUX</h1>
            <p class="subtitle" id="game-subtitle">Dodge the <span style="color:var(--color-danger)">Orange</span> Cubes</p>
            <button class="btn-start" id="startBtn">PLAY NOW</button>
        </div>
    </main>

<footer>
        Powered by <strong>Your Code Studio</strong>
    </footer>

// --- Loader ---
        window.addEventListener('load', () => {
            const loader = document.getElementById('page-loader');
            setTimeout(() => {
                loader.style.opacity = '0';
                setTimeout(() => { loader.style.visibility = 'hidden'; }, 500);
            }, 500);
        });

// --- Sound (Optimized) ---
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        const audioCtx = new AudioContext();
        
        const SFX = {
            playTone: (freq, type, duration) => {
                if(audioCtx.state === 'suspended') audioCtx.resume();
                const osc = audioCtx.createOscillator();
                const gain = audioCtx.createGain();
                osc.connect(gain);
                gain.connect(audioCtx.destination);
                osc.type = type;
                osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
                gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);
                osc.start();
                osc.stop(audioCtx.currentTime + duration);
            },
            score: () => SFX.playTone(1200, 'triangle', 0.1),
            crash: () => SFX.playTone(100, 'sawtooth', 0.4),
            start: () => SFX.playTone(440, 'sine', 0.3)
        };

// --- Game Setup ---
        const COLORS = { player: '#5271FF', enemy: '#D97757' };
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d', { alpha: false }); 
        const scoreEl = document.getElementById('score-display');
        const uiLayer = document.getElementById('ui-layer');
        const startBtn = document.getElementById('startBtn');
        const titleEl = document.getElementById('game-title');
        const subtitleEl = document.getElementById('game-subtitle');
        const btnLeft = document.getElementById('btnLeft');
        const btnRight = document.getElementById('btnRight');

let animationId, score = 0, gameActive = false, frame = 0, difficultyMultiplier = 1;
        let inputX, isLeftPressed = false, isRightPressed = false;

function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight - 105; 
            if(!gameActive) inputX = canvas.width / 2;
        }
        window.addEventListener('resize', resize);
        resize();

// --- Entities ---
        class Player {
            constructor() {
                this.width = 44; this.height = 44;
                this.x = canvas.width / 2 - this.width / 2;
                this.y = canvas.height - 130; 
                this.color = COLORS.player;
            }
            update() {
                const buttonSpeed = (isMobile ? 18 : 14) * difficultyMultiplier; 
                
                if (isLeftPressed) inputX -= buttonSpeed;
                if (isRightPressed) inputX += buttonSpeed;
                
                if (inputX < this.width/2) inputX = this.width/2;
                if (inputX > canvas.width - this.width/2) inputX = canvas.width - this.width/2;

const dx = (inputX - this.width/2) - this.x;
                this.x += dx * 0.25;

if (this.x < 0) this.x = 0;
                if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;
                this.draw();
            }
            draw() {
                if(!isMobile) {
                    ctx.save();
                    ctx.shadowColor = this.color;
                    ctx.shadowBlur = GLOW_AMOUNT;
                }
                
                ctx.fillStyle = this.color;
                ctx.beginPath();
                if(ctx.roundRect) ctx.roundRect(this.x, this.y, this.width, this.height, 10);
                else ctx.rect(this.x, this.y, this.width, this.height);
                ctx.fill();

ctx.fillStyle = "rgba(255,255,255,0.4)";
                ctx.beginPath(); 
                ctx.arc(this.x + 12, this.y + 12, 6, 0, Math.PI*2); 
                ctx.fill();

if(!isMobile) ctx.restore();
            }
        }

class Enemy {
            constructor() {
                this.width = Math.random() * 30 + 25;
                this.height = this.width;
                this.x = Math.random() * (canvas.width - this.width);
                this.y = -60;
                this.speed = (Math.random() * 3 + 4) * difficultyMultiplier;
                this.color = COLORS.enemy;
            }
            update() { 
                this.y += this.speed; 
                this.draw(); 
            }
            draw() {
                if(!isMobile) {
                    ctx.save();
                    ctx.shadowColor = this.color; ctx.shadowBlur = 10;
                }
                
                ctx.strokeStyle = this.color; 
                ctx.lineWidth = 4;
                ctx.strokeRect(this.x, this.y, this.width, this.height);
                
                ctx.fillStyle = isMobile ? this.color : "#D9775755";
                ctx.fillRect(this.x + 5, this.y + 5, this.width - 10, this.height - 10);
                
                if(!isMobile) ctx.restore();
            }
        }

class Particle {
            constructor(x, y, color) {
                this.x = x; this.y = y; this.size = Math.random() * 4 + 1;
                this.color = color;
                this.vx = (Math.random() - 0.5) * 12; this.vy = (Math.random() - 0.5) * 12;
                this.life = 1;
            }
            update() { this.x += this.vx; this.y += this.vy; this.life -= 0.05; this.draw(); }
            draw() {
                ctx.globalAlpha = this.life;
                ctx.fillStyle = this.color; 
                ctx.beginPath();
                ctx.rect(this.x, this.y, this.size, this.size); 
                ctx.fill();
                ctx.globalAlpha = 1.0;
            }
        }

class FloatingText {
            constructor(x, y, text) { this.x = x; this.y = y; this.text = text; this.alpha = 1; }
            update() { this.y -= 3; this.alpha -= 0.04; this.draw(); } // Faster float
            draw() {
                ctx.globalAlpha = Math.max(0, this.alpha);
                ctx.fillStyle = "#ffffff"; 
                ctx.font = "bold 24px 'Jost'"; // Bigger font
                ctx.fillText(this.text, this.x, this.y); 
                ctx.globalAlpha = 1.0;
            }
        }

// --- Logic ---
        let player, enemies = [], particles = [], floatTexts = [];

function initGame() {
            SFX.start();
            resize(); 
            inputX = canvas.width / 2;
            player = new Player();
            enemies = []; particles = []; floatTexts = [];
            score = 0; frame = 0; difficultyMultiplier = 1;
            scoreEl.innerText = score;
            gameActive = true;
            uiLayer.classList.add('hidden');
            animate();
        }

function drawBackground() {
            ctx.fillStyle = 'rgba(15, 16, 22, 0.4)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

function animate() {
            if (!gameActive) return;
            animationId = requestAnimationFrame(animate);
            frame++; 
            drawBackground(); 
            player.update();

let spawnRate = Math.max(15, 45 - Math.floor(score / 50));
            if (frame % spawnRate === 0) enemies.push(new Enemy());
            if (frame % 400 === 0) difficultyMultiplier += 0.1;

for (let i = enemies.length - 1; i >= 0; i--) {
                let enemy = enemies[i];
                enemy.update();
                
                if (player.x < enemy.x + enemy.width - 8 && player.x + player.width > enemy.x + 8 &&
                    player.y < enemy.y + enemy.height - 8 && player.height + player.y > enemy.y + 8) {
                    gameOver();
                    return;
                }

if (enemy.y > canvas.height) {
                    score += 10; 
                    scoreEl.innerText = score;
                    
                    // Add Pop Effect to Score Board
                    scoreEl.classList.add('score-pop');
                    setTimeout(() => scoreEl.classList.remove('score-pop'), 100);

// Show +10 Animation on ALL devices now
                    floatTexts.push(new FloatingText(enemy.x, canvas.height - 50, "+10"));
                    
                    SFX.score(); 
                    enemies.splice(i, 1);
                }
            }

for (let i = floatTexts.length - 1; i >= 0; i--) {
                if(floatTexts[i].alpha <= 0) floatTexts.splice(i, 1); else floatTexts[i].update();
            }
        }

// --- Controls ---
        canvas.addEventListener('mousemove', (e) => {
            if (!gameActive) return;
            const rect = canvas.getBoundingClientRect();
            inputX = e.clientX - rect.left;
        });
        
        canvas.addEventListener('touchmove', (e) => {
            if (!gameActive) return; e.preventDefault(); 
            const rect = canvas.getBoundingClientRect();
            inputX = e.touches[0].clientX - rect.left;
        }, { passive: false });

canvas.addEventListener('touchstart', (e) => {
            if (!gameActive) return;
            if(e.target === canvas) {
                const rect = canvas.getBoundingClientRect();
                inputX = e.touches[0].clientX - rect.left;
            }
        });

const setLeft = (s) => isLeftPressed = s;
        const setRight = (s) => isRightPressed = s;

btnLeft.addEventListener('touchstart', (e) => { e.preventDefault(); setLeft(true); });
        btnLeft.addEventListener('touchend', (e) => { e.preventDefault(); setLeft(false); });
        btnRight.addEventListener('touchstart', (e) => { e.preventDefault(); setRight(true); });
        btnRight.addEventListener('touchend', (e) => { e.preventDefault(); setRight(false); });
        
        btnLeft.addEventListener('mousedown', () => setLeft(true));
        btnLeft.addEventListener('mouseup', () => setLeft(false));
        btnLeft.addEventListener('mouseleave', () => setLeft(false));
        btnRight.addEventListener('mousedown', () => setRight(true));
        btnRight.addEventListener('mouseup', () => setRight(false));
        btnRight.addEventListener('mouseleave', () => setRight(false));

startBtn.addEventListener('click', initGame);
        
        ctx.fillStyle = '#0f1016';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

</script>
</body>
</html>

Source Code