🔥 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, viewport-fit=cover">
    <title>Honey Rush: Ultimate Seasons | Your Code Studio</title>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">

* {
            box-sizing: border-box;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: none;
        }

body {
            margin: 0; padding: 0;
            width: 100vw; height: 100vh;
            background: #111;
            font-family: 'Fredoka', sans-serif;
            overflow: hidden;
            color: white;
        }

/* --- GAME LAYOUT (ULTRA WIDE/FULL SCREEN) --- */
        #game-frame {
            display: flex;
            flex-direction: column;
            width: 100%; height: 100%;
            background: #000;
            position: relative;
        }

/* Shake Animation for Crash */
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }
        .shake-active {
            animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
        }

/* --- HEADER --- */
        header {
            height: var(--header-h);
            background: linear-gradient(180deg, var(--wood-secondary), var(--wood-primary));
            border-bottom: 5px solid #3E2723;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5%;
            z-index: 10;
            box-shadow: 0 8px 25px rgba(0,0,0,0.5);
        }

.hud-box {
            background: rgba(0,0,0,0.5);
            padding: 8px 25px;
            border-radius: 20px;
            border: 2px solid rgba(255,255,255,0.15);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 100px;
            box-shadow: inset 0 4px 10px rgba(0,0,0,0.3);
            transition: transform 0.2s;
        }
        .hud-box:hover { transform: scale(1.05); }

.hud-label { font-size: 0.8rem; color: #CCC; text-transform: uppercase; letter-spacing: 1px;}
        .hud-val { font-size: 1.8rem; color: var(--gold); font-weight: 700; text-shadow: 2px 3px 0 #000; }

.brand-logo {
            font-size: 0.9rem;
            text-align: center;
            line-height: 1.3;
            color: #D7CCC8;
            text-shadow: 1px 1px 2px #000;
        }
        .brand-logo span { color: var(--gold); font-weight: bold; display: block; font-size: 1.2rem; }

/* --- CANVAS --- */
        #canvas-area {
            flex: 1;
            position: relative;
            background: #87CEEB;
            overflow: hidden;
        }

canvas { width: 100%; height: 100%; display: block; }

/* --- FOOTER --- */
        footer {
            height: var(--footer-h);
            background: linear-gradient(0deg, var(--wood-secondary), var(--wood-primary));
            border-top: 5px solid #3E2723;
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 -8px 25px rgba(0,0,0,0.5);
        }

/* --- CONTROLS (NEW & BIGGER) --- */
        .controls-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 800px;
            padding: 0 40px;
            transform: translateY(150px);
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        .controls-container.show {
            transform: translateY(0);
            opacity: 1;
        }

.btn-control {
            width: 90px; height: 90px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #FFD54F, #FF8F00);
            border: 5px solid #FFF8E1;
            box-shadow: 0 10px 0 #E65100, 0 15px 30px rgba(0,0,0,0.5);
            display: flex; 
            justify-content: center; 
            align-items: center;
            cursor: pointer;
            transition: all 0.1s;
        }
        
        /* Modern SVG Icons */
        .btn-control svg {
            width: 50px;
            height: 50px;
            stroke: #3E2723;
            filter: drop-shadow(2px 2px 0px rgba(255,255,255,0.5));
            transition: transform 0.1s;
        }

.btn-control:active, .btn-control.pressed {
            transform: translateY(10px);
            box-shadow: 0 0 0 #E65100, inset 0 6px 15px rgba(0,0,0,0.4);
            background: radial-gradient(circle at 30% 30%, #FFCA28, #F57C00);
        }
        .btn-control:active svg, .btn-control.pressed svg {
            transform: scale(0.9);
        }

/* --- SCREENS (Start/Game Over) --- */
        .screen-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
            transition: opacity 0.4s;
        }

.card {
            background: #FFF8E1;
            color: #3E2723;
            padding: 40px 30px;
            border-radius: 40px;
            text-align: center;
            width: 90%;
            max-width: 500px;
            border: 8px solid var(--wood-primary);
            box-shadow: 0 25px 60px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.5);
            animation: floatCard 4s ease-in-out infinite;
        }

@keyframes floatCard { 
            0%, 100% {transform: translateY(0) rotate(-1deg);} 
            50% {transform: translateY(-15px) rotate(1deg);} 
        }

h1 { margin: 0; color: #E65100; font-size: 3.5rem; line-height: 1; text-shadow: 3px 3px 0 rgba(0,0,0,0.15); }
        h2 { margin: 10px 0; font-size: 1.5rem; color: #5D4037; font-weight: 600; }
        
        .btn-main {
            background: linear-gradient(to bottom, #7CB342, #558B2F);
            border: none;
            padding: 18px 50px;
            color: white;
            font-family: 'Fredoka', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 8px 0 #33691E, 0 15px 25px rgba(0,0,0,0.3);
            transition: all 0.1s;
            margin-top: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .btn-main:hover { filter: brightness(1.1); }
        .btn-main:active { transform: translateY(8px); box-shadow: 0 0 0 #33691E; }

.hidden { display: none !important; }

/* Level Up Toast */
        #level-toast {
            position: absolute;
            top: 40%; left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: linear-gradient(45deg, #FFD700, #FF6F00);
            padding: 20px 60px;
            border-radius: 50px;
            font-size: 3.5rem;
            font-weight: bold;
            color: white;
            border: 6px solid white;
            text-shadow: 3px 3px 0 #E65100;
            z-index: 100;
            pointer-events: none;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.8);
        }
        #level-toast.active { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }

</style>
</head>
<body>

<div id="game-frame">
    
    <header>
        <div class="hud-box">
            <span class="hud-label">Best</span>
            <span class="hud-val" id="best-score">0</span>
        </div>
        
        <div class="brand-logo">
            Powered by
            <span>Your Code Studio</span>
        </div>

<div class="hud-box" style="border-color: var(--gold); background: rgba(255,193,7,0.15);">
            <span class="hud-label">Score</span>
            <span class="hud-val" id="curr-score">0</span>
        </div>
    </header>

<div id="canvas-area">
        <canvas id="gameCanvas"></canvas>
        <div id="level-toast">LEVEL UP!</div>

<div id="start-screen" class="screen-overlay">
            <div class="card">
                <h1>Honey Rush</h1>
                <h2>ULTIMATE SEASONS</h2>
                <div style="font-size: 5rem; margin: 20px; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));">🐝</div>
                <button class="btn-main" onclick="Game.start()">PLAY NOW</button>
                <p style="font-size: 1rem; opacity: 0.8; margin-top: 15px; font-weight: bold;">Turn on Volume 🔊</p>
            </div>
        </div>

<div id="game-over-screen" class="screen-overlay hidden">
            <div class="card">
                <h1 style="color: #D32F2F;">CRASHED!</h1>
                <h2 id="final-level-text">Spring Season</h2>
                <div style="background: #EEE; border-radius: 20px; padding: 15px; margin: 20px 0; border: 3px solid #CCC;">
                    <span style="display:block; font-size:1rem; color:#888; font-weight:bold;">FINAL SCORE</span>
                    <span id="final-score" style="font-size: 3.5rem; font-weight:bold; color: #3E2723; text-shadow: 2px 2px 0 #FFF;">0</span>
                </div>
                <button class="btn-main" onclick="Game.reset()">TRY AGAIN</button>
            </div>
        </div>
    </div>

<footer>
        <div class="controls-container" id="controls">
            
            <div class="btn-control" id="btn-up">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 19V5M5 12l7-7 7 7"/>
                </svg>
            </div>
            
            <div class="btn-control" id="btn-down">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 5v14M5 12l7 7 7-7"/>
                </svg>
            </div>
        </div>
    </footer>
</div>

// --- 🔊 SOUND SYSTEM ---
    const Sound = {
        ctx: null,
        init() {
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            this.ctx = new AudioContext();
        },
        play(type) {
            if (!this.ctx) this.init();
            const osc = this.ctx.createOscillator();
            const gain = this.ctx.createGain();
            osc.connect(gain);
            gain.connect(this.ctx.destination);

const now = this.ctx.currentTime;

if (type === 'jump') {
                osc.type = 'sine';
                osc.frequency.setValueAtTime(350, now);
                osc.frequency.exponentialRampToValueAtTime(600, now + 0.1);
                gain.gain.setValueAtTime(0.3, now);
                gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now);
                osc.stop(now + 0.1);
            } 
            else if (type === 'score') {
                osc.type = 'square';
                osc.frequency.setValueAtTime(800, now);
                gain.gain.setValueAtTime(0.1, now);
                gain.gain.linearRampToValueAtTime(0.01, now + 0.1);
                osc.start(now);
                osc.stop(now + 0.1);
            }
            else if (type === 'level') {
                [400, 500, 600, 800].forEach((freq, i) => {
                    let o = this.ctx.createOscillator();
                    let g = this.ctx.createGain();
                    o.connect(g);
                    g.connect(this.ctx.destination);
                    o.type = 'triangle';
                    o.frequency.value = freq;
                    g.gain.setValueAtTime(0.1, now + i*0.1);
                    g.gain.exponentialRampToValueAtTime(0.001, now + i*0.1 + 0.15);
                    o.start(now + i*0.1);
                    o.stop(now + i*0.1 + 0.2);
                });
            }
            else if (type === 'crash') {
                osc.type = 'sawtooth';
                osc.frequency.setValueAtTime(150, now);
                osc.frequency.exponentialRampToValueAtTime(30, now + 0.4);
                gain.gain.setValueAtTime(0.4, now);
                gain.gain.linearRampToValueAtTime(0.01, now + 0.4);
                osc.start(now);
                osc.stop(now + 0.4);
            }
        }
    };

// --- 🎨 SEASON CONFIGURATION ---
    const SEASONS = [
        {
            name: 'SPRING',
            bgTop: '#81D4FA', bgBot: '#E1F5FE',
            pipeColor: '#66BB6A', pipeDetail: '#2E7D32',
            particleType: 'flower', particleColor: '#F48FB1'
        },
        {
            name: 'SUMMER',
            bgTop: '#FFEB3B', bgBot: '#FFF9C4',
            pipeColor: '#FF9800', pipeDetail: '#E65100',
            particleType: 'pollen', particleColor: '#FFF'
        },
        {
            name: 'AUTUMN',
            bgTop: '#FFCCBC', bgBot: '#D7CCC8',
            pipeColor: '#8D6E63', pipeDetail: '#3E2723',
            particleType: 'leaf', particleColor: '#FF5722'
        },
        {
            name: 'WINTER',
            bgTop: '#B3E5FC', bgBot: '#FAFAFA',
            pipeColor: '#B0BEC5', pipeDetail: '#546E7A',
            particleType: 'snow', particleColor: '#FFF'
        }
    ];

// --- 🕹️ ENGINE SETUP (High-Res/Retina Support) ---
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    let width, height;
    
    function resize() {
        // Handle Retina/High-DPI Displays
        const dpr = window.devicePixelRatio || 1;
        width = canvas.parentElement.clientWidth;
        height = canvas.parentElement.clientHeight;
        
        canvas.width = width * dpr;
        canvas.height = height * dpr;
        ctx.scale(dpr, dpr);
    }
    window.addEventListener('resize', resize);
    resize();

// --- GAME CLASSES ---

class Bee {
        constructor() {
            this.x = width * 0.2; // 20% from left
            this.y = height / 2;
            this.vy = 0;
            this.r = 20; // Slightly bigger bee
            this.frame = 0;
            this.trail = [];
        }
        update(inputVal) {
            // Physics
            this.vy += 0.35; // Gravity
            this.vy += inputVal * 1.2; // Thrust (Punchier)
            this.vy *= 0.90; // Air Friction

this.y += this.vy;

// Boundaries
            if(this.y < this.r) { this.y = this.r; this.vy = 0; }
            if(this.y > height - this.r) { this.y = height - this.r; this.vy = 0; }

// Add Trail particles
            if(this.frame % 3 === 0) {
                this.trail.push({x: this.x - 15, y: this.y + (Math.random()*10-5), alpha: 1});
            }
            this.trail.forEach(t => { t.x -= 3; t.alpha -= 0.05; });
            this.trail = this.trail.filter(t => t.alpha > 0);

this.frame++;
        }
        draw() {
            // Draw Trail
            this.trail.forEach(t => {
                ctx.fillStyle = `rgba(255, 200, 0, ${t.alpha})`;
                ctx.beginPath();
                ctx.arc(t.x, t.y, 4, 0, Math.PI*2);
                ctx.fill();
            });

ctx.save();
            ctx.translate(this.x, this.y);
            // Tilt animation
            let rot = this.vy * 0.08;
            ctx.rotate(rot);

let flap = Math.sin(this.frame * 0.8) * 12;

// Back Wing
            ctx.fillStyle = 'rgba(255,255,255,0.7)';
            ctx.beginPath();
            ctx.ellipse(2, -10, 12, 8, -0.2, 0, Math.PI*2);
            ctx.fill();

// Body
            ctx.fillStyle = '#FFC107';
            ctx.beginPath();
            ctx.ellipse(0, 0, 22, 16, 0, 0, Math.PI*2);
            ctx.fill();
            
            // Stripes
            ctx.fillStyle = '#3E2723';
            ctx.beginPath();
            ctx.rect(-6, -14, 5, 28);
            ctx.rect(6, -14, 5, 28);
            ctx.fill();

// Face
            ctx.fillStyle = 'white';
            ctx.beginPath(); ctx.arc(15, -4, 7, 0, Math.PI*2); ctx.fill();
            ctx.fillStyle = 'black';
            ctx.beginPath(); ctx.arc(17, -4, 3, 0, Math.PI*2); ctx.fill();

// Front Wing
            ctx.fillStyle = 'rgba(255,255,255,0.9)';
            ctx.beginPath();
            ctx.ellipse(0, -14 + (flap*0.3), 14, 9, -0.2, 0, Math.PI*2);
            ctx.fill();

ctx.restore();
        }
    }

class Pipe {
        constructor(x) {
            this.x = x;
            this.w = 70; // Wider pipes
            // Dynamic gap based on screen height for playability
            this.gap = Math.max(200, height * 0.28); 
            this.topH = Math.random() * (height - this.gap - 100) + 50;
            this.passed = false;
        }
        update(speed) {
            this.x -= speed;
        }
        draw(season) {
            ctx.fillStyle = season.pipeColor;
            
            // Top Pipe
            ctx.fillRect(this.x, 0, this.w, this.topH);
            // Bottom Pipe
            let botY = this.topH + this.gap;
            ctx.fillRect(this.x, botY, this.w, height - botY);

// 3D Detail
            ctx.fillStyle = season.pipeDetail;
            ctx.fillRect(this.x + this.w - 15, 0, 8, this.topH);
            ctx.fillRect(this.x + this.w - 15, botY, 8, height - botY);

// Caps
            ctx.fillRect(this.x - 6, this.topH - 25, this.w + 12, 25);
            ctx.fillRect(this.x - 6, botY, this.w + 12, 25);
        }
    }

class Particle {
        constructor(season) {
            this.x = width + Math.random() * 100;
            this.y = Math.random() * height;
            this.size = Math.random() * 6 + 3;
            this.speed = Math.random() * 4 + 1;
            this.type = season.particleType;
            this.color = season.particleColor;
            this.angle = Math.random() * Math.PI;
            this.spin = (Math.random() - 0.5) * 0.2;
        }
        update() {
            this.x -= this.speed;
            this.angle += this.spin;
            if (this.type === 'snow' || this.type === 'leaf') {
                this.y += Math.sin(this.angle) * 1 + 1; 
            }
        }
        draw() {
            ctx.fillStyle = this.color;
            ctx.save();
            ctx.translate(this.x, this.y);
            
            if (this.type === 'leaf') {
                ctx.rotate(this.angle);
                ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size);
            } else {
                ctx.beginPath();
                ctx.arc(0, 0, this.size, 0, Math.PI*2);
                ctx.fill();
            }
            ctx.restore();
        }
    }

// --- GAME STATE ---
    const Game = {
        state: 'start',
        score: 0,
        best: localStorage.getItem('ycs_honey_best') || 0,
        level: 1,
        seasonIdx: 0,
        speed: 4,
        input: 0,
        bgOffset: 0,
        
        bee: null,
        pipes: [],
        particles: [],
        
        init() {
            document.getElementById('best-score').innerText = this.best;
            this.setupControls();
            this.drawBackground(); // Initial draw
        },

setupControls() {
            const upBtn = document.getElementById('btn-up');
            const downBtn = document.getElementById('btn-down');

const startAction = (val, btn) => (e) => {
                e.preventDefault();
                this.input = val;
                btn.classList.add('pressed');
                if(this.state === 'playing' && this.bee.frame % 5 === 0) Sound.play('jump'); 
            };
            const endAction = (btn) => (e) => {
                e.preventDefault();
                this.input = 0;
                btn.classList.remove('pressed');
            };

// Touch
            upBtn.addEventListener('touchstart', startAction(-1, upBtn), {passive: false});
            upBtn.addEventListener('touchend', endAction(upBtn), {passive: false});
            downBtn.addEventListener('touchstart', startAction(1, downBtn), {passive: false});
            downBtn.addEventListener('touchend', endAction(downBtn), {passive: false});

// Mouse
            upBtn.addEventListener('mousedown', startAction(-1, upBtn));
            upBtn.addEventListener('mouseup', endAction(upBtn));
            upBtn.addEventListener('mouseleave', endAction(upBtn)); // Handle drag out
            downBtn.addEventListener('mousedown', startAction(1, downBtn));
            downBtn.addEventListener('mouseup', endAction(downBtn));
            downBtn.addEventListener('mouseleave', endAction(downBtn));

// Keyboard
            window.addEventListener('keydown', e => {
                if(e.code === 'ArrowUp') { this.input = -1; upBtn.classList.add('pressed'); }
                if(e.code === 'ArrowDown') { this.input = 1; downBtn.classList.add('pressed'); }
            });
            window.addEventListener('keyup', e => {
                this.input = 0;
                upBtn.classList.remove('pressed');
                downBtn.classList.remove('pressed');
            });
        },

start() {
            Sound.play('jump'); 
            this.state = 'playing';
            this.score = 0;
            this.level = 1;
            this.seasonIdx = 0;
            this.speed = 4; // Start slightly faster for wide screens
            
            this.bee = new Bee();
            this.pipes = [];
            this.particles = [];
            this.bgOffset = 0;
            
            document.getElementById('start-screen').classList.add('hidden');
            document.getElementById('game-over-screen').classList.add('hidden');
            document.getElementById('curr-score').innerText = '0';
            
            // Show Controls Animation
            document.getElementById('controls').classList.add('show');

this.loop();
        },

reset() {
            this.start();
        },

levelUp() {
            this.level++;
            this.seasonIdx = (this.seasonIdx + 1) % SEASONS.length;
            this.speed += 0.5;
            
            Sound.play('level');
            
            const toast = document.getElementById('level-toast');
            toast.innerText = `LEVEL ${this.level}`;
            toast.classList.add('active');
            setTimeout(() => toast.classList.remove('active'), 1500);
        },

gameOver() {
            this.state = 'over';
            Sound.play('crash');
            
            // Screen Shake
            const frame = document.getElementById('game-frame');
            frame.classList.add('shake-active');
            setTimeout(() => frame.classList.remove('shake-active'), 400);
            
            // Hide controls
            document.getElementById('controls').classList.remove('show');
            document.getElementById('game-over-screen').classList.remove('hidden');
            
            document.getElementById('final-score').innerText = this.score;
            document.getElementById('final-level-text').innerText = `${SEASONS[this.seasonIdx].name} SEASON`;

if(this.score > this.best) {
                this.best = this.score;
                localStorage.setItem('ycs_honey_best', this.best);
                document.getElementById('best-score').innerText = this.best;
            }
        },

drawBackground() {
            const season = SEASONS[this.seasonIdx];
            const grd = ctx.createLinearGradient(0, 0, 0, height);
            grd.addColorStop(0, season.bgTop);
            grd.addColorStop(1, season.bgBot);
            ctx.fillStyle = grd;
            ctx.fillRect(0, 0, width, height);

// Parallax Clouds/Hills effect
            ctx.fillStyle = 'rgba(255,255,255,0.15)';
            for(let i=0; i<5; i++) {
                let cx = ((i * 300) - this.bgOffset) % (width + 300);
                if(cx < -150) cx += width + 300; // Loop back
                ctx.beginPath();
                ctx.arc(cx, height - 100 + (i%2*50), 100, 0, Math.PI*2);
                ctx.fill();
            }

// Sun/Moon
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.beginPath();
            ctx.arc(width * 0.8, 100, 60, 0, Math.PI*2);
            ctx.fill();
        },

update() {
            this.bgOffset += this.speed * 0.3; // Parallax movement

// Spawn pipes (distance based on screen width so it's fair)
            let pipeSpacing = width < 600 ? 100 : 80; 
            if(this.bee.frame % pipeSpacing === 0) {
                this.pipes.push(new Pipe(width));
            }

// Spawn Particles
            if(this.bee.frame % 8 === 0) {
                this.particles.push(new Particle(SEASONS[this.seasonIdx]));
            }

this.bee.update(this.input);

// Update Pipes & Collision
            for(let i = 0; i < this.pipes.length; i++) {
                let p = this.pipes[i];
                p.update(this.speed);

// Better Collision Box
                let beeRadius = this.bee.r - 4; // Tolerant hitbox
                let hitX = this.bee.x + beeRadius > p.x && this.bee.x - beeRadius < p.x + p.w;
                let hitY = this.bee.y - beeRadius < p.topH || this.bee.y + beeRadius > p.topH + p.gap;
                
                if(hitX && hitY) {
                    this.gameOver();
                }

// Scoring
                if(!p.passed && p.x + p.w < this.bee.x) {
                    this.score++;
                    p.passed = true;
                    document.getElementById('curr-score').innerText = this.score;
                    Sound.play('score');

if(this.score > 0 && this.score % 5 === 0) {
                        this.levelUp();
                    }
                }

if(p.x < -150) {
                    this.pipes.splice(i, 1);
                    i--;
                }
            }

// Update Particles
            for(let i=0; i<this.particles.length; i++) {
                this.particles[i].update();
                if(this.particles[i].x < -50 || this.particles[i].y > height + 50) {
                    this.particles.splice(i, 1);
                    i--;
                }
            }
        },

draw() {
            this.drawBackground();
            const season = SEASONS[this.seasonIdx];

// Giant Season Text in Background
            ctx.fillStyle = 'rgba(0,0,0,0.04)';
            ctx.font = 'bold 12vw Fredoka';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(season.name, width/2, height/2);

// Draw objects
            this.pipes.forEach(p => p.draw(season));
            this.particles.forEach(p => p.draw());
            this.bee.draw();
        },

loop() {
            if(this.state === 'playing') {
                this.update();
                this.draw();
                requestAnimationFrame(() => this.loop());
            }
        }
    };

window.onload = () => Game.init();

</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.