🔥 Start Exploring Free Coding Projects

Free HTML, CSS & JavaScript Projects - Your Code Studio

Welcome 👋 to Your Code Studio, the ultimate destination for web developers. Here you can find free source code for responsive websites, creative CSS animations, and functional JavaScript projects like calculators, to-do lists, and more.

1 SkyTyper – Game With HTML, CSS & JS Project

BY YCS Web

1 Flux Avoider – Game With HTML, CSS & JS Project

BY YCS Web

1 SkyTyper Game With HTML, CSS & JS Project

BY YCS Web

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

NEW CODING TREND POSTS

Featured Posts

Ipsum pretium earum? Totam! Aliquet felis. Nonummy cum posuere. Primis. Magnam nec, tempora tellus. Dolor harum voluptates porta penatibus dictumst, labore labore.

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…

Learn More...

SkyTyper Game Using HTML, CSS & JavaScript – Free Typing Speed Game Source Code

SkyTyper Game ek interactive aur fun-based typing game hai jo…

Learn More...

FAQs

Yes! Your Code Studio provides completely free HTML, CSS, and JS source codes for everyone.

Simply scroll down to the bottom of the project page and click the "Download Source Code" button.

Yes, all our templates are fully responsive and work perfectly on mobile and desktop devices.

Yes! Use our Contact page to request any specific coding project, and we will upload it for you.