const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let resizeObserver = null; let resizeHandler = null; let teardown = null; // Obby variables let player; let platforms = []; let obstacles = []; let collectibles = []; let cameraX = 0; let gameState = 'playing'; // 'playing', 'win', 'lose' let gravity = 0.5; let jumpPower = -12; let moveSpeed = 5; let keys = {}; // Level design const levelWidth = 5000; const groundY = DESIGN_HEIGHT - 50; 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, }); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.noStroke(); const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Camera follow player cameraX = player.x - DESIGN_WIDTH / 2; cameraX = p.constrain(cameraX, 0, levelWidth - DESIGN_WIDTH); p.translate(-cameraX, 0); // Draw background gradient sky for (let i = 0; i <= DESIGN_HEIGHT; i++) { let inter = p.map(i, 0, DESIGN_HEIGHT, 0, 1); let c = p.lerpColor(p.color(15, 23, 42), p.color(30, 58, 138), inter); p.stroke(c); p.line(0, i, levelWidth, i); } p.noStroke(); // Draw ground p.fill(34, 197, 94); p.rect(0, groundY, levelWidth, DESIGN_HEIGHT - groundY); // Draw platforms p.fill(245, 158, 11); for (let plat of platforms) { p.rect(plat.x, plat.y, plat.w, plat.h); } // Draw obstacles (spikes) p.fill(239, 68, 68); for (let obs of obstacles) { // Triangle spike p.triangle(obs.x, obs.y, obs.x + obs.w, obs.y, obs.x + obs.w/2, obs.y - obs.h); } // Draw collectibles (coins) p.fill(251, 191, 36); for (let coin of collectibles) { if (coin.collected) continue; p.ellipse(coin.x + coin.size/2, coin.y + coin.size/2, coin.size); } // Update and draw player if (gameState === 'playing') { // Input if (keys['ArrowLeft'] || keys['a']) player.vx = -moveSpeed; else if (keys['ArrowRight'] || keys['d']) player.vx = moveSpeed; else player.vx *= 0.8; // friction // Jump if ((keys['ArrowUp'] || keys['w'] || keys[' ']) && player.onGround) { player.vy = jumpPower; player.onGround = false; } // Physics player.vy += gravity; player.x += player.vx; player.y += player.vy; // Platform collision player.onGround = false; for (let plat of platforms) { if (player.x + player.size > plat.x && player.x < plat.x + plat.w && player.y + player.size > plat.y && player.y < plat.y + plat.h) { // Landing on top if (player.vy > 0 && player.y < plat.y) { player.y = plat.y - player.size; player.vy = 0; player.onGround = true; } // Hit from side else if (player.vx > 0 && player.x < plat.x) { player.x = plat.x - player.size; player.vx = 0; } else if (player.vx < 0 && player.x + player.size > plat.x + plat.w) { player.x = plat.x + plat.w; player.vx = 0; } } } // Ground collision if (player.y + player.size > groundY) { player.y = groundY - player.size; player.vy = 0; player.onGround = true; } // Boundaries if (player.x < 0) player.x = 0; if (player.x > levelWidth - player.size) { player.x = levelWidth - player.size; gameState = 'win'; } // Obstacle collision for (let obs of obstacles) { if (player.x + player.size > obs.x && player.x < obs.x + obs.w && player.y + player.size > obs.y - obs.h && player.y < obs.y) { gameState = 'lose'; } } // Collectible collision for (let coin of collectibles) { if (!coin.collected && p.dist(player.x + player.size/2, player.y + player.size/2, coin.x + coin.size/2, coin.y + coin.size/2) < player.size) { coin.collected = true; } } // Fall off screen if (player.y > DESIGN_HEIGHT) { gameState = 'lose'; } } // Draw player p.fill(59, 130, 246); p.rect(player.x, player.y, player.size, player.size); // Draw UI p.resetMatrix(); p.fill(255); p.textSize(20); p.text(`State: ${gameState.toUpperCase()}`, 20, 30); let collectedCount = collectibles.filter(c => c.collected).length; p.text(`Coins: ${collectedCount}/${collectibles.length}`, 20, 60); p.pop(); }; // Keyboard input p.keyPressed = () => { keys[p.key] = true; if (p.key === ' ') keys[' '] = true; if (p.key.toLowerCase() === 'w') keys['w'] = true; if (p.key.toLowerCase() === 'a') keys['a'] = true; if (p.key.toLowerCase() === 'd') keys['d'] = true; }; p.keyReleased = () => { keys[p.key] = false; if (p.key === ' ') keys[' '] = true; if (p.key.toLowerCase() === 'w') keys['w'] = false; if (p.key.toLowerCase() === 'a') keys['a'] = false; if (p.key.toLowerCase() === 'd') keys['d'] = false; }; // Initialize in setup p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.noStroke(); p.textAlign(p.LEFT, p.TOP); // Initialize player player = { x: 50, y: groundY - 40, vx: 0, vy: 0, size: 40, onGround: true }; // Create platforms (simple obby level) platforms = [ // Starting platform {x: 0, y: groundY - 20, w: 200, h: 20}, // Jump to first platform {x: 250, y: groundY - 100, w: 150, h: 20}, // Longer jump {x: 450, y: groundY - 150, w: 100, h: 20}, // Moving platform (simple static for now) {x: 600, y: groundY - 80, w: 120, h: 20}, // Gap with small platforms {x: 800, y: groundY - 120, w: 80, h: 20}, {x: 950, y: groundY - 120, w: 80, h: 20}, {x: 1100, y: groundY - 50, w: 150, h: 20}, // Mid section platforms {x: 1300, y: groundY - 200, w: 200, h: 20}, {x: 1550, y: groundY - 100, w: 150, h: 20}, {x: 1750, y: groundY - 20, w: 200, h: 20}, {x: 2000, y: groundY - 150, w: 120, h: 20}, {x: 2200, y: groundY - 80, w: 180, h: 20}, {x: 2450, y: groundY - 120, w: 100, h: 20}, {x: 2600, y: groundY - 200, w: 150, h: 20}, {x: 2800, y: groundY - 50, w: 200, h: 20}, {x: 3100, y: groundY - 180, w: 120, h: 20}, {x: 3300, y: groundY - 100, w: 160, h: 20}, {x: 3500, y: groundY - 20, w: 200, h: 20}, {x: 3800, y: groundY - 140, w: 180, h: 20}, {x: 4100, y: groundY - 60, w: 150, h: 20}, // Final platforms {x: 4400, y: groundY - 200, w: 200, h: 20}, {x: 4650, y: groundY - 100, w: 150, h: 20}, {x: 4850, y: groundY - 20, w: levelWidth - 4850, h: 20} ]; // Obstacles (spikes) obstacles = [ // Early section {x: 300, y: groundY - 20, w: 30, h: 30}, {x: 350, y: groundY - 20, w: 30, h: 30}, {x: 400, y: groundY - 20, w: 30, h: 30}, // First platform {x: 500, y: groundY - 150, w: 25, h: 25}, {x: 520, y: groundY - 150, w: 25, h: 25}, // Second platform {x: 670, y: groundY - 80, w: 30, h: 30}, // Gap section {x: 850, y: groundY - 120, w: 30, h: 30}, {x: 900, y: groundY - 120, w: 30, h: 30}, {x: 1050, y: groundY - 50, w: 25, h: 25}, {x: 1075, y: groundY - 50, w: 25, h: 25}, // Mid section {x: 1400, y: groundY - 200, w: 40, h: 40}, {x: 1450, y: groundY - 200, w: 40, h: 40}, {x: 1600, y: groundY - 100, w: 30, h: 30}, {x: 1850, y: groundY - 20, w: 35, h: 35}, {x: 1950, y: groundY - 20, w: 35, h: 35}, {x: 2050, y: groundY - 20, w: 35, h: 35}, {x: 2150, y: groundY - 150, w: 30, h: 30}, {x: 2250, y: groundY - 80, w: 35, h: 35}, {x: 2350, y: groundY - 80, w: 35, h: 35}, {x: 2500, y: groundY - 120, w: 30, h: 30}, {x: 2650, y: groundY - 200, w: 40, h: 40}, {x: 2750, y: groundY - 200, w: 40, h: 40}, {x: 2900, y: groundY - 50, w: 30, h: 30}, {x: 3050, y: groundY - 180, w: 35, h: 35}, {x: 3200, y: groundY - 100, w: 30, h: 30}, {x: 3350, y: groundY - 100, w: 30, h: 30}, {x: 3450, y: groundY - 20, w: 35, h: 35}, {x: 3550, y: groundY - 20, w: 35, h: 35}, {x: 3850, y: groundY - 140, w: 30, h: 30}, {x: 4150, y: groundY - 60, w: 35, h: 35}, {x: 4250, y: groundY - 60, w: 35, h: 35}, // Final section {x: 4500, y: groundY - 200, w: 40, h: 40}, {x: 4900, y: groundY - 20, w: 35, h: 35} ]; // Collectibles (coins) collectibles = [ // Starting area {x: 100, y: groundY - 80, size: 20, collected: false}, {x: 150, y: groundY - 60, size: 20, collected: false}, // First jump {x: 300, y: groundY - 150, size: 20, collected: false}, {x: 350, y: groundY - 120, size: 20, collected: false}, // Second platform {x: 500, y: groundY - 250, size: 20, collected: false}, {x: 550, y: groundY - 200, size: 20, collected: false}, // Third platform {x: 650, y: groundY - 130, size: 20, collected: false}, // Gap section {x: 750, y: groundY - 200, size: 20, collected: false}, {x: 820, y: groundY - 160, size: 20, collected: false}, {x: 900, y: groundY - 160, size: 20, collected: false}, {x: 980, y: groundY - 160, size: 20, collected: false}, // Mid section {x: 1050, y: groundY - 100, size: 20, collected: false}, {x: 1200, y: groundY - 100, size: 20, collected: false}, {x: 1250, y: groundY - 80, size: 20, collected: false}, // Extended mid section {x: 1350, y: groundY - 250, size: 20, collected: false}, {x: 1420, y: groundY - 220, size: 20, collected: false}, {x: 1600, y: groundY - 150, size: 20, collected: false}, {x: 1650, y: groundY - 130, size: 20, collected: false}, {x: 1800, y: groundY - 80, size: 20, collected: false}, {x: 1900, y: groundY - 60, size: 20, collected: false}, {x: 2100, y: groundY - 80, size: 20, collected: false}, {x: 2200, y: groundY - 60, size: 20, collected: false}, {x: 2300, y: groundY - 200, size: 20, collected: false}, {x: 2400, y: groundY - 120, size: 20, collected: false}, {x: 2500, y: groundY - 160, size: 20, collected: false}, {x: 2650, y: groundY - 240, size: 20, collected: false}, {x: 2750, y: groundY - 240, size: 20, collected: false}, {x: 2900, y: groundY - 100, size: 20, collected: false}, {x: 3050, y: groundY - 220, size: 20, collected: false}, {x: 3200, y: groundY - 140, size: 20, collected: false}, {x: 3350, y: groundY - 140, size: 20, collected: false}, {x: 3450, y: groundY - 60, size: 20, collected: false}, {x: 3550, y: groundY - 60, size: 20, collected: false}, {x: 3650, y: groundY - 60, size: 20, collected: false}, {x: 3850, y: groundY - 180, size: 20, collected: false}, {x: 3950, y: groundY - 180, size: 20, collected: false}, {x: 4150, y: groundY - 100, size: 20, collected: false}, {x: 4250, y: groundY - 100, size: 20, collected: false}, // Final section {x: 4500, y: groundY - 240, size: 20, collected: false}, {x: 4550, y: groundY - 240, size: 20, collected: false}, {x: 4700, y: groundY - 140, size: 20, collected: false}, {x: 4800, y: groundY - 80, size: 20, collected: false}, {x: 4900, y: groundY - 60, size: 20, collected: false}, {x: 4950, y: groundY - 60, size: 20, collected: false} ]; const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; }; const instance = new window.p5(sketch, "renderDiv"); // No snowflake initialization needed for obby window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } };

p5.js Sketch

How to play