About Your Code Studio (YCS) | Free Code Platform

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