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 jumpCount = 0; let score = 0; let keys = {}; let gameActive = true; let gameOver = false; let youWin = false; let skibidiMode = false; // Skibidi easter egg mode let collectibles = []; let hazards = []; 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, }); class Player { constructor() { this.x = DESIGN_WIDTH / 2; this.y = DESIGN_HEIGHT - 100; this.width = 40; this.height = 40; this.vy = 0; this.onGround = true; this.speed = 0; this.velocityX = 0; this.facingRight = true; this.jumpBuffer = 0; this.lastJumpTime = 0; this.doubleJumpAvailable = false; } update() { if (!gameActive || gameOver) return; // Horizontal movement if (keys.ARROW_LEFT) { this.velocityX = -4; this.facingRight = false; } else if (keys.ARROW_RIGHT) { this.velocityX = 4; this.facingRight = true; } else { this.velocityX *= 0.8; // Friction } this.x += this.velocityX; // Keep within bounds if (this.x < 20) this.x = 20; if (this.x > DESIGN_WIDTH - 20) this.x = DESIGN_WIDTH - 20; // Check collectible collisions for (let collectible of collectibles) { if (!collectible.collected) { let dx = this.x - collectible.x; let dy = this.y - collectible.y; let distance = Math.sqrt(dx * dx + dy * dy); if (distance < this.width / 2 + collectible.radius) { collectible.collected = true; score += 10; } } } // Check hazard collisions for (let hazard of hazards) { let dx = this.x - hazard.x; let dy = this.y - hazard.y; let distance = Math.sqrt(dx * dx + dy * dy); if (distance < this.width / 2 + hazard.radius) { gameOver = true; } } // Check win condition let remainingCollectibles = collectibles.filter(c => !c.collected).length; if (remainingCollectibles === 0) { youWin = true; } // Jumping with double jump let currentTime = p.millis(); if (keys.ARROW_UP && (currentTime - this.lastJumpTime < 200)) { // Double jump - can jump in air if pressed twice quickly this.vy = -18; jumpCount++; keys.ARROW_UP = false; this.lastJumpTime = currentTime; } else if (keys.ARROW_UP && this.onGround) { // Ground jump this.vy = -18; this.onGround = false; jumpCount++; this.lastJumpTime = currentTime; keys.ARROW_UP = false; } else if (keys.ARROW_UP) { this.lastJumpTime = currentTime; } // Gravity and vertical movement this.vy += 1.0; this.y += this.vy; if (this.y >= DESIGN_HEIGHT - 100) { this.y = DESIGN_HEIGHT - 100; this.vy = 0; this.onGround = true; } } draw() { // Detailed green hedgehog character p.push(); p.translate(this.x, this.y); if (skibidiMode) { // Skibidi mode: add disco colors and bobble let bobble = p.sin(p.frameCount * 0.3) * 5; p.translate(0, bobble); p.fill(255, 0, 255); // Magenta body p.ellipse(0, 0, this.width + 5, this.height + 5); // Underbelly (rainbow effect) p.fill(p.hue(p.frameCount * 2), 200, 200); p.ellipse(0, 10, this.width - 10, 20); // Eyes (glowing) p.fill(0, 255, 255); p.ellipse(-8, -5, 14, 12); p.ellipse(8, -5, 14, 12); p.fill(255, 255, 0); p.ellipse(-6, -5, 8, 8); p.ellipse(6, -5, 8, 8); p.fill(255, 0, 0); p.ellipse(-6, -5, 3, 3); p.ellipse(6, -5, 3, 3); // Spikes (neon colors) p.fill(0, 255, 0); // Neon green spikes p.noStroke(); for (let i = 0; i < 8; i++) { let spikeX = -18 + i * 5; let spikeHeight = 20 + p.sin(i * 0.8 + p.frameCount * 0.2) * 5; p.triangle(spikeX, -15, spikeX + 2, -15 + spikeHeight, spikeX - 2, -15 + spikeHeight * 0.6); } // Feet (bouncing) p.fill(255, 0, 0); p.ellipse(-12, 18 + p.sin(p.frameCount * 0.4) * 2, 8, 6); p.ellipse(12, 18 + p.sin(p.frameCount * 0.4 + 3.14) * 2, 8, 6); } else { // Normal mode // Main body p.fill(255, 105, 180); // Hot pink body p.ellipse(0, 0, this.width, this.height); // Underbelly (lighter pink) p.fill(255, 182, 193); p.ellipse(0, 10, this.width - 10, 20); // Eyes p.fill(255); p.ellipse(-8, -5, 12, 10); p.ellipse(8, -5, 12, 10); p.fill(0); p.ellipse(-6, -5, 6, 6); p.ellipse(6, -5, 6, 6); p.fill(255, 255, 0); p.ellipse(-6, -5, 2, 2); p.ellipse(6, -5, 2, 2); // Nose p.fill(255, 192, 203); p.ellipse(0, 0, 6, 4); p.fill(0); p.ellipse(0, 0, 2, 2); // Mouth p.stroke(0); p.strokeWeight(2); p.line(-4, 4, 4, 4); p.noStroke(); // Spikes - more detailed and numerous p.fill(199, 21, 133); // Dark pink spikes p.noStroke(); // Back spikes (main row) for (let i = 0; i < 8; i++) { let spikeX = -18 + i * 5; let spikeHeight = 15 + p.sin(i * 0.8 + p.frameCount * 0.1) * 3; p.triangle(spikeX, -15, spikeX + 2, -15 + spikeHeight, spikeX - 2, -15 + spikeHeight * 0.6); } // Side spikes p.triangle(-20, -5, -25, -2, -25, 2); p.triangle(20, -5, 25, -2, 25, 2); // Head spikes p.fill(255, 20, 147); p.triangle(-12, -15, -16, -20, -8, -20); p.triangle(12, -15, 16, -20, 8, -20); // Feet p.fill(199, 21, 133); p.ellipse(-12, 18, 8, 6); p.ellipse(12, 18, 8, 6); // Tail p.fill(255, 105, 180); p.beginShape(); p.vertex(22, 5); p.vertex(28, 0); p.vertex(22, -5); p.endShape(p.CLOSE); } p.pop(); } } 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(); // Spawn initial collectibles for (let i = 0; i < 10; i++) { collectibles.push({ x: 100 + (Math.random() * (DESIGN_WIDTH - 200)), y: 50 + Math.random() * 300, collected: false, radius: 8 }); } // Ensure no initial overlaps by adjusting hazards after collectibles for (let hazard of hazards) { let attempts = 0; while (attempts < 50 && collectibles.some(c => { let dx = hazard.x - c.x; let dy = hazard.y - c.y; let distance = Math.sqrt(dx * dx + dy * dy); return distance < hazard.radius + c.radius + 30; })) { hazard.x = 100 + (Math.random() * (DESIGN_WIDTH - 200)); hazard.y = 50 + Math.random() * 300; attempts++; } } // Spawn initial hazards (red dots) for (let i = 0; i < 5; i++) { let attempts = 0; let hazard; do { hazard = { x: 100 + (Math.random() * (DESIGN_WIDTH - 200)), y: 50 + Math.random() * 300, radius: 10 }; attempts++; } while (attempts < 50 && collectibles.some(c => { let dx = hazard.x - c.x; let dy = hazard.y - c.y; let distance = Math.sqrt(dx * dx + dy * dy); return distance < hazard.radius + c.radius + 30; })); hazards.push(hazard); } // Keyboard events document.addEventListener('keydown', (e) => { if (e.code === 'ArrowUp' && gameActive) { keys.ARROW_UP = true; e.preventDefault(); } else if (e.code === 'ArrowLeft' && gameActive) { keys.ARROW_LEFT = true; e.preventDefault(); } else if (e.code === 'ArrowRight' && gameActive) { keys.ARROW_RIGHT = true; e.preventDefault(); } else if (e.code === 'Space') { if (gameOver) { // Restart game youWin = false; gameOver = false; gameActive = true; player = new Player(); jumpCount = 0; score = 0; collectibles = []; hazards = []; // Respawn collectibles and hazards for (let i = 0; i < 10; i++) { collectibles.push({ x: 100 + (Math.random() * (DESIGN_WIDTH - 200)), y: 50 + Math.random() * 300, collected: false, radius: 8 }); } // Ensure no overlaps by adjusting hazards after collectibles for (let hazard of hazards) { let attempts = 0; while (attempts < 50 && collectibles.some(c => { let dx = hazard.x - c.x; let dy = hazard.y - c.y; let distance = Math.sqrt(dx * dx + dy * dy); return distance < hazard.radius + c.radius + 30; })) { hazard.x = 100 + (Math.random() * (DESIGN_WIDTH - 200)); hazard.y = 50 + Math.random() * 300; attempts++; } } for (let i = 0; i < 5; i++) { let attempts = 0; let hazard; do { hazard = { x: 100 + (Math.random() * (DESIGN_WIDTH - 200)), y: 50 + Math.random() * 300, radius: 10 }; attempts++; } while (attempts < 50 && collectibles.some(c => { let dx = hazard.x - c.x; let dy = hazard.y - c.y; let distance = Math.sqrt(dx * dx + dy * dy); return distance < hazard.radius + c.radius + 30; })); hazards.push(hazard); } } else { gameActive = !gameActive; } e.preventDefault(); } else if (e.key.toLowerCase() === 's' && gameActive) { skibidiMode = !skibidiMode; console.log(skibidiMode ? 'Skibidi mode ON! 🪠' : 'Skibidi mode OFF'); e.preventDefault(); } else if (e.code === 'Escape') { jumpCount = 0; e.preventDefault(); } }); document.addEventListener('keyup', (e) => { if (e.code === 'ArrowUp') { keys.ARROW_UP = false; } else if (e.code === 'ArrowLeft') { keys.ARROW_LEFT = false; } else if (e.code === 'ArrowRight') { keys.ARROW_RIGHT = 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; } document.removeEventListener('keydown', () => {}); document.removeEventListener('keyup', () => {}); }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { p.background(255, 192, 203); // Pink meadow p.fill(255, 105, 180); p.noStroke(); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); // Pink meadow overlay if (youWin) { // You win screen p.fill(0, 255, 0, 200); // Green victory overlay p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(255); p.textAlign(p.CENTER); p.textSize(48); p.text('YOU WIN!', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 40); p.textSize(24); p.text(`Final Score: ${score}`, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(20); p.fill(255, 255, 0); p.text('All yellow dots collected!', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); p.textSize(16); p.fill(255); p.text('Press SPACE to play again', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 70); p.textAlign(p.LEFT); } else if (gameOver) { // Game over screen p.fill(139, 0, 0, 200); // Dark red overlay 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 - 40); p.textSize(24); p.text(`Final Score: ${score}`, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(20); p.fill(255, 255, 0); p.text('Avoid red dots!', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); p.textSize(16); p.fill(255); p.text('Press SPACE to restart', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 70); p.textAlign(p.LEFT); } else if (gameActive) { // Gentle floating clouds p.fill(255, 255, 255, 150); p.noStroke(); for (let i = 0; i < 3; i++) { let cloudX = (p.frameCount * 0.5 + i * 200) % (DESIGN_WIDTH + 100) - 50; p.ellipse(cloudX, 100 + i * 50, 60, 40); p.ellipse(cloudX + 20, 100 + i * 50, 50, 35); p.ellipse(cloudX + 40, 100 + i * 50, 60, 40); } } else { // Paused overlay p.fill(0, 0, 0, 100); 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 SPACE to resume', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); p.textAlign(p.LEFT); } p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Draw simple ground with grass tufts p.fill(255, 20, 147); p.rect(0, DESIGN_HEIGHT - 100, DESIGN_WIDTH, 100); // Grass tufts p.fill(255, 182, 193); for (let i = 0; i < DESIGN_WIDTH; i += 30) { p.triangle(i, DESIGN_HEIGHT - 100, i + 5, DESIGN_HEIGHT - 120, i + 15, DESIGN_HEIGHT - 100); } // Update player if (!youWin) { player.update(); } // Draw collectibles p.fill(255, 255, 0); // Yellow dots p.noStroke(); for (let collectible of collectibles) { if (!collectible.collected) { p.ellipse(collectible.x, collectible.y, collectible.radius * 2); // Gentle floating animation let bobble = p.sin((p.frameCount + collectible.x) * 0.1) * 2; p.ellipse(collectible.x, collectible.y + bobble, collectible.radius * 1.5); } } // Draw hazards (red dots) if (!gameOver) { p.fill(255, 0, 0); // Red danger dots p.stroke(100, 0, 0); p.strokeWeight(2); for (let hazard of hazards) { let pulse = p.sin(p.frameCount * 0.2) * 2 + hazard.radius * 2; p.ellipse(hazard.x, hazard.y, pulse); // Pulsing inner glow p.fill(255, 50, 50, 150); p.ellipse(hazard.x, hazard.y, hazard.radius * 1.2); } p.noStroke(); } // Draw player (centered) player.draw(); // Draw jump counter and score p.fill(0); p.textSize(28); p.textAlign(p.CENTER); p.text(`Jumps: ${jumpCount}`, DESIGN_WIDTH / 2, 50); p.text(`Score: ${score}`, DESIGN_WIDTH / 2, 80); if (skibidiMode) { p.textSize(20); p.fill(255, 0, 255); p.text('SKIBIDI MODE ACTIVATED! 🪠', DESIGN_WIDTH / 2, 80); p.textSize(14); p.fill(0); p.text('The hedgehog is now grooving!', DESIGN_WIDTH / 2, 100); } // Controls display p.fill(255); p.textSize(14); p.textAlign(p.LEFT); p.text('CONTROLS:', DESIGN_WIDTH - 200, 30); p.text('↑ Arrow: Jump/Double Jump (counts +1)', DESIGN_WIDTH - 200, 50); p.text('← → Arrows: Move left/right', DESIGN_WIDTH - 200, 70); p.text('Collect yellow dots (+10 pts)!', DESIGN_WIDTH - 200, 90); p.text('AVOID RED DOTS - GAME OVER!', DESIGN_WIDTH - 200, 110); p.text('S Key: Toggle Skibidi Mode', DESIGN_WIDTH - 200, 130); p.text('SPACE: Pause/Resume', DESIGN_WIDTH - 200, 130); p.text('ESC: Reset Jump Counter', DESIGN_WIDTH - 200, 150); if (gameActive) { p.textSize(16); p.text('Press ↑ to jump!', DESIGN_WIDTH / 2, DESIGN_HEIGHT - 20); } p.textAlign(p.LEFT); p.pop(); }; // Occasionally spawn new collectibles and hazards if (!gameOver && !youWin && p.frameCount % 300 === 0) { if (collectibles.filter(c => !c.collected).length < 5) { collectibles.push({ x: 100 + (Math.random() * (DESIGN_WIDTH - 200)), y: 50 + Math.random() * 300, collected: false, radius: 8 }); } if (hazards.length < 8) { let attempts = 0; let hazard; do { hazard = { x: 100 + (Math.random() * (DESIGN_WIDTH - 200)), y: 50 + Math.random() * 300, radius: 10 }; attempts++; } while (attempts < 50 && collectibles.some(c => { let dx = hazard.x - c.x; let dy = hazard.y - c.y; let distance = Math.sqrt(dx * dx + dy * dy); return distance < hazard.radius + c.radius + 30; })); hazards.push(hazard); } } const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; // Initial game state gameActive = true; gameOver = false; youWin = false; }; 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