const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let angle = 0; // Keep for potential future use, but not used in game let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; let currentLevel = 1; let platforms = []; let spikes = []; let player = {}; let keys = {}; let gemColor = null; let gem = null; let gemAnimation = null; let deathCount = 0; let particles = []; let currentLevelChanged = false; 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, }); const generateLevel = (levelNum) => { let basePlatforms = [ {x: 0, y: DESIGN_HEIGHT - 20, w: DESIGN_WIDTH, h: 20}, // Ground {x: 150, y: DESIGN_HEIGHT - 120, w: 120, h: 20, moving: true}, // Easy starter platform {x: 350, y: DESIGN_HEIGHT - 180, w: 100, h: 20}, // Center progression {x: 550, y: DESIGN_HEIGHT - 140, w: 130, h: 20, moving: true}, // Right side option {x: 100, y: DESIGN_HEIGHT - 220, w: 80, h: 20}, // Left path begins {x: 250, y: DESIGN_HEIGHT - 280, w: 140, h: 20}, // Mid-left bridge {x: 450, y: DESIGN_HEIGHT - 240, w: 110, h: 20, moving: true}, // Center checkpoint {x: 650, y: DESIGN_HEIGHT - 200, w: 90, h: 20}, // Right challenge {x: 50, y: DESIGN_HEIGHT - 340, w: 100, h: 20}, // Left ascent {x: 300, y: DESIGN_HEIGHT - 380, w: 120, h: 20}, // Main path {x: 500, y: DESIGN_HEIGHT - 320, w: 80, h: 20, moving: true}, // Right narrow platform {x: 200, y: DESIGN_HEIGHT - 420, w: 150, h: 20}, // Upper left bridge {x: 400, y: DESIGN_HEIGHT - 460, w: 100, h: 20}, // Center upper {x: 600, y: DESIGN_HEIGHT - 420, w: 110, h: 20}, // Right upper {x: 250, y: DESIGN_HEIGHT - 500, w: 130, h: 20}, // Pre-goal center {x: 100, y: DESIGN_HEIGHT - 540, w: 100, h: 20}, // Finish line (chequered) {x: 450, y: DESIGN_HEIGHT - 520, w: 120, h: 20} // Alternate goal approach ]; // Create a Set to track used positions and check for overlaps const usedPositions = new Set(); // Randomize platforms and add moving properties basePlatforms.forEach((platform, index) => { if (index > 0 && index < basePlatforms.length - 1) { // Don't randomize ground and finish let maxHeightVariation = Math.min(200 + Math.min(levelNum, 10) * 30, 350); // Generate new positions until we find one that doesn't overlap let attempts = 0; let positionFound = false; while (!positionFound && attempts < 100) { platform.y = DESIGN_HEIGHT - (Math.floor(Math.random() * maxHeightVariation) + 100); platform.x = Math.floor(Math.random() * Math.max(DESIGN_WIDTH - platform.w - 50, 50)); // Check if this position overlaps with any other platform let overlaps = false; for (let i = 0; i < basePlatforms.length; i++) { if (i !== index) { let other = basePlatforms[i]; if (platform.x < other.x + other.w && platform.x + platform.w > other.x && platform.y < other.y + other.h && platform.y + platform.h > other.y) { overlaps = true; break; } } } if (!overlaps) { positionFound = true; } attempts++; } // Add movement properties to marked platforms if (platform.moving) { platform.moveSpeed = 1 + Math.random() * 2; // Random speed between 1 and 3 platform.originalX = platform.x; platform.moveRange = 100 + Math.random() * 50; // Movement range platform.direction = 1; // 1 for right, -1 for left } } }); return basePlatforms; }; const generateSpikes = (platformsList, levelNum) => { let spikeCount = Math.min(4 + levelNum, 10); // More spikes as levels increase let newSpikes = []; let usedPlatforms = new Set(); // Add ground spikes on higher levels if (levelNum > 2) { for (let i = 0; i < Math.floor(levelNum / 2); i++) { newSpikes.push({ x: Math.floor(Math.random() * (DESIGN_WIDTH - 50)) + 25, y: DESIGN_HEIGHT - 35, w: 20, h: 15 }); } } // Add spikes on platforms while (newSpikes.length < spikeCount) { let platformIndex = Math.floor(Math.random() * (platformsList.length - 1)) + 1; // Skip ground if (!usedPlatforms.has(platformIndex) && platformIndex < platformsList.length - 1) { // Don't place on finish usedPlatforms.add(platformIndex); let platform = platformsList[platformIndex]; newSpikes.push({ x: platform.x + Math.floor(Math.random() * (platform.w - 30)) + 15, y: platform.y - 15, w: 20 + Math.floor(Math.random() * 10), h: 15 }); } } return newSpikes; }; p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.stroke(0); // Add stroke for better visibility 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; } }; // Game variables player = { x: 100, y: DESIGN_HEIGHT - 100, w: 30, h: 30, vx: 0, vy: 0, baseSpeed: 4, currentSpeed: 4, speedMultiplier: 0.625, momentumTimer: 0, jump: -12, grounded: false, ropeTarget: null, ropeActive: false, ropeTimer: 0, spikeImmune: false, animationState: 'idle', frameCounter: 0, facingDirection: 1, // 1 for right, -1 for left color: [255, 255, 255] // Default white color }; keys = {}; platforms = generateLevel(currentLevel); spikes = generateSpikes(platforms, currentLevel); p.keyPressed = () => { keys[p.key.toLowerCase()] = true; if (p.keyCode === 32) { // Spacebar // Find nearest platform that's not the last one touched let nearestPlat = null; let minDist = Infinity; let playerCenterX = player.x + player.w / 2; let playerCenterY = player.y + player.h / 2; let lastTouchedPlatform = player.ropeTarget || null; for (let plat of platforms) { if (plat === lastTouchedPlatform) continue; // Skip last touched platform let platCenterX = plat.x + plat.w / 2; let platCenterY = plat.y + plat.h / 2; let dist = Math.sqrt((playerCenterX - platCenterX)**2 + (playerCenterY - platCenterY)**2); if (dist < minDist && dist > 50) { // Increased minimum distance to prevent close-range oscillation minDist = dist; nearestPlat = plat; } } if (nearestPlat) { player.ropeTarget = nearestPlat; player.ropeActive = true; player.ropeTimer = 60; // 1 second at 60fps player.spikeImmune = true; player.vx = 0; player.vy = 0; } } else if (p.keyCode === 38) { // Up arrow if (player.grounded && !player.ropeActive) { player.vy = player.jump; player.grounded = false; } } }; p.keyReleased = () => { keys[p.key.toLowerCase()] = false; }; }; p.windowResized = () => { resizeCanvasToContainer(); }; // Remove old demo elements and mouse interaction to focus on game p.draw = () => { p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Update momentum system let moveDirection = 0; if (keys['a'] || keys['arrowleft']) moveDirection = -1; if (keys['d'] || keys['arrowright']) moveDirection = 1; if (moveDirection !== 0) { // Building momentum - faster acceleration player.momentumTimer++; player.speedMultiplier = Math.min(1, 0.625 + (player.momentumTimer * 0.015)); } else { // No input - decay momentum player.momentumTimer = 0; player.speedMultiplier *= 0.98; player.speedMultiplier = Math.max(0.625, player.speedMultiplier); } player.currentSpeed = player.baseSpeed * player.speedMultiplier; if (Math.abs(moveDirection) > 0) { player.vx = moveDirection * player.currentSpeed; player.facingDirection = moveDirection; } if (player.grounded && !player.ropeActive) { player.vx *= 0.88; // Consistent grounded friction } // Update animation state player.frameCounter++; if (player.ropeActive) { player.animationState = 'grappling'; } else if (!player.grounded) { player.animationState = 'jumping'; } else if (Math.abs(player.vx) > 0.5) { player.animationState = 'walking'; } else { player.animationState = 'idle'; } // Update moving platforms for (let plat of platforms) { if (plat.moving) { plat.x += plat.moveSpeed * plat.direction; // Reverse direction when reaching movement limits if (plat.x > plat.originalX + plat.moveRange || plat.x < plat.originalX - plat.moveRange) { plat.direction *= -1; } } } // Update player physics const gravity = 0.6; if (player.ropeActive) { // Rope pulling mechanics let targetX = player.ropeTarget.x + player.ropeTarget.w / 2; let targetY = player.ropeTarget.y - player.h; let dx = targetX - (player.x + player.w / 2); let dy = targetY - (player.y + player.h / 2); let dist = Math.sqrt(dx*dx + dy*dy); if (dist > 8) { // Increased threshold to prevent oscillation let pullSpeed = 10; // Slightly reduced speed player.x += (dx / dist) * pullSpeed; player.y += (dy / dist) * pullSpeed; player.vx = 0; player.vy = 0; } else { // Arrived at platform player.x = targetX - player.w / 2; player.y = targetY; player.ropeActive = false; player.ropeTarget = null; player.spikeImmune = false; player.grounded = true; } player.ropeTimer--; if (player.ropeTimer <= 0) { player.ropeActive = false; player.ropeTarget = null; player.spikeImmune = false; } } else { player.vy += gravity; player.x += player.vx; player.y += player.vy; player.grounded = false; } // Platform collisions let landed = false; for (let plat of platforms) { if ( player.x < plat.x + plat.w && player.x + player.w > plat.x && player.y < plat.y + plat.h && player.y + player.h > plat.y ) { // Landing on top (more lenient detection) if (player.vy > 0 && player.y + player.h > plat.y && player.y + player.h <= plat.y + player.vy + 10) { player.y = plat.y - player.h; player.vy = 0; player.vx *= 0.7; // Reduce horizontal velocity on landing player.grounded = true; landed = true; // Move player with moving platform if (plat.moving) { player.x += plat.moveSpeed * plat.direction; } } // Hitting from below else if (player.vy < 0 && player.y >= plat.y + plat.h - 5) { player.y = plat.y + plat.h; player.vy = 0; } // Side collisions (tighter detection, only if not landing) - skip if just rope-landed else if (!landed && Math.abs(player.vy) < 2) { // Only side collision when not falling fast if (player.x + player.w > plat.x && player.x + player.w <= plat.x + 4) { player.x = plat.x - player.w; player.vx = 0; } else if (player.x < plat.x + plat.w && player.x >= plat.x + plat.w - 4) { player.x = plat.x + plat.w; player.vx = 0; } } } } // Check spike collisions (respawn on touch) if (!player.spikeImmune && !player.ropeActive) { for (let spike of spikes) { if ( player.x < spike.x + spike.w && player.x + player.w > spike.x && player.y < spike.y + spike.h && player.y + player.h > spike.y ) { // Increment death counter deathCount++; // Respawn player player.x = 100; player.y = DESIGN_HEIGHT - 100; player.vy = 0; player.vx = 0; player.grounded = false; player.ropeActive = false; player.ropeTarget = null; player.spikeImmune = false; player.momentumTimer = 0; player.speedMultiplier = 0.625; player.animationState = 'idle'; player.frameCounter = 0; gemAnimation = null; // Don't reset gem on gem levels - this allows color switching if (currentLevel % 5 !== 0) { gem = null; } break; } } } // Boundaries and respawn if (player.x < 0) player.x = 0; if (player.x + player.w > DESIGN_WIDTH) player.x = DESIGN_WIDTH - player.w; if (player.y > DESIGN_HEIGHT) { // Increment death counter deathCount++; player.x = 100; player.y = DESIGN_HEIGHT - 100; player.vy = 0; player.vx = 0; player.grounded = false; player.ropeActive = false; player.ropeTarget = null; player.spikeImmune = false; player.momentumTimer = 0; player.speedMultiplier = 0.625; player.animationState = 'idle'; player.frameCounter = 0; gem = null; gemAnimation = null; } // Draw platforms (green, except finish platform) for (let i = 0; i < platforms.length; i++) { let plat = platforms[i]; if (i === platforms.length - 1) { // Draw chequered finish platform (black and white) p.noFill(); p.stroke(0); let tileSize = 10; for (let tx = 0; tx < plat.w; tx += tileSize) { for (let ty = 0; ty < plat.h; ty += tileSize) { if ((tx / tileSize + ty / tileSize) % 2 === 0) { p.fill(0); // Black } else { p.fill(255); // White } p.noStroke(); p.rect(plat.x + tx, plat.y + ty, tileSize, tileSize); } } p.stroke(0); } else { // Regular green platforms (blue for moving ones) if (plat.moving) { p.fill(59, 130, 246); // Blue color for moving platforms } else { p.fill(34, 197, 94); // Green for static platforms } p.noStroke(); p.rect(plat.x, plat.y, plat.w, plat.h); p.stroke(0); } } // Draw grapple rope and hook if active if (player.ropeActive && player.ropeTarget) { const startX = player.x + player.w / 2; const startY = player.y + player.h / 2; const endX = player.ropeTarget.x + player.ropeTarget.w / 2; const endY = player.ropeTarget.y; // Calculate rope length and segments for realistic coiling const distance = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2); const baseSegments = Math.floor(distance / 15); // More segments for longer ropes const segments = Math.max(baseSegments, 15); // Minimum segments const coilAmplitude = 3; // How much the rope coils const coilFrequency = 0.8; // Frequency of the coil wave // Draw the central rope with coiled pattern p.stroke(101, 67, 33); p.strokeWeight(2); p.noFill(); p.beginShape(); for (let i = 0; i <= segments; i++) { const t = i / segments; const x = startX + (endX - startX) * t; const y = startY + (endY - startY) * t; // Add coiling effect perpendicular to rope direction const perpX = -(endY - startY) / distance; const perpY = (endX - startX) / distance; const coilOffset = Math.sin(t * Math.PI * coilFrequency * 4) * coilAmplitude; p.vertex(x + perpX * coilOffset, y + perpY * coilOffset); } p.endShape(); // Draw twisted strands for rope texture p.stroke(139, 90, 43); p.strokeWeight(1); for (let strand = 0; strand < 3; strand++) { p.beginShape(); for (let i = 0; i <= segments; i++) { const t = i / segments; const x = startX + (endX - startX) * t; const y = startY + (endY - startY) * t; const perpX = -(endY - startY) / distance; const perpY = (endX - startX) / distance; const strandOffset = Math.sin(t * Math.PI * coilFrequency * 4 + (strand * Math.PI * 2 / 3)) * (coilAmplitude * 0.6); p.vertex(x + perpX * strandOffset, y + perpY * strandOffset); } p.endShape(); } // Draw slim grapple hook p.push(); p.translate(endX, endY); // Slim metallic rod p.fill(160, 160, 170); p.stroke(100, 100, 110); p.strokeWeight(1); p.rectMode(p.CENTER); p.rect(0, 0, 3, 12); // Three-pronged claw p.stroke(80, 80, 90); p.strokeWeight(2); p.noFill(); // Center hook p.beginShape(); p.vertex(0, 6); p.vertex(-1, 10); p.vertex(0, 14); p.vertex(1, 10); p.endShape(p.CLOSE); // Left hook p.push(); p.rotate(-Math.PI / 4); p.beginShape(); p.vertex(0, 6); p.vertex(-1, 10); p.vertex(0, 14); p.vertex(1, 10); p.endShape(p.CLOSE); p.pop(); // Right hook p.push(); p.rotate(Math.PI / 4); p.beginShape(); p.vertex(0, 6); p.vertex(-1, 10); p.vertex(0, 14); p.vertex(1, 10); p.endShape(p.CLOSE); p.pop(); p.pop(); // Connection point on player p.stroke(101, 67, 33); p.strokeWeight(3); p.noFill(); p.circle(startX, startY, 6); p.strokeWeight(1); p.stroke(0); } // Draw spikes (red triangles pointing up from platforms) p.fill(220, 38, 127); p.noStroke(); for (let spike of spikes) { // Draw triangle pointing up (base on platform surface) p.triangle( spike.x, spike.y + spike.h, // Bottom left spike.x + spike.w, spike.y + spike.h, // Bottom right spike.x + spike.w / 2, spike.y // Pointing up ); } p.stroke(0); // Draw stick figure player const drawStickFigure = (x, y, state, frame, direction, color) => { const centerX = x + 15; const centerY = y + 15; const animFrame = Math.floor(frame / 4) % 3; // Faster, 3-frame animation const wobble = Math.sin(frame * 0.3) * 2; // Add wobble effect p.stroke(color[0], color[1], color[2]); p.strokeWeight(4); p.noFill(); if (state === 'idle') { // Head with wobble p.push(); p.translate(centerX, centerY - 8 + wobble * 0.5); p.circle(0, 0, 10); p.pop(); // Body with subtle sway p.line(centerX + wobble * 0.3, centerY - 4, centerX - wobble * 0.3, centerY + 8); // Arms with idle bounce p.line(centerX - 6, centerY + Math.sin(frame * 0.2) * 2, centerX + 6, centerY - Math.sin(frame * 0.2) * 2); // Legs with tapping p.line(centerX, centerY + 8, centerX - 4, centerY + 15 + (animFrame === 0 ? 3 : 0)); p.line(centerX, centerY + 8, centerX + 4, centerY + 15 + (animFrame === 1 ? 3 : 0)); } else if (state === 'walking') { // Head bouncing p.push(); p.translate(centerX, centerY - 8 - Math.abs(Math.sin(frame * 0.4)) * 4); p.circle(0, 0, 10); p.pop(); // Body leaning into movement p.line(centerX + direction * 2, centerY - 4, centerX - direction * 2, centerY + 8); // Arm swinging - left and right arms alternating if (animFrame === 0) { // Left arm forward, right arm back p.line(centerX, centerY, centerX + direction * 8, centerY - 6); p.line(centerX, centerY, centerX - direction * 8, centerY + 4); } else if (animFrame === 1) { // Arms crossing p.line(centerX, centerY, centerX + direction * 10, centerY); p.line(centerX, centerY, centerX - direction * 6, centerY - 3); } else { // Left arm back, right arm forward p.line(centerX, centerY, centerX - direction * 10, centerY + 2); p.line(centerX, centerY, centerX + direction * 6, centerY - 5); } // Exaggerated leg movements if (animFrame === 0) { p.line(centerX, centerY + 8, centerX - 10, centerY + 18); p.line(centerX, centerY + 8, centerX + 8, centerY + 10); } else if (animFrame === 1) { p.line(centerX, centerY + 8, centerX - 6, centerY + 12); p.line(centerX, centerY + 8, centerX + 10, centerY + 16); } else { p.line(centerX, centerY + 8, centerX - 8, centerY + 10); p.line(centerX, centerY + 8, centerX + 6, centerY + 18); } } else if (state === 'jumping') { // Head stretched p.push(); p.translate(centerX, centerY - 10); p.scale(1.2, 0.8); p.circle(0, 0, 10); p.pop(); // Body curved p.curveVertex(centerX - 10, centerY + 8); p.curveVertex(centerX, centerY - 4); p.curveVertex(centerX + 10, centerY + 8); // Arms windmilling p.push(); p.translate(centerX, centerY); p.rotate(frame * 0.3); p.line(-10, 0, 10, 0); p.pop(); // Legs spread wide p.line(centerX, centerY + 8, centerX - 12, centerY + 20); p.line(centerX, centerY + 8, centerX + 12, centerY + 20); } else if (state === 'grappling') { // Head thrown back p.push(); p.translate(centerX, centerY - 12); p.rotate(-direction * 0.3); p.circle(0, 0, 12); p.pop(); // Body horizontal stretch p.line(centerX, centerY - 4, centerX + direction * 10, centerY + 6); // Both arms grabbing p.line(centerX + direction * 5, centerY - 2, centerX + direction * 12, centerY - 8); p.line(centerX, centerY, centerX + direction * 10, centerY - 2); // Legs flailing wildly if (animFrame === 0) { p.line(centerX + direction * 10, centerY + 6, centerX - direction * 5, centerY + 10); p.line(centerX + direction * 10, centerY + 6, centerX + direction * 15, centerY + 18); } else if (animFrame === 1) { p.line(centerX + direction * 10, centerY + 6, centerX - direction * 8, centerY + 15); p.line(centerX + direction * 10, centerY + 6, centerX + direction * 12, centerY + 12); } else { p.line(centerX + direction * 10, centerY + 6, centerX - direction * 3, centerY + 18); p.line(centerX + direction * 10, centerY + 6, centerX + direction * 18, centerY + 10); } } p.strokeWeight(1); p.stroke(0); }; drawStickFigure(player.x, player.y, player.animationState, player.frameCounter, player.facingDirection, player.color); // Draw level indicator p.fill(255); p.textSize(20); p.text(`Level: ${currentLevel}`, 20, 30); // Draw death counter if (deathCount > 0) { p.fill(220, 38, 127); p.textSize(16); p.text(`Deaths: ${deathCount}`, 20, 55); } // Draw gem indicator if active if (gemColor && player.color[0] === gemColor[0] && player.color[1] === gemColor[1] && player.color[2] === gemColor[2]) { p.fill(gemColor[0], gemColor[1], gemColor[2]); p.textSize(16); p.text(`✦ Gem Active`, 20, deathCount > 0 ? 75 : 55); } // Draw gem if it exists if (gem && !gemAnimation) { // Floating animation const floatY = gem.y + Math.sin(p.frameCount * 0.05) * 10; const pulseScale = 1 + Math.sin(p.frameCount * 0.08) * 0.2; p.push(); p.translate(gem.x + 20, floatY + 20); p.scale(pulseScale); // Gem glow effect - enhanced vibrancy p.noStroke(); for (let i = 5; i > 0; i--) { p.fill(gem.color[0], gem.color[1], gem.color[2], 40); p.circle(0, 0, 40 * (1 + i * 0.3)); } // Main gem p.fill(gem.color[0], gem.color[1], gem.color[2]); p.push(); p.rotate(p.frameCount * 0.02); p.beginShape(); for (let i = 0; i < 6; i++) { const angle = (p.TWO_PI / 6) * i; const x = p.cos(angle) * 15; const y = p.sin(angle) * 15; p.vertex(x, y); } p.endShape(p.CLOSE); p.pop(); // Additional inner shine for more vibrancy p.fill(255, 255, 255, 200); p.circle(-2, -2, 8); p.fill(gem.color[0], gem.color[1], gem.color[2], 180); p.circle(2, 2, 4); // Inner shine p.fill(255, 255, 255, 150); p.circle(-3, -3, 6); p.pop(); } // Handle gem absorption animation if (gemAnimation) { gemAnimation.progress += 0.015; if (gemAnimation.progress < 1) { // Draw absorption effect p.push(); const gemX = gemAnimation.startX + 20; const gemY = gemAnimation.startY + 20; const playerX = player.x + 15; const playerY = player.y + 15; const currentX = p.lerp(gemX, playerX, gemAnimation.progress); const currentY = p.lerp(gemY, playerY, gemAnimation.progress); const size = p.lerp(30, 5, gemAnimation.progress); // Particle trail for (let i = 0; i < 5; i++) { const trailProgress = Math.max(0, gemAnimation.progress - i * 0.1); const trailX = p.lerp(gemX, playerX, trailProgress); const trailY = p.lerp(gemY, playerY, trailProgress); const trailSize = p.lerp(30, 5, trailProgress) * (1 - i * 0.15); p.fill(gemAnimation.color[0], gemAnimation.color[1], gemAnimation.color[2], 200 - i * 40); p.noStroke(); p.circle(trailX, trailY, trailSize); } // Main gem being absorbed p.fill(gemAnimation.color[0], gemAnimation.color[1], gemAnimation.color[2]); p.noStroke(); p.circle(currentX, currentY, size); p.pop(); } else { // Animation complete - apply color transformation player.color = [...gemAnimation.color]; gemColor = [...gemAnimation.color]; gemAnimation = null; gem = null; // Advance to next level currentLevel++; // Generate new level platforms = generateLevel(currentLevel); spikes = generateSpikes(platforms, currentLevel); // Reset player position and physics, but preserve gem color player.x = 100; player.y = DESIGN_HEIGHT - 100; player.vx = 0; player.vy = 0; player.grounded = false; player.ropeActive = false; player.ropeTarget = null; player.spikeImmune = false; player.momentumTimer = 0; player.speedMultiplier = 0.625; player.animationState = 'idle'; player.frameCounter = 0; } } // Handle particle effects when gem is active and player collected gem if (gemColor && player.color[0] === gemColor[0] && player.color[1] === gemColor[1] && player.color[2] === gemColor[2] && (Math.abs(player.vx) > 0.5 || !player.grounded)) { // Create new particles behind the player const centerX = player.x + 15; const centerY = player.y + 15; // Add 1-2 particles per frame const particleCount = p.frameCount % 3 === 0 ? 2 : 1; for (let i = 0; i < particleCount; i++) { particles.push({ x: centerX + (player.facingDirection * -15) + (Math.random() * 10 - 5), y: centerY + (Math.random() * 10 - 5), size: Math.random() * 5 + 2, life: 1.0, alpha: Math.random() * 100 + 100, vx: (Math.random() - 0.5) * 3 - (player.facingDirection * 2), vy: (Math.random() - 0.5) * 2 }); } } // Update and draw particles for (let i = particles.length - 1; i >= 0; i--) { let particle = particles[i]; particle.life -= 0.03; particle.x += particle.vx; particle.y += particle.vy; particle.alpha -= 3; if (particle.life <= 0 || particle.alpha <= 0) { particles.splice(i, 1); } else { p.fill(gemColor[0], gemColor[1], gemColor[2], particle.alpha); p.noStroke(); p.circle(particle.x, particle.y, particle.size); } } // Check if player reached the checker platform (last platform) let finishPlatform = platforms[platforms.length - 1]; if ( player.x < finishPlatform.x + finishPlatform.w && player.x + player.w > finishPlatform.x && player.y < finishPlatform.y + finishPlatform.h && player.y + player.h > finishPlatform.y && !gemAnimation ) { // Check if this is a gem level (every 5 levels) if (currentLevel % 5 === 0) { // Always create gem for gem levels if not already collected if (!gem && !gemAnimation) { gemColor = [ Math.floor(Math.random() * 156) + 100, // R: 100-255 Math.floor(Math.random() * 156) + 100, // G: 100-255 Math.floor(Math.random() * 156) + 100 // B: 100-255 ]; gem = { x: finishPlatform.x + finishPlatform.w / 2 - 20, y: finishPlatform.y - 40, w: 40, h: 40, color: [...gemColor] }; } // Don't advance level until gem is collected } else { // Non-gem level - advance normally currentLevel++; // Generate new level platforms = generateLevel(currentLevel); spikes = generateSpikes(platforms, currentLevel); // Reset player position and physics, but preserve gem color player.x = 100; player.y = DESIGN_HEIGHT - 100; player.vx = 0; player.vy = 0; player.grounded = false; player.ropeActive = false; player.ropeTarget = null; player.spikeImmune = false; player.momentumTimer = 0; player.speedMultiplier = 0.625; player.animationState = 'idle'; player.frameCounter = 0; } } // Create gem at start of gem levels if (currentLevel % 5 === 0 && !gem && !gemAnimation) { let finishPlatform = platforms[platforms.length - 1]; gemColor = [ Math.floor(Math.random() * 156) + 100, // R: 100-255 Math.floor(Math.random() * 156) + 100, // G: 100-255 Math.floor(Math.random() * 156) + 100 // B: 100-255 ]; gem = { x: finishPlatform.x + finishPlatform.w / 2 - 20, y: finishPlatform.y - 40, w: 40, h: 40, color: [...gemColor] }; // Don't reset player color - preserve previous gem effects } // Clear particles when level changes to prevent carryover if (particles.length > 0 && currentLevelChanged) { particles = []; currentLevelChanged = false; } // Preserve gem color across ALL levels, not just level 10 if (gemColor && player.color[0] === gemColor[0] && player.color[1] === gemColor[1] && player.color[2] === gemColor[2]) { player.color = [...gemColor]; } // Check gem collection if (gem && !gemAnimation) { if ( player.x < gem.x + gem.w && player.x + player.w > gem.x && player.y < gem.y + gem.h && player.y + player.h > gem.y ) { // Start absorption animation gemAnimation = { startX: gem.x, startY: gem.y, color: [...gem.color], progress: 0 }; // Create particle burst effect for (let i = 0; i < 30; i++) { particles.push({ x: gem.x + 20, y: gem.y + 20, size: Math.random() * 8 + 3, life: 1.0, alpha: Math.random() * 150 + 100, vx: (Math.random() - 0.5) * 8, vy: (Math.random() - 0.5) * 8 }); } } } p.pop(); }; 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); } };

Grapple Launch

How to Play