const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; // Game variables let player; let obstacles = []; let groundOffset = 0; let gameSpeed = 3; // Balanced speed with more enemies let score = 0; let gameOver = false; let spawnTimer = 0; 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, }); // Player class - now a cool poop ninja with sunglasses and trail effects! class Player { constructor() { this.x = 100; this.y = DESIGN_HEIGHT - 100; this.width = 50; this.height = 70; this.jumpVelocity = 0; this.gravity = 0.6; // More natural gravity this.jumpStrength = -18; // Moderate, balanced jumps this.onGround = true; this.trail = []; } update() { // Apply gravity if (!this.onGround) { this.jumpVelocity += this.gravity; } this.y += this.jumpVelocity; // Ground collision if (this.y >= DESIGN_HEIGHT - 100) { this.y = DESIGN_HEIGHT - 100; this.jumpVelocity = 0; this.onGround = true; } // Update trail this.trail.push({x: this.x + this.width/2, y: this.y + this.height/2}); if (this.trail.length > 8) this.trail.shift(); } jump() { if (this.onGround || this.canDoubleJump) { this.jumpVelocity = this.jumpStrength; if (!this.onGround) { this.canDoubleJump = false; // Double jump effect - add some particles or visual flair p.fill(255, 215, 0, 150); for (let i = 0; i < 8; i++) { let angle = p.map(i, 0, 8, 0, p.TWO_PI); p.ellipse(this.x + this.width/2 + p.cos(angle) * 15, this.y + this.height/2, 6, 6); } } this.onGround = false; this.canDoubleJump = !this.onGround; } } draw() { // Draw motion trail p.noFill(); p.stroke(139, 69, 19, 100); p.strokeWeight(4); for (let i = 0; i < this.trail.length; i++) { let alpha = p.map(i, 0, this.trail.length - 1, 0, 255); p.stroke(139, 69, 19, alpha * 0.4); let size = p.map(i, 0, this.trail.length - 1, 10, 40); p.circle(this.trail[i].x, this.trail[i].y, size); } p.noStroke(); // Draw cool poop ninja character p.push(); p.translate(this.x + this.width / 2, this.y + this.height / 2); p.fill(139, 69, 19); // Brown color p.stroke(0); p.strokeWeight(2); // Main poop body with glow p.fill(139, 69, 19); p.ellipse(0, -20, 35, 35); p.ellipse(0, -5, 30, 30); p.ellipse(0, 15, 25, 25); // Glow effect p.fill(255, 215, 0, 50); p.ellipse(0, -10, 40, 40); // Cool sunglasses p.fill(0); p.ellipse(-10, -15, 12, 8); p.ellipse(10, -15, 12, 8); p.fill(255, 0, 0); p.ellipse(-10, -15, 4, 4); p.ellipse(10, -15, 4, 4); // Determined expression p.fill(255); p.arc(0, 5, 20, 15, 0, p.PI); // Ninja headband p.fill(255, 0, 0); p.rect(-15, -25, 30, 4); p.fill(255); p.triangle(0, -25, -5, -30, 5, -30); p.noStroke(); p.pop(); } } // Obstacle class - now menacing poop monsters with animations! class Obstacle { constructor(type = null) { this.x = DESIGN_WIDTH; this.passed = false; this.type = type || Math.random() < 0.6 ? 'low' : Math.random() < 0.75 ? 'high' : 'double'; this.animTime = 0; switch(this.type) { case 'low': this.y = DESIGN_HEIGHT - 80; this.width = 45; this.height = 80; this.color = [139, 69, 19]; // Brown this.eyeColor = [255, 0, 0]; break; case 'high': this.y = DESIGN_HEIGHT - 220; this.width = 40; this.height = 220; this.color = [101, 67, 33]; // Darker brown this.eyeColor = [0, 255, 0]; break; case 'double': this.y = DESIGN_HEIGHT - 100; this.width = 80; this.height = 100; this.gap = 40; this.parts = [ {x: 0, width: 30, height: 100, eyeColor: [255, 0, 0]}, {x: 50, width: 30, height: 100, eyeColor: [0, 255, 0]} ]; this.color = [160, 82, 45]; // Saddle brown break; } } update() { this.x -= gameSpeed; this.animTime += 0.1; } draw() { if (this.type === 'double') { for (let part of this.parts) { this.drawPoopMonster(this.x + part.x, this.y, part.width, part.height, part.eyeColor); } } else { this.drawPoopMonster(this.x, this.y, this.width, this.height, this.eyeColor); } } drawPoopMonster(x, y, w, h, eyeColor) { p.push(); p.translate(x + w/2, y + h); p.fill(this.color[0], this.color[1], this.color[2]); p.stroke(0); p.strokeWeight(2); p.noStroke(); // Animated bobbing let bob = p.sin(this.animTime + x * 0.01) * 3; p.translate(0, bob); // Stacked poop swirls with teeth let segments = 4; for (let i = 0; i < segments; i++) { let size = (segments - i) * 12; p.ellipse(0, -i * 18 + bob, size, size * 0.7); // Teeth on top segments if (i < 2) { p.fill(255, 255, 255); p.triangle(-size/4, -i * 18 + bob, -size/4 - 5, -i * 18 + bob - 5, -size/4 - 5, -i * 18 + bob + 5); p.triangle(size/4, -i * 18 + bob, size/4 + 5, -i * 18 + bob - 5, size/4 + 5, -i * 18 + bob + 5); } } // Angry eyes p.fill(eyeColor[0], eyeColor[1], eyeColor[2]); p.ellipse(-8, -25, 12, 8); p.ellipse(8, -25, 12, 8); p.fill(0); p.ellipse(-8, -25, 6, 6); p.ellipse(8, -25, 6, 6); // Glowing effect p.fill(255, 0, 0, 80); p.ellipse(0, -30, 50, 30); p.noStroke(); p.pop(); } getCollisionBoxes() { if (this.type === 'double') { return this.parts.map(part => ({ x: this.x + part.x, y: this.y, width: part.width, height: part.height })); } else { return [{ x: this.x, y: this.y, width: this.width, height: this.height }]; } } } // Spawn obstacles function spawnObstacle() { // Much higher spawn rate if (Math.random() < 0.25 + score * 0.0008) { // Higher spawn rate for more enemies obstacles.push(new Obstacle()); } } // Check collisions function checkCollisions() { for (let obs of obstacles) { const boxes = obs.getCollisionBoxes(); for (let box of boxes) { if ( player.x < box.x + box.width && player.x + player.width > box.x && player.y < box.y + box.height && player.y + player.height > box.y ) { gameOver = true; } } } } // Reset game function resetGame() { obstacles = []; score = 0; gameSpeed = 3; groundOffset = 0; gameOver = false; player.y = DESIGN_HEIGHT - 100; player.onGround = true; player.jumpVelocity = 0; } p.keyPressed = () => { if (p.key === ' ' || p.keyCode === 32) { if (gameOver) { resetGame(); } else { player.jump(); } } }; p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); player = new Player(); 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 = () => { // Animated background with particles p.background(15, 23, 42); // Flying poop particles p.fill(139, 69, 19, 150); for (let i = 0; i < 20; i++) { let px = (p.frameCount * 2 + i * 50) % DESIGN_WIDTH; let py = 100 + p.sin(p.frameCount * 0.05 + i) * 50; p.ellipse(px, py, 8 + p.sin(p.frameCount * 0.1 + i) * 4, 6); } p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Draw ground - now a cyber-sewer with neon accents p.fill(30, 20, 10); // Darker sewer floor p.rect(0, DESIGN_HEIGHT - 50, DESIGN_WIDTH, 50); // Neon sewer lines p.stroke(0, 255, 255); p.strokeWeight(4); for (let i = 0; i < DESIGN_WIDTH; i += 100) { p.line(i, DESIGN_HEIGHT - 50, i, DESIGN_HEIGHT); } // Glowing ground lines p.stroke(255, 100, 0); p.strokeWeight(2); for (let i = 0; i < DESIGN_WIDTH; i += 80) { p.line(i, DESIGN_HEIGHT - 25, i + 40, DESIGN_HEIGHT - 25); } p.noStroke(); // Update ground offset for running effect groundOffset -= gameSpeed; if (groundOffset <= -50) { groundOffset = 0; } // Draw moving ground lines p.stroke(255); p.strokeWeight(2); for (let i = 0; i < 20; i++) { let x = (i * 50 + groundOffset) % (DESIGN_WIDTH + 50) - 50; p.line(x, DESIGN_HEIGHT - 25, x + 25, DESIGN_HEIGHT - 25); } p.noStroke(); if (!gameOver) { // Update game player.update(); spawnTimer++; if (spawnTimer > 35) { // More frequent spawning spawnObstacle(); spawnTimer = 0; } // Update obstacles for (let i = obstacles.length - 1; i >= 0; i--) { obstacles[i].update(); if (obstacles[i].x < -50) { let removedObs = obstacles.splice(i, 1)[0]; if (!removedObs.passed) { score++; gameSpeed += 0.04; // Moderate difficulty increase } } else if (obstacles[i].x < player.x && !obstacles[i].passed) { obstacles[i].passed = true; score++; gameSpeed += 0.04; // Moderate difficulty increase } } checkCollisions(); } // Force spawn first obstacle immediately if (obstacles.length === 0 && spawnTimer > 10) { obstacles.push(new Obstacle('low')); spawnTimer = 0; } // Draw player player.draw(); // Draw obstacles for (let obs of obstacles) { obs.draw(); } // Draw cool neon score p.fill(0, 255, 255); p.textSize(28); p.textAlign(p.LEFT); p.text(`POOPS DODGED: ${score}`, 20, 30); // Score glow p.fill(0, 255, 255, 100); p.text(`POOPS DODGED: ${score}`, 22, 32); if (gameOver) { // Explosion effect for (let i = 0; i < 30; i++) { let angle = p.map(i, 0, 30, 0, p.TWO_PI); let dist = p.map(i, 0, 30, 20, 100); let ex = DESIGN_WIDTH / 2 + p.cos(angle) * dist; let ey = DESIGN_HEIGHT / 2 + p.sin(angle) * (dist * 0.5); p.fill(255, 165, 0, 150); p.ellipse(ex, ey, 10, 10); } p.fill(255, 0, 0); p.textSize(52); p.textAlign(p.CENTER); p.text("POOP EXPLOSION! 💥💩", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 50); p.textSize(24); p.fill(0, 255, 255); p.text("Press SPACE to restart", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 20); } // Cool instructions p.fill(255, 255, 0); p.textSize(18); p.textAlign(p.LEFT); p.text("SPACE to LEAP over POOP MONSTERS!", 20, DESIGN_HEIGHT - 20); // Glow p.fill(255, 255, 0, 100); p.text("SPACE to LEAP over POOP MONSTERS!", 22, DESIGN_HEIGHT - 18); 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); } };

p5.js Sketch

How to play