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 gameState = 'playing'; let score = 0; let coins = []; let enemies = []; let camX = 0; let levelWidth = 999999; // Infinite level let gravity = 0.6; // FASTER FALLING let jumpForce = -13; // WEAKER JUMP let keys = {}; 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(x, y) { this.x = x; this.y = y; this.width = 24; this.height = 32; this.vx = 0; this.vy = 0; this.onGround = false; this.canDoubleJump = false; this.facingRight = true; this.color = [255, 105, 180]; // Pink hero } update() { // Horizontal movement - FASTER if (keys['ArrowLeft'] || keys['a']) { this.vx = -4.5; this.facingRight = false; } else if (keys['ArrowRight'] || keys['d']) { this.vx = 4.5; this.facingRight = true; } else { this.vx *= 0.75; } // Jumping - Double jump enabled if ((keys['ArrowUp'] || keys['w'] || keys[' ']) && (this.onGround || this.canDoubleJump)) { this.vy = jumpForce; if (this.onGround) { this.onGround = false; this.canDoubleJump = true; } else { this.canDoubleJump = false; } console.log('Pink character jumps! 🚀'); // Enhanced feedback } // Gravity - EVEN SOFTER for slower falling this.vy += gravity; // Update position this.x += this.vx; this.y += this.vy; // Collect coins for (let i = coins.length - 1; i >= 0; i--) { let coin = coins[i]; if (p.dist(this.x + this.width/2, this.y + this.height/2, coin.x, coin.y) < 25) { coins.splice(i, 1); score += 10; } } // Check platform collisions this.onGround = false; this.canDoubleJump = false; // Reset double jump when checking collisions for (let platform of platforms) { if (this.x < platform.x + platform.width && this.x + this.width > platform.x && this.y + this.height <= platform.y + 5 && this.y + this.height + this.vy >= platform.y && this.vy >= 0) { this.y = platform.y - this.height; this.vy = 0; this.onGround = true; this.canDoubleJump = true; // Enable double jump on landing } } // Enemy collision for (let enemy of enemies) { if (this.x < enemy.x + enemy.width && this.x + this.width > enemy.x && this.y < enemy.y + enemy.height && this.y + this.height > enemy.y) { // Reset player this.x = 100; this.y = 400; this.vx = 0; this.vy = 0; score = Math.max(0, score - 50); } } // World boundaries if (this.x < 0) this.x = 0; if (this.y > DESIGN_HEIGHT) { // Respawn to beginning when falling off bottom this.x = 100; this.y = 400; this.vx = 0; this.vy = 0; camX = 0; score = Math.max(0, score - 10); // Small penalty for falling console.log('Respawned to beginning after falling! 💀'); } } draw() { p.push(); if (!this.facingRight) p.scale(-1, 1); p.translate(this.facingRight ? this.x : -this.x - this.width, this.y); // Body p.fill(this.color); p.stroke(0); p.strokeWeight(1); p.rect(0, 8, this.width, this.height - 16); // Head p.fill(255, 220, 177); p.noStroke(); p.ellipse(this.width/2, 0, this.width, this.height * 0.6); // Eyes p.fill(0); p.ellipse(this.width/3, -2, 4, 4); p.ellipse(2*this.width/3, -2, 4, 4); // Arms/Legs p.stroke(0); p.strokeWeight(2); p.line(this.width/4, this.height/2, this.width/4, this.height - 8); p.line(3*this.width/4, this.height/2, 3*this.width/4, this.height - 8); p.pop(); } } class Platform { constructor(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.color = [255, 192, 203]; // Light pink platforms } draw() { p.fill(this.color); p.stroke(60, 40, 20); p.strokeWeight(2); p.rect(this.x, this.y, this.width, this.height); } } class Coin { constructor(x, y) { this.x = x; this.y = y; this.size = 16; this.rotation = 0; this.bowColor = [255, 105, 180]; // Pink bow color } update() { this.rotation += 0.1; } draw() { p.push(); p.translate(this.x, this.y); p.rotate(this.rotation); // Pink bow ribbon loops p.fill(this.bowColor); p.noStroke(); // Left loop p.ellipse(-6, -2, 12, 8); // Right loop p.ellipse(6, -2, 12, 8); // Center knot p.fill(255, 192, 203); // Lighter pink for knot p.ellipse(0, -2, 8, 6); // Bow tails p.fill(this.bowColor); p.triangle(-4, 4, 4, 4, 0, 8); // Sparkle effect p.fill(255, 255, 255, 200); p.noStroke(); p.triangle(0, -8, 4, -4, -4, -4); p.pop(); } } class Enemy { constructor(x, y) { this.x = x; this.y = y; this.width = 20; this.height = 20; this.vx = 3.5; this.vy = 0; this.patrolLeft = x - 80; this.patrolRight = x + 80; this.color = [200, 50, 50]; } update() { this.vx = Math.abs(this.vx) * (this.x < this.patrolRight ? 1 : -1); if (this.x <= this.patrolLeft) this.vx = 2; if (this.x >= this.patrolRight) this.vx = -2; this.vy += gravity; this.x += this.vx; this.y += this.vy; // Platform collision for enemy for (let platform of platforms) { if (this.x < platform.x + platform.width && this.x + this.width > platform.x && this.y + this.height <= platform.y + 5 && this.y + this.height + this.vy >= platform.y) { this.y = platform.y - this.height; this.vy = 0; } } } draw() { p.fill(this.color); p.stroke(100, 0, 0); p.rect(this.x, this.y, this.width, this.height); // Angry eyes p.fill(255); p.ellipse(this.x + 5, this.y + 5, 6, 6); p.ellipse(this.x + 15, this.y + 5, 6, 6); p.fill(0); p.ellipse(this.x + 5, this.y + 5, 2, 2); p.ellipse(this.x + 15, this.y + 5, 2, 2); } } p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.textAlign(p.LEFT); const container = getContainer(); // Initialize game player = new Player(100, 400); platforms = [ new Platform(0, DESIGN_HEIGHT - 50, levelWidth, 50), // Long ground new Platform(200, 450, 200, 20), new Platform(350, 350, 150, 20), new Platform(600, 250, 150, 20), new Platform(900, 400, 150, 20), new Platform(1200, 300, 200, 20), new Platform(1500, 200, 150, 20), new Platform(1800, 450, 180, 20), new Platform(2100, 350, 160, 20), new Platform(2400, 250, 140, 20), new Platform(2700, 400, 200, 20), new Platform(3000, 300, 180, 20), new Platform(3300, 200, 150, 20), new Platform(3600, 450, 200, 20), new Platform(3900, 350, 160, 20), new Platform(4200, 250, 140, 20), new Platform(4500, 400, 180, 20), new Platform(4800, 300, 150, 20), new Platform(5100, 200, 200, 20), new Platform(5400, 450, 160, 20), new Platform(5700, 350, 100, 20), new Platform(5800, 280, 80, 20), new Platform(6000, 250, 100, 20), new Platform(6100, 180, 90, 20), new Platform(6300, 400, 120, 20), new Platform(6450, 330, 70, 20), new Platform(6600, 300, 100, 20), new Platform(6700, 220, 80, 20), new Platform(6900, 200, 90, 20), new Platform(7050, 130, 60, 20), new Platform(7200, 450, 100, 20), new Platform(7300, 380, 80, 20), new Platform(7500, 350, 120, 20) ]; // Coins coins = [ new Coin(250, 420), new Coin(550, 320), new Coin(850, 220), new Coin(1150, 370), new Coin(1450, 270), new Coin(1750, 170), new Coin(300, 200), new Coin(900, 150), new Coin(2050, 420), new Coin(2350, 320), new Coin(2650, 220), new Coin(2950, 370), new Coin(3250, 270), new Coin(2100, 200), new Coin(2800, 150), new Coin(3550, 170), new Coin(3850, 420), new Coin(4150, 320), new Coin(4450, 220), new Coin(4750, 370), new Coin(5050, 270), new Coin(5350, 170), new Coin(5650, 420), new Coin(3600, 150), new Coin(4800, 200), new Coin(5500, 150), new Coin(5800, 420), new Coin(6150, 320), new Coin(6450, 220), new Coin(6750, 370), new Coin(7050, 270), new Coin(7350, 170) ]; // Enemies - SLOWER MOVEMENT enemies = [ new Enemy(550, 330), new Enemy(850, 220), new Enemy(1150, 380), new Enemy(1450, 270), new Enemy(1750, 180), new Enemy(2150, 430), new Enemy(2450, 220), new Enemy(2850, 280), new Enemy(3350, 380), new Enemy(3650, 180), new Enemy(4050, 430), new Enemy(4350, 270), new Enemy(4650, 280), new Enemy(4950, 370), new Enemy(5250, 380), new Enemy(5550, 170), new Enemy(5650, 180), new Enemy(5850, 360), new Enemy(6150, 320), new Enemy(6450, 210), new Enemy(6750, 370), new Enemy(6850, 410), new Enemy(7150, 290) ]; // Keyboard events window.addEventListener('keydown', (e) => { keys[e.key] = true; if (e.key === ' ') e.preventDefault(); }); window.addEventListener('keyup', (e) => { keys[e.key] = false; }); 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; } window.removeEventListener('keydown', arguments.callee); window.removeEventListener('keyup', arguments.callee); }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { // Lunar Space Background with Moon and Stars // Deep space gradient for (let i = 0; i <= DESIGN_HEIGHT; i++) { let inter = p.map(i, 0, DESIGN_HEIGHT, 0, 1); let c = p.lerpColor(p.color(5, 5, 15), p.color(15, 10, 30), inter); p.stroke(c); p.line(0, i, DESIGN_WIDTH, i); } // Distant stars (slow parallax) p.fill(255, 105, 180, 80); p.noStroke(); for (let i = 0; i < 60; i++) { let x = (i * 137.5) % 8000 - camX * 0.1; let y = (i * 239.3) % 600 + (Math.sin(i * 0.1 - camX * 0.001) * 30); p.ellipse(x, y, 1.5, 1.5); } // Twinkling stars (normal speed) p.fill(255, 105, 180, 180); for (let i = 0; i < 40; i++) { let x = (i * 173.2) % 8000 - camX * 0.3; let y = (i * 181.1) % 600 + (Math.sin(p.frameCount * 0.05 + i) * 15); let size = 1.2 + Math.sin(p.frameCount * 0.08 + i) * 0.8; p.ellipse(x, y, size, size); } // Glowing Moon p.fill(255, 192, 203, 220); p.noStroke(); let moonX = 1200 - camX * 0.4; let moonY = 100; p.ellipse(moonX, moonY, 180, 180); // Moon craters p.fill(255, 160, 180, 150); p.ellipse(moonX - 30, moonY - 10, 25, 20); p.ellipse(moonX + 20, moonY + 15, 30, 25); p.ellipse(moonX + 50, moonY - 20, 15, 15); // Moon glow p.drawingContext.shadowColor = 'rgba(255, 192, 203, 0.3)'; p.drawingContext.shadowBlur = 40; p.ellipse(moonX, moonY, 250, 250); p.drawingContext.shadowBlur = 0; // Constellation lines (subtle) p.stroke(255, 105, 180, 20); p.strokeWeight(1); // Big Dipper let star1 = 800 - camX * 0.2; let star2 = 1000 - camX * 0.2; let star3 = 950 - camX * 0.2; let star4 = 1200 - camX * 0.2; let star5 = 1300 - camX * 0.2; let star6 = 1400 - camX * 0.2; let star7 = 1500 - camX * 0.2; p.line(star1, 200, star2, 180); p.line(star2, 180, star3, 220); p.line(star3, 220, star4, 210); p.line(star4, 210, star5, 190); p.line(star5, 190, star6, 160); p.line(star6, 160, star7, 180); // Update game objects player.update(); for (let coin of coins) coin.update(); for (let enemy of enemies) enemy.update(); // Camera follow camX = player.x - DESIGN_WIDTH / 2; camX = p.constrain(camX, 0, Math.max(0, levelWidth - DESIGN_WIDTH)); // No win condition - infinite obby! // Game state UI if (gameState === 'win') { p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); p.fill(0, 200, 0); p.textSize(48); p.textAlign(p.CENTER); p.text('YOU WIN! 🎉', DESIGN_WIDTH/2, DESIGN_HEIGHT/2); p.textSize(24); p.text(`Score: ${score}`, DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 40); p.text('Refresh to play again', DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 80); p.pop(); return; } // RENDERING p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); p.translate(-camX, 0); // Draw platforms for (let platform of platforms) { platform.draw(); } // Draw coins for (let coin of coins) { coin.draw(); } // Draw enemies for (let enemy of enemies) { enemy.draw(); } // Draw player player.draw(); p.pop(); // UI Overlay p.fill(0); p.textSize(20); p.text(`Score: ${score}`, 10, 30); p.text(`Coins: ${coins.length}`, 10, 55); p.text(`Distance: ${Math.round(player.x)}`, 10, 80); p.text('WASD/Arrow Keys to move, SPACE to jump', 10, DESIGN_HEIGHT - 20); p.text('Red enemies = lose life, Gold coins = points', 10, DESIGN_HEIGHT - 40); } }; 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