const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { // Player properties (Flappy Bird) let bird = { x: 150, y: 300, w: 34, h: 24, vy: 0, gravity: 0.4, lift: -7, alive: true, lasers: [], wingAngle: 0 }; // Game state let gameState = 'playing'; let score = 0; let pipes = []; let frameCounter = 0; let worldScore = [0, 0]; // Pipe configuration let pipeWidth = 60; let pipeGap = 150; let pipeSpeed = 3; // World 1 Boss configuration let boss1 = { x: 700, y: 300, w: 80, h: 100, vy: 0, gravity: 0.2, lift: -3, alive: false, health: 10, scoreThreshold: 10, moveTimer: 0, attackTimer: 0, projectiles: [] }; // World 2 Boss configuration let boss2 = { x: 700, y: 300, w: 80, h: 100, vy: 0, gravity: 0.2, lift: -3, alive: false, health: 10, scoreThreshold: 10, moveTimer: 0, attackTimer: 0, projectiles: [] }; // Current world and boss reference let currentWorld = 1; let boss = boss1; // Initialize first pipes for (let i = 0; i < 3; i++) { pipes.push({ x: 400 + i * 200, topHeight: p.random(80, 300), scored: false, world: 1 }); } let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; const getContainer = () => document.getElementById("renderDiv"); const computeLayout = () => { const container = getContainer(); const width = Math.max(1, container ? container.clientWidth : window.innerWidth); const height = Math.max(1, container ? container.clientHeight : window.innerHeight); const fitScale = Math.max( 0.1, Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT) || 1 ); scaleFactor = fitScale; offsetX = (width - DESIGN_WIDTH * scaleFactor) / 2; offsetY = (height - DESIGN_HEIGHT * scaleFactor) / 2; return { width, height }; }; const resizeCanvasToContainer = () => { const { width, height } = computeLayout(); p.resizeCanvas(width, height); }; const toDesignSpace = (clientX, clientY) => ({ x: (clientX - offsetX) / scaleFactor, y: (clientY - offsetY) / scaleFactor, }); // Input handling let keys = {}; let lastTime = 0; p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } // Keyboard events window.addEventListener('keydown', (e) => { if (e.key === ' ' && gameState === 'playing' && bird.alive) { bird.vy = bird.lift; } if (e.key === 'x' && gameState === 'playing' && bird.alive) { bird.lasers.push({ x: bird.x + bird.w, y: bird.y + bird.h/2, vx: 8 }); } if (e.key.toLowerCase() === 'r') { // Reset game bird.y = 300; bird.vy = 0; bird.alive = true; score = 0; pipes = []; frameCounter = 0; boss1.alive = false; boss1.health = 10; boss1.x = 700; boss1.y = 300; boss1.projectiles = []; bird.lasers = []; boss2.alive = false; boss2.health = 10; boss2.x = 700; boss2.y = 300; boss2.projectiles = []; bird.lasers = []; currentWorld = 1; boss = boss1; for (let i = 0; i < 3; i++) { pipes.push({ x: 400 + i * 200, topHeight: p.random(80, 300), scored: false, world: currentWorld }); } gameState = 'playing'; } }); window.addEventListener('keyup', (e) => { keys[e.key.toLowerCase()] = false; }); teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; // Update bird physics const updateBird = () => { if (bird.alive && gameState === 'playing') { bird.vy += bird.gravity; bird.y += bird.vy; // Check boundaries (with buffer) if (bird.y < -10 || bird.y > DESIGN_HEIGHT + 10) { bird.alive = false; gameState = 'gameOver'; } } }; // Update bird animation const updateBirdAnimation = () => { if (bird.alive && gameState === 'playing') { // Update wing flap bird.wingAngle = p.sin(p.frameCount * 0.5) * 0.3; } }; // Update pipes const updatePipes = () => { if (bird.alive && gameState === 'playing') { frameCounter++; // Check for world transition if (score >= boss.scoreThreshold && !boss.alive) { if (currentWorld === 1) { currentWorld = 2; boss = boss2; score = 0; pipes = []; frameCounter = 0; } else { boss.alive = true; pipes = []; // Clear pipes when boss appears } } // Only update pipes if boss is not alive if (!boss.alive) { // Move pipes for (let pipe of pipes) { pipe.x -= pipeSpeed; // Check if bird passed the pipe if (!pipe.scored && pipe.x + pipeWidth < bird.x) { pipe.scored = true; score++; } // Check collision with bird (no buffer) if (bird.x < pipe.x + pipeWidth && bird.x + bird.w > pipe.x && (bird.y < pipe.topHeight || bird.y + bird.h > pipe.topHeight + pipeGap)) { bird.alive = false; gameState = 'gameOver'; } } // Remove off-screen pipes and add new ones pipes = pipes.filter(pipe => pipe.x > -pipeWidth); if (pipes.length < 3 && frameCounter % 90 === 0) { pipes.push({ x: 800, topHeight: p.random(80, 300), scored: false, world: currentWorld }); } } } }; // Update boss const updateBoss = () => { if (boss.alive && bird.alive && gameState === 'playing') { boss.moveTimer++; boss.attackTimer++; // Boss movement (simple up and down) boss.vy += boss.gravity; boss.y += boss.vy; // Bounce off top and bottom if (boss.y < 50 || boss.y > DESIGN_HEIGHT - 50) { boss.vy *= -0.8; } // Periodic lift if (boss.moveTimer % 60 === 0) { boss.vy = boss.lift; } // Shoot projectiles if (boss.attackTimer % 90 === 0) { boss.projectiles.push({ x: boss.x - 40, y: boss.y, vx: -5, vy: (bird.y - boss.y) * 0.02, size: 10 }); } // Update projectiles for (let i = boss.projectiles.length - 1; i >= 0; i--) { let proj = boss.projectiles[i]; proj.x += proj.vx; proj.y += proj.vy; // Check collision with bird if (p.dist(bird.x + bird.w/2, bird.y + bird.h/2, proj.x, proj.y) < proj.size + 10) { bird.alive = false; gameState = 'gameOver'; } // Remove off-screen projectiles if (proj.x < -50) { boss.projectiles.splice(i, 1); } } // Check collision with bird if (p.dist(bird.x + bird.w/2, bird.y + bird.h/2, boss.x, boss.y) < 50) { boss.health--; if (boss.health <= 0) { boss.alive = false; score += 50; // Bonus points for defeating boss } } } }; // Draw bird const drawBird = () => { p.push(); p.translate(bird.x, bird.y); // Add rotation based on velocity for flying effect let angle = p.atan2(bird.vy, 8); p.rotate(angle); // Bird body p.fill(255, 150, 0); p.ellipse(0, 0, bird.w, bird.h); // Animated wing p.push(); p.fill(255, 130, 0); let wingFlap = p.sin(p.frameCount * 0.5) * 8; p.rotate(wingFlap * 0.2); p.ellipse(-5, wingFlap, 18, 12); p.pop(); // Eye p.fill(255); p.ellipse(8, -5, 8, 8); p.fill(0); p.ellipse(9, -5, 4, 4); // Beak p.fill(255, 150, 0); p.triangle(15, 0, 22, 3, 15, 6); p.pop(); // Draw and update lasers for (let i = bird.lasers.length - 1; i >= 0; i--) { let laser = bird.lasers[i]; laser.x += laser.vx; // Draw laser p.stroke(0, 255, 0); p.strokeWeight(3); p.line(laser.x, laser.y, laser.x + 20, laser.y); // Check collision with boss if (boss.alive && p.dist(laser.x + 10, laser.y, boss.x, boss.y) < 50) { boss.health--; if (boss.health <= 0) { boss.alive = false; score += 50; } bird.lasers.splice(i, 1); } // Remove off-screen lasers if (laser.x > DESIGN_WIDTH) { bird.lasers.splice(i, 1); } } p.noStroke(); }; // Draw pipes (Flappy Bird style) const drawPipes = () => { for (let pipe of pipes) { // Different colors per world if (pipe.world === 1) { p.fill(0, 120, 0); p.stroke(0, 80, 0); } else { p.fill(0, 100, 100); p.stroke(0, 60, 60); } p.strokeWeight(3); // Top pipe p.rect(pipe.x, 0, pipeWidth, pipe.topHeight); p.rect(pipe.x - 5, pipe.topHeight - 25, pipeWidth + 10, 25); // Bottom pipe p.rect(pipe.x, pipe.topHeight + pipeGap, pipeWidth, DESIGN_HEIGHT - pipe.topHeight - pipeGap); p.rect(pipe.x - 5, pipe.topHeight + pipeGap, pipeWidth + 10, 25); // Pipe highlights if (pipe.world === 1) { p.stroke(80, 180, 80); } else { p.stroke(80, 150, 150); } p.strokeWeight(4); p.line(pipe.x + 5, 0, pipe.x + 5, pipe.topHeight - 25); p.line(pipe.x + 5, pipe.topHeight + pipeGap + 25, pipe.x + 5, DESIGN_HEIGHT); } p.noStroke(); }; // Draw boss const drawBoss = () => { if (boss.alive) { p.push(); // Different colors for different worlds if (currentWorld === 1) { // World 1 boss (red) p.fill(150, 0, 0); p.stroke(100, 0, 0); } else { // World 2 boss (purple) p.fill(100, 0, 150); p.stroke(50, 0, 100); } p.strokeWeight(3); p.ellipse(boss.x, boss.y, boss.w, boss.h); // Boss crown p.fill(255, 215, 0); p.triangle(boss.x - 30, boss.y - boss.h/2, boss.x - 15, boss.y - boss.h/2 - 20, boss.x, boss.y - boss.h/2); p.triangle(boss.x, boss.y - boss.h/2 - 20, boss.x + 15, boss.y - boss.h/2, boss.x + 30, boss.y - boss.h/2); p.triangle(boss.x - 15, boss.y - boss.h/2 - 20, boss.x, boss.y - boss.h/2 - 30, boss.x + 15, boss.y - boss.h/2 - 20); // Angry eyes p.fill(255); p.ellipse(boss.x - 15, boss.y - 10, 20, 25); p.ellipse(boss.x + 15, boss.y - 10, 20, 25); p.fill(255, 0, 0); p.ellipse(boss.x - 15, boss.y - 8, 12, 15); p.ellipse(boss.x + 15, boss.y - 8, 12, 15); // Angry beak p.fill(255, 100, 0); p.triangle(boss.x - 10, boss.y + 10, boss.x, boss.y + 20, boss.x + 10, boss.y + 10); // Health bar p.noStroke(); p.fill(255, 0, 0); p.rect(boss.x - 40, boss.y - boss.h/2 - 45, 80, 8); p.fill(0, 255, 0); p.rect(boss.x - 40, boss.y - boss.h/2 - 45, (boss.health / 10) * 80, 8); // Draw projectiles p.fill(currentWorld === 1 ? 255 : 200, 0, currentWorld === 1 ? 0 : 150); for (let proj of boss.projectiles) { p.ellipse(proj.x, proj.y, proj.size * 2); } p.pop(); } }; p.draw = () => { if (gameState === 'gameOver' || gameState === 'timeUp') { p.background(0); p.fill(255, 0, 0); p.textAlign(p.CENTER); p.textSize(32); p.text(gameState === 'gameOver' ? 'GAME OVER' : 'TIME UP', DESIGN_WIDTH/2, DESIGN_HEIGHT/2); p.textSize(16); p.text('Press R to restart', DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 40); return; } if (gameState === 'paused') { p.background(135, 206, 235); p.fill(0, 0, 0, 150); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(255); p.textAlign(p.CENTER); p.textSize(32); p.text('PAUSED', DESIGN_WIDTH/2, DESIGN_HEIGHT/2); p.textSize(16); p.text('Press S to resume', DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 40); return; } // Sky gradient background (changes per world) for (let i = 0; i <= DESIGN_HEIGHT; i++) { let inter = p.map(i, 0, DESIGN_HEIGHT, 0, 1); let c; if (currentWorld === 1) { c = p.lerpColor(p.color(135, 206, 235), p.color(255, 255, 200), inter); } else { c = p.lerpColor(p.color(255, 100, 100), p.color(255, 200, 100), inter); } p.stroke(c); p.line(0, i, DESIGN_WIDTH, i); } // Clouds p.fill(255, 255, 255, 160); p.noStroke(); let cloudX = (frameCounter * 0.8) % (DESIGN_WIDTH + 100) - 100; p.ellipse(cloudX, 80, 55, 35); p.ellipse(cloudX + 25, 80, 75, 45); p.ellipse(cloudX + 60, 80, 55, 35); cloudX = ((frameCounter * 0.8) + 350) % (DESIGN_WIDTH + 100) - 100; p.ellipse(cloudX, 180, 45, 30); p.ellipse(cloudX + 20, 180, 65, 40); p.ellipse(cloudX + 50, 180, 45, 30); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); if (gameState === 'playing') { updateBird(); updateBirdAnimation(); updatePipes(); updateBoss(); } drawPipes(); drawBird(); drawBoss(); p.pop(); // Score display p.fill(255); p.textAlign(p.CENTER); p.textSize(36); p.text(score, DESIGN_WIDTH/2, 50); // World display p.textSize(24); p.text(`World ${currentWorld}`, DESIGN_WIDTH/2, 90); // Boss warning if (boss.alive) { p.fill(255, 0, 0); p.textSize(24); p.text('BOSS FIGHT!', DESIGN_WIDTH/2, 130); } else if (score >= boss.scoreThreshold - 2 && score < boss.scoreThreshold) { p.fill(255, 255, 0); p.textSize(20); p.text('Boss approaching!', DESIGN_WIDTH/2, 130); } // World transition message if (currentWorld === 2 && frameCounter < 180) { p.fill(0, 255, 0); p.textSize(24); p.text('WORLD 2!', DESIGN_WIDTH/2, DESIGN_HEIGHT/2); } // Instructions p.fill(255); p.textAlign(p.CENTER); p.textSize(16); if (currentWorld === 1 && frameCounter < 180) { p.text('Press SPACE to flap! Press X to shoot lasers! Defeat the boss at 10 points!', DESIGN_WIDTH/2, DESIGN_HEIGHT - 50); } else if (currentWorld === 2 && frameCounter < 180) { p.text('New world, new challenges! Press X to shoot lasers! Boss at 10 points!', DESIGN_WIDTH/2, DESIGN_HEIGHT - 50); } // Game over message if (gameState === 'gameOver') { p.fill(0, 0, 0, 150); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(255); p.textAlign(p.CENTER); p.textSize(48); p.text('GAME OVER', DESIGN_WIDTH/2, DESIGN_HEIGHT/2 - 50); p.textSize(24); p.text(`Score: ${score}`, DESIGN_WIDTH/2, DESIGN_HEIGHT/2); p.text('Press R to restart', DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 50); } }; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; }; const instance = new window.p5(sketch, "renderDiv"); window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } };

p5.js Sketch

How to play