const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let player; let platforms = []; let obstacles = []; let collectibles = []; let gameState = 'playing'; // 'playing', 'win', 'lose' let score = 0; let currentLevel = 1; let levelComplete = false; 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, }); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); // Initialize game player = {x: 50, y: DESIGN_HEIGHT - 100, vx: 0, vy: 0, grounded: true, width: 20, height: 25}; currentLevel = 1; generateLevel(currentLevel); 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 = () => { if (gameState === 'playing') { p.background(135, 206, 235); // Sky blue // Draw score and level p.fill(0); p.textAlign(p.LEFT); p.textSize(20); p.text(`Score: ${score} | Level: ${currentLevel}/6`, 20, 30); } else { p.background(100); } p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); if (gameState === 'playing') { // Draw platforms platforms.forEach(platform => { p.fill(139, 69, 19); // Brown for wood p.noStroke(); p.rect(platform.x, platform.y, platform.w, platform.h); }); // Draw obstacles (spikes) obstacles.forEach(obstacle => { p.fill(255, 0, 0); // Red spikes p.noStroke(); for (let i = 0; i < obstacle.w / 15; i++) { p.triangle( obstacle.x + i * 15, obstacle.y + obstacle.h, obstacle.x + i * 15 + 7.5, obstacle.y, obstacle.x + i * 15 + 15, obstacle.y + obstacle.h ); } }); // Draw collectibles collectibles.forEach(item => { if (item.collected) return; p.fill(255, 215, 0); // Gold p.noStroke(); p.ellipse(item.x, item.y, 20, 20); p.fill(0); p.textAlign(p.CENTER); p.textSize(16); p.text('★', item.x, item.y + 4); }); // Draw player p.fill(0, 0, 255); // Blue square player p.noStroke(); p.rect(player.x - player.width/2, player.y - player.height/2, player.width, player.height); // Update player updatePlayer(); // Check win condition if (collectibles.every(item => item.collected)) { if (currentLevel < 6) { currentLevel++; player.x = 50; player.y = DESIGN_HEIGHT - 100; player.vx = 0; player.vy = 0; player.grounded = true; score += 100; // Bonus for completing level generateLevel(currentLevel); } else { gameState = 'win'; } } } else if (gameState === 'win') { p.fill(0, 0, 0, 200); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(255); p.textAlign(p.CENTER); p.textSize(32); p.text('You Win! Great job completing all levels!', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(16); p.text('Press R to play again', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); } p.pop(); }; p.keyPressed = () => { if (p.keyCode === p.LEFT_ARROW) { player.vx = -5; } else if (p.keyCode === p.RIGHT_ARROW) { player.vx = 5; } else if (p.keyCode === p.UP_ARROW || p.keyCode === 32) { // Spacebar also jumps if (player.grounded) { player.vy = -15; player.grounded = false; } } else if (p.key === 'r' || p.key === 'R') { if (gameState === 'win') { gameState = 'playing'; player.x = 50; player.y = DESIGN_HEIGHT - 100; player.vx = 0; player.vy = 0; player.grounded = true; score = 0; currentLevel = 1; levelComplete = false; collectibles.forEach(item => item.collected = false); generateLevel(1); } else if (gameState === 'playing' || gameState === 'lose') { gameState = 'playing'; player.x = 50; player.y = DESIGN_HEIGHT - 100; player.vx = 0; player.vy = 0; player.grounded = true; collectibles.forEach(item => item.collected = false); generateLevel(currentLevel); } } }; p.keyReleased = () => { if (p.keyCode === p.LEFT_ARROW || p.keyCode === p.RIGHT_ARROW) { player.vx = 0; } }; const updatePlayer = () => { // Apply gravity player.vy += 0.5; player.x += player.vx; player.y += player.vy; // Boundaries if (player.x < player.width/2) player.x = player.width/2; if (player.x > DESIGN_WIDTH - player.width/2) player.x = DESIGN_WIDTH - player.width/2; if (player.y > DESIGN_HEIGHT) { gameState = 'lose'; player.y = DESIGN_HEIGHT; } else if (gameState === 'lose') { // Handle lose state - restart level after brief moment if (p.frameCount % 120 === 0) { // Restart every 2 seconds gameState = 'playing'; player.x = 50; player.y = DESIGN_HEIGHT - 100; player.vx = 0; player.vy = 0; player.grounded = true; collectibles.forEach(item => item.collected = false); generateLevel(currentLevel); } } player.grounded = false; // Update moving platforms platforms.forEach(platform => { if (platform.moving) { platform.x += platform.speed; if (platform.x <= platform.minX) { platform.x = platform.minX; platform.speed = Math.abs(platform.speed); } else if (platform.x >= platform.maxX) { platform.x = platform.maxX; platform.speed = -Math.abs(platform.speed); } } }); // Platform collisions (from bottom) platforms.forEach(platform => { const playerBottom = player.y + player.height/2; const playerTop = player.y - player.height/2; const playerLeft = player.x - player.width/2; const playerRight = player.x + player.width/2; if (playerLeft < platform.x + platform.w && playerRight > platform.x && playerBottom > platform.y && playerBottom < platform.y + platform.h + player.vy && player.vy > 0) { player.y = platform.y - player.height/2; player.vy = 0; player.grounded = true; } }); // Side collisions with platforms platforms.forEach(platform => { const playerBottom = player.y + player.height/2; const playerTop = player.y - player.height/2; const playerLeft = player.x - player.width/2; const playerRight = player.x + player.width/2; if (playerBottom > platform.y && playerTop < platform.y + platform.h && ((playerLeft < platform.x && playerRight > platform.x && player.vx > 0) || (playerRight > platform.x + platform.w && playerLeft < platform.x + platform.w && player.vx < 0))) { if (player.vx > 0) player.x = platform.x - player.width/2; else player.x = platform.x + platform.w + player.width/2; player.vx = 0; } }); // Obstacle collisions (spikes) obstacles.forEach(obstacle => { const playerLeft = player.x - player.width/2; const playerRight = player.x + player.width/2; const playerTop = player.y - player.height/2; const playerBottom = player.y + player.height/2; if (playerRight > obstacle.x && playerLeft < obstacle.x + obstacle.w && playerBottom > obstacle.y && playerTop < obstacle.y + obstacle.h) { gameState = 'lose'; } }); // Collectible collisions collectibles.forEach(item => { if (!item.collected && p.dist(player.x, player.y, item.x, item.y) < 25) { item.collected = true; score += 10; // Respawn player at start if needed if (collectibles.every(c => c.collected)) { player.x = 50; player.y = 200; } } }); }; const generateLevel = (level = 1) => { if (level === 1) { platforms = [ // Ground {x: 0, y: DESIGN_HEIGHT - 50, w: DESIGN_WIDTH, h: 50}, // Platform 1 {x: 200, y: DESIGN_HEIGHT - 150, w: 100, h: 20}, // Platform 2 {x: 400, y: DESIGN_HEIGHT - 250, w: 100, h: 20}, // Platform 3 {x: 600, y: DESIGN_HEIGHT - 200, w: 100, h: 20}, // Platform 4 {x: 300, y: DESIGN_HEIGHT - 350, w: 150, h: 20}, // Final platform {x: 500, y: 100, w: 200, h: 20} ]; obstacles = [ // Spikes under platform 2 {x: 400, y: DESIGN_HEIGHT - 230, w: 100, h: 20}, // Spikes under platform 3 {x: 600, y: DESIGN_HEIGHT - 180, w: 100, h: 20} ]; collectibles = [ {x: 250, y: DESIGN_HEIGHT - 170, collected: false}, {x: 450, y: DESIGN_HEIGHT - 270, collected: false}, {x: 650, y: DESIGN_HEIGHT - 220, collected: false} ]; } else if (level === 2) { platforms = [ // Ground {x: 0, y: DESIGN_HEIGHT - 50, w: DESIGN_WIDTH, h: 50}, // Narrower platforms {x: 150, y: DESIGN_HEIGHT - 150, w: 80, h: 20}, {x: 350, y: DESIGN_HEIGHT - 250, w: 80, h: 20}, {x: 550, y: DESIGN_HEIGHT - 200, w: 80, h: 20}, {x: 250, y: DESIGN_HEIGHT - 350, w: 120, h: 20}, {x: 450, y: DESIGN_HEIGHT - 450, w: 120, h: 20}, // Moving platform {x: 300, y: 200, w: 100, h: 20, moving: true, minX: 200, maxX: 400, speed: 2}, // Final platform {x: 500, y: 100, w: 200, h: 20} ]; obstacles = [ // More spikes {x: 150, y: DESIGN_HEIGHT - 130, w: 80, h: 20}, {x: 350, y: DESIGN_HEIGHT - 230, w: 80, h: 20}, {x: 550, y: DESIGN_HEIGHT - 180, w: 80, h: 20}, // Spike walls {x: 0, y: 300, w: 20, h: 200}, {x: DESIGN_WIDTH - 20, y: 300, w: 20, h: 200} ]; collectibles = [ {x: 190, y: DESIGN_HEIGHT - 170, collected: false}, {x: 390, y: DESIGN_HEIGHT - 270, collected: false}, {x: 590, y: DESIGN_HEIGHT - 220, collected: false}, {x: 310, y: DESIGN_HEIGHT - 370, collected: false}, {x: 510, y: DESIGN_HEIGHT - 470, collected: false} ]; } else if (level === 3) { platforms = [ // Ground {x: 0, y: DESIGN_HEIGHT - 50, w: DESIGN_WIDTH, h: 50}, // Very narrow platforms and spike walls {x: 100, y: DESIGN_HEIGHT - 150, w: 60, h: 20}, {x: 300, y: DESIGN_HEIGHT - 250, w: 60, h: 20}, {x: 500, y: DESIGN_HEIGHT - 350, w: 60, h: 20}, {x: 200, y: DESIGN_HEIGHT - 450, w: 80, h: 20}, {x: 400, y: 250, w: 80, h: 20, moving: true, minX: 300, maxX: 500, speed: 1.5}, {x: 150, y: 150, w: 50, h: 20}, // Final platform {x: 500, y: 100, w: 200, h: 20} ]; obstacles = [ // Spikes everywhere {x: 100, y: DESIGN_HEIGHT - 130, w: 60, h: 20}, {x: 300, y: DESIGN_HEIGHT - 230, w: 60, h: 20}, {x: 500, y: DESIGN_HEIGHT - 330, w: 60, h: 20}, // Spike walls on sides {x: 0, y: 0, w: 20, h: DESIGN_HEIGHT}, {x: DESIGN_WIDTH - 20, y: 0, w: 20, h: DESIGN_HEIGHT}, // Additional spike barriers {x: 250, y: 200, w: 20, h: 100}, {x: 450, y: 200, w: 20, h: 100} ]; collectibles = [ {x: 130, y: DESIGN_HEIGHT - 170, collected: false}, {x: 330, y: DESIGN_HEIGHT - 270, collected: false}, {x: 530, y: DESIGN_HEIGHT - 370, collected: false}, {x: 240, y: DESIGN_HEIGHT - 470, collected: false}, {x: 180, y: 130, collected: false} ]; } else if (level === 4) { platforms = [ // Ground {x: 0, y: DESIGN_HEIGHT - 50, w: DESIGN_WIDTH, h: 50}, // Challenging layout with multiple moving platforms {x: 80, y: DESIGN_HEIGHT - 120, w: 50, h: 20}, {x: 280, y: DESIGN_HEIGHT - 200, w: 50, h: 20}, {x: 480, y: DESIGN_HEIGHT - 280, w: 50, h: 20}, {x: 180, y: DESIGN_HEIGHT - 360, w: 70, h: 20, moving: true, minX: 150, maxX: 250, speed: 2}, {x: 380, y: DESIGN_HEIGHT - 440, w: 70, h: 20, moving: true, minX: 350, maxX: 450, speed: -1.8}, {x: 100, y: 220, w: 40, h: 20}, {x: 300, y: 140, w: 40, h: 20, moving: true, minX: 250, maxX: 350, speed: 1.2}, {x: 500, y: 60, w: 60, h: 20}, // Final platform {x: 500, y: 100, w: 200, h: 20} ]; obstacles = [ // Dense spike coverage {x: 80, y: DESIGN_HEIGHT - 100, w: 50, h: 20}, {x: 280, y: DESIGN_HEIGHT - 180, w: 50, h: 20}, {x: 480, y: DESIGN_HEIGHT - 260, w: 50, h: 20}, {x: 180, y: DESIGN_HEIGHT - 340, w: 70, h: 20}, {x: 380, y: DESIGN_HEIGHT - 420, w: 70, h: 20}, // Full side walls {x: 0, y: 0, w: 20, h: DESIGN_HEIGHT}, {x: DESIGN_WIDTH - 20, y: 0, w: 20, h: DESIGN_HEIGHT}, // Floating spike clusters {x: 200, y: 180, w: 20, h: 80}, {x: 400, y: 100, w: 20, h: 80}, {x: 600, y: 180, w: 20, h: 80} ]; collectibles = [ {x: 105, y: DESIGN_HEIGHT - 140, collected: false}, {x: 305, y: DESIGN_HEIGHT - 220, collected: false}, {x: 505, y: DESIGN_HEIGHT - 300, collected: false}, {x: 215, y: DESIGN_HEIGHT - 380, collected: false}, {x: 415, y: DESIGN_HEIGHT - 460, collected: false}, {x: 320, y: 120, collected: false} ]; } else if (level === 5) { platforms = [ // Ground {x: 0, y: DESIGN_HEIGHT - 50, w: DESIGN_WIDTH, h: 50}, // Even more challenging with faster moving platforms and tighter spaces {x: 60, y: DESIGN_HEIGHT - 100, w: 40, h: 20}, {x: 220, y: DESIGN_HEIGHT - 180, w: 40, h: 20}, {x: 380, y: DESIGN_HEIGHT - 260, w: 40, h: 20}, {x: 540, y: DESIGN_HEIGHT - 340, w: 40, h: 20}, {x: 120, y: DESIGN_HEIGHT - 420, w: 60, h: 20, moving: true, minX: 100, maxX: 200, speed: 3}, {x: 320, y: DESIGN_HEIGHT - 500, w: 60, h: 20, moving: true, minX: 280, maxX: 380, speed: -2.5}, {x: 520, y: 280, w: 50, h: 20, moving: true, minX: 470, maxX: 570, speed: 2.2}, {x: 80, y: 160, w: 30, h: 20}, {x: 280, y: 80, w: 30, h: 20, moving: true, minX: 220, maxX: 340, speed: 1.8}, {x: 480, y: 200, w: 30, h: 20}, // Final platform {x: 500, y: 100, w: 200, h: 20} ]; obstacles = [ // Very dense spike coverage {x: 60, y: DESIGN_HEIGHT - 80, w: 40, h: 20}, {x: 220, y: DESIGN_HEIGHT - 160, w: 40, h: 20}, {x: 380, y: DESIGN_HEIGHT - 240, w: 40, h: 20}, {x: 540, y: DESIGN_HEIGHT - 320, w: 40, h: 20}, {x: 120, y: DESIGN_HEIGHT - 400, w: 60, h: 20}, {x: 320, y: DESIGN_HEIGHT - 480, w: 60, h: 20}, // Side walls with gaps {x: 0, y: 0, w: 20, h: 150}, {x: 0, y: 200, w: 20, h: 150}, {x: 0, y: 400, w: 20, h: DESIGN_HEIGHT - 450}, {x: DESIGN_WIDTH - 20, y: 0, w: 20, h: 150}, {x: DESIGN_WIDTH - 20, y: 200, w: 20, h: 150}, {x: DESIGN_WIDTH - 20, y: 400, w: 20, h: DESIGN_HEIGHT - 450}, // Multiple floating spike barriers {x: 150, y: 120, w: 20, h: 60}, {x: 350, y: 40, w: 20, h: 60}, {x: 450, y: 160, w: 20, h: 60}, {x: 600, y: 240, w: 20, h: 60} ]; collectibles = [ {x: 80, y: DESIGN_HEIGHT - 120, collected: false}, {x: 240, y: DESIGN_HEIGHT - 200, collected: false}, {x: 400, y: DESIGN_HEIGHT - 280, collected: false}, {x: 560, y: DESIGN_HEIGHT - 360, collected: false}, {x: 150, y: DESIGN_HEIGHT - 440, collected: false}, {x: 350, y: DESIGN_HEIGHT - 520, collected: false}, {x: 100, y: 140, collected: false}, {x: 300, y: 60, collected: false} ]; } else if (level === 6) { platforms = [ // Ground {x: 0, y: DESIGN_HEIGHT - 50, w: DESIGN_WIDTH, h: 50}, // Ultimate challenge with very fast moving platforms and minimal space {x: 40, y: DESIGN_HEIGHT - 80, w: 30, h: 20}, {x: 180, y: DESIGN_HEIGHT - 160, w: 30, h: 20}, {x: 320, y: DESIGN_HEIGHT - 240, w: 30, h: 20}, {x: 460, y: DESIGN_HEIGHT - 320, w: 30, h: 20}, {x: 100, y: DESIGN_HEIGHT - 400, w: 40, h: 20, moving: true, minX: 60, maxX: 160, speed: 3.5}, {x: 280, y: DESIGN_HEIGHT - 480, w: 40, h: 20, moving: true, minX: 240, maxX: 340, speed: -3}, {x: 440, y: 300, w: 40, h: 20, moving: true, minX: 400, maxX: 500, speed: 2.8}, {x: 60, y: 200, w: 25, h: 20}, {x: 200, y: 120, w: 25, h: 20, moving: true, minX: 150, maxX: 270, speed: 2.5}, {x: 360, y: 40, w: 25, h: 20}, {x: 500, y: 180, w: 25, h: 20, moving: true, minX: 450, maxX: 550, speed: -2}, // Final platform {x: 500, y: 100, w: 200, h: 20} ]; obstacles = [ // Maximum spike density {x: 40, y: DESIGN_HEIGHT - 60, w: 30, h: 20}, {x: 180, y: DESIGN_HEIGHT - 140, w: 30, h: 20}, {x: 320, y: DESIGN_HEIGHT - 220, w: 30, h: 20}, {x: 460, y: DESIGN_HEIGHT - 300, w: 30, h: 20}, {x: 100, y: DESIGN_HEIGHT - 380, w: 40, h: 20}, {x: 280, y: DESIGN_HEIGHT - 460, w: 40, h: 20}, // Complex side wall patterns {x: 0, y: 0, w: 20, h: 100}, {x: 0, y: 120, w: 20, h: 100}, {x: 0, y: 240, w: 20, h: 100}, {x: 0, y: 360, w: 20, h: DESIGN_HEIGHT - 410}, {x: DESIGN_WIDTH - 20, y: 0, w: 20, h: 100}, {x: DESIGN_WIDTH - 20, y: 120, w: 20, h: 100}, {x: DESIGN_WIDTH - 20, y: 240, w: 20, h: 100}, {x: DESIGN_WIDTH - 20, y: 360, w: 20, h: DESIGN_HEIGHT - 410}, // Dense floating spike maze {x: 90, y: 160, w: 20, h: 50}, {x: 170, y: 80, w: 20, h: 50}, {x: 250, y: 160, w: 20, h: 50}, {x: 330, y: 0, w: 20, h: 50}, {x: 410, y: 140, w: 20, h: 50}, {x: 490, y: 60, w: 20, h: 50}, {x: 570, y: 160, w: 20, h: 50} ]; collectibles = [ {x: 55, y: DESIGN_HEIGHT - 100, collected: false}, {x: 195, y: DESIGN_HEIGHT - 180, collected: false}, {x: 335, y: DESIGN_HEIGHT - 260, collected: false}, {x: 475, y: DESIGN_HEIGHT - 340, collected: false}, {x: 130, y: DESIGN_HEIGHT - 420, collected: false}, {x: 310, y: DESIGN_HEIGHT - 500, collected: false}, {x: 80, y: 180, collected: false}, {x: 220, y: 100, collected: false}, {x: 380, y: 20, collected: false}, {x: 520, y: 160, collected: false} ]; } }; 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); } };

roblox obby😛

How to Play