const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } // Game state let gameState = 'menu'; // 'menu', 'playing' let endlessMode = true; let score = 0; let highScore = 0; let speed = 3; let groundY = DESIGN_HEIGHT - 80; let player; let obstacles = []; let particles = []; let cameraX = 0; let keys = {}; let lastObstacleTime = 0; let obstacleInterval = 120; let currentLevelData = { name: "Stereo Madness", background: [10, 10, 25], groundColor: [60, 60, 80], playerColor: [0, 255, 255], obstacleColor: [255, 100, 100] }; let levels = [ { name: "Stereo Madness", background: [10, 10, 25], groundColor: [60, 60, 80], playerColor: [0, 255, 255], obstacleColor: [255, 100, 100], speed: 3, obstacleInterval: 120 }, { name: "Back on Track", background: [20, 10, 40], groundColor: [80, 40, 100], playerColor: [255, 100, 255], obstacleColor: [100, 255, 100], speed: 3.2, obstacleInterval: 115 }, { name: "Polargeist", background: [15, 30, 50], groundColor: [70, 100, 120], playerColor: [100, 255, 100], obstacleColor: [255, 150, 0], speed: 3.5, obstacleInterval: 110 } ]; let levelIndex = 0; // Particle system for jump effects and hits function createParticles(x, y, count = 8, color = [255, 200, 0]) { for (let i = 0; i < count; i++) { particles.push({ x: x, y: y, vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6 - 2, life: 40, maxLife: 40, color: color, size: Math.random() * 4 + 2 }); } } function updateParticles() { for (let i = particles.length - 1; i >= 0; i--) { let particle = particles[i]; particle.x += particle.vx; particle.y += particle.vy; particle.vy += 0.2; particle.life--; if (particle.life <= 0) { particles.splice(i, 1); } } } function drawParticles() { const sketch = window.currentSketch; if (!sketch) return; sketch.push(); sketch.translate(-cameraX, 0); for (let particle of particles) { let alpha = particle.life / particle.maxLife; sketch.fill(particle.color[0], particle.color[1], particle.color[2], alpha * 255); sketch.noStroke(); sketch.ellipse(particle.x, particle.y, particle.size, particle.size); } sketch.pop(); } const sketch = (p) => { 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); }; function initPlayer() { player = { x: 100, y: groundY - 30, width: 40, height: 30, vx: 0, vy: 0, onGround: true, runSpeed: 0, jumpPower: -16, gravity: 0.9, color: currentLevelData.playerColor, rotation: 0, rotationSpeed: 0, invulnerable: false, invulnTimer: 0, runFrame: 0 }; cameraX = 0; speed = endlessMode ? 4 : currentLevelData.speed; obstacleInterval = endlessMode ? 100 : currentLevelData.obstacleInterval; score = 0; obstacles = []; lastObstacleTime = 0; particles = []; } function checkCollisions() { // Ground collision if (player.y + player.height > groundY) { player.y = groundY - player.height; player.vy = 0; player.onGround = true; } else { player.onGround = false; } // Invulnerability handling if (player.invulnerable) { player.invulnTimer--; if (player.invulnTimer <= 0) { player.invulnerable = false; } } // Obstacle collisions for (let i = obstacles.length - 1; i >= 0; i--) { let obs = obstacles[i]; if (player.x + player.width > obs.x && player.x < obs.x + obs.width && player.y + player.height > obs.y && player.y < obs.y + obs.height) { if (!player.invulnerable) { // Hit obstacle - brief invulnerability instead of game over player.invulnerable = true; player.invulnTimer = 180; // 3 seconds at 60fps player.vy = -8; // Bounce back up createParticles(player.x + player.width/2, player.y + player.height/2, 12, [100, 255, 255]); } } // Remove off-screen obstacles if (obs.x < cameraX - 100) { obstacles.splice(i, 1); } } } function generateObstacle() { let types = ['block', 'spike', 'floating', 'double']; let type = types[Math.floor(Math.random() * types.length)]; let x = cameraX + DESIGN_WIDTH + Math.random() * 150; let y, width, height, color; if (type === 'block') { y = groundY - 40; width = 25 + Math.random() * 15; height = 40; color = currentLevelData.obstacleColor; } else if (type === 'spike') { y = groundY - 25; width = 20; height = 25; color = [200, 50, 50]; } else if (type === 'floating') { y = groundY - 100 - Math.random() * 100; width = 20; height = 30; color = [255, 150, 0]; } else if (type === 'double') { y = groundY - 60; width = 15; height = 60; color = [150, 50, 255]; } obstacles.push({x, y, width, height, color, type}); } 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.CENTER); p.noStroke(); gameState = 'menu'; // Load high score highScore = localStorage.getItem('geometryDashHighScore') || 0; highScore = parseInt(highScore) || 0; currentLevelData = levels[0]; endlessMode = false; // Override mousePressed for menu - removed since defined later 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; } }; // Input handlers let keydownHandler = (e) => { keys[e.key.toLowerCase()] = true; if (e.key.toLowerCase() === ' ' && gameState === 'menu') { initPlayer(); gameState = 'playing'; } // Removed gameOver restart - no game over state anymore }; let keyupHandler = (e) => { keys[e.key.toLowerCase()] = false; }; window.addEventListener('keydown', keydownHandler); window.addEventListener('keyup', keyupHandler); p.keydownHandler = keydownHandler; p.keyupHandler = keyupHandler; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { // Pass p to global functions window.currentSketch = p; frameCount++; // Menu state if (gameState === 'menu') { p.background(...currentLevelData.background); // Pulsing title let titlePulse = p.sin(p.frameCount * 0.1) * 20 + 255; p.fill(titlePulse, titlePulse * 0.8, 100); p.textSize(48); p.text('GEOMETRY DASH', DESIGN_WIDTH/2, DESIGN_HEIGHT/2 - 50); p.textSize(24); p.fill(255); p.text(`High Score: ${highScore}m`, DESIGN_WIDTH/2, DESIGN_HEIGHT/2); p.textSize(24); p.text(`ENDLESS MODE`, DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 20); p.textSize(20); p.text('Press SPACE or CLICK to Start', DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 50); p.textSize(16); p.text(`Press L to cycle levels (${levelIndex + 1}/${levels.length})`, DESIGN_WIDTH/2, DESIGN_HEIGHT/2 + 85); return; } // Geometry Dash style background - black with glowing grid p.background(...currentLevelData.background); // Animated grid lines p.stroke(30, 30, 50, 50); p.strokeWeight(1); for (let x = 0; x < DESIGN_WIDTH; x += 50) { let alpha = 100 + p.sin((cameraX + x) * 0.01 + p.frameCount * 0.1) * 50; p.stroke(30, 30, 50, alpha); p.line(x - cameraX % 50, 0, x - cameraX % 50, DESIGN_HEIGHT); } for (let y = 0; y < DESIGN_HEIGHT; y += 50) { let alpha = 100 + p.sin((cameraX + y) * 0.01 + p.frameCount * 0.1) * 50; p.stroke(30, 30, 50, alpha); p.line(0, y, DESIGN_WIDTH, y); } p.noStroke(); // Glowing particles in background p.fill(100, 150, 255, 30); for (let i = 0; i < 20; i++) { let bgX = (cameraX * 0.3 + i * 300 + p.frameCount * 2) % (DESIGN_WIDTH + 200) - 100; let bgY = (i * 80 + p.sin(p.frameCount * 0.05 + i) * 20) % (DESIGN_HEIGHT - 100) + 50; p.ellipse(bgX, bgY, 4 + p.sin(p.frameCount * 0.1 + i) * 2, 4 + p.sin(p.frameCount * 0.1 + i) * 2); } p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); updateParticles(); drawParticles(p); if (gameState === 'playing') { // Auto-run forward player.x += speed; // Jump input only if ((keys[' '] || keys['w'] || keys['arrowup']) && player.onGround) { player.vy = player.jumpPower; player.onGround = false; createParticles(player.x + player.width/2, player.y + player.height, 12, [255, 200, 0]); } // Update run animation if (player.onGround) { player.runFrame += 0.3; } // Physics (vertical only) player.vy += player.gravity; player.y += player.vy; // Keep player on screen if (player.x < 50) player.x = 50; if (player.x > DESIGN_WIDTH - 100) player.x = DESIGN_WIDTH - 100; // Invulnerability blink effect if (player.invulnerable) { if (Math.floor(p.frameCount / 5) % 2 === 0) { // Skip drawing this frame } } // Player rotation (Geometry Dash cube spin) player.rotation += player.rotationSpeed; if (player.onGround) { player.rotationSpeed *= 0.9; if (Math.abs(player.rotationSpeed) < 0.01) { player.rotationSpeed = 0; } } // Camera follows player cameraX = player.x - DESIGN_WIDTH * 0.4; // Generate obstacles if (frameCount - lastObstacleTime > obstacleInterval) { generateObstacle(); lastObstacleTime = frameCount; // Increase difficulty over time if (endlessMode) { if (score % 500 === 0 && score > 0) { obstacleInterval = Math.max(60, obstacleInterval - 2); speed += 0.1; } } else { if (score % 1000 === 0 && score > 0) { obstacleInterval = Math.max(70, obstacleInterval - 5); speed += 0.2; } } } // Remove old obstacles for (let i = obstacles.length - 1; i >= 0; i--) { if (obstacles[i].x < cameraX - 100) { obstacles.splice(i, 1); } } // Check collisions checkCollisions(); // No game over - player respawns high up if falls off if (player.y > DESIGN_HEIGHT + 100) { player.y = groundY - player.height; player.vy = 0; player.onGround = true; player.invulnerable = true; player.invulnTimer = 120; createParticles(player.x + player.width/2, DESIGN_HEIGHT, 15, [100, 255, 255]); } score = Math.floor((player.x + cameraX) / 10); if (score > highScore) { highScore = score; localStorage.setItem('geometryDashHighScore', highScore); } p.push(); p.translate(-cameraX, 0); p.noStroke(); // Draw running dust particles if (player.onGround) { for (let i = 0; i < 3; i++) { let dustX = player.x - 20 + Math.sin(player.runFrame + i) * 10; let dustY = groundY + 5; let dustAlpha = 0.5 + Math.sin(player.runFrame * 2 + i) * 0.3; p.fill(150, 150, 180, dustAlpha * 100); p.ellipse(dustX, dustY, 6 + Math.sin(player.runFrame * 3 + i) * 2); } } // Main platform p.fill(...currentLevelData.groundColor); for (let i = 0; i < 6; i++) { let groundX = Math.floor(cameraX / 200) * 200 + i * 200; p.rect(groundX, groundY, 200, 50, 0, 0, 10, 10); // Glowing edge p.fill(100, 100, 120, 150); p.rect(groundX, groundY - 3, 200, 6, 0, 0, 8, 8); // Pattern - glowing blocks p.fill(80, 80, 100); for (let j = 0; j < 10; j++) { let blockX = groundX + j * 20 + 1; p.rect(blockX, groundY + 1, 18, 8, 2); } // Animated glow let glowOffset = p.sin((groundX + p.frameCount * 5) * 0.01) * 2; p.fill(120, 120, 150, 100 + glowOffset * 50); p.rect(groundX + 100, groundY - 10, 100, 10, 0, 0, 12, 12); } // Draw obstacles - Geometry Dash style for (let obs of obstacles) { if (obs.x - cameraX > -50 && obs.x - cameraX < DESIGN_WIDTH + 50) { p.push(); p.translate(obs.x, obs.y); if (obs.type === 'spike') { // Glowing spike p.fill(255, 50, 50, 200); p.triangle(0, 0, -12, 25, 12, 25); p.fill(...obs.color); p.triangle(0, 0, -8, 20, 8, 20); // Spike glow effect p.fill(255, 100, 100, 100); p.triangle(-15, 30, 0, -5, 15, 30); } else if (obs.type === 'floating') { // Floating block with bobble let bobble = p.sin((obs.x + p.frameCount * 3) * 0.05) * 3; p.translate(0, bobble); p.fill(255, 200, 100, 150); p.rect(0, 0, obs.width, obs.height, 6); p.fill(...obs.color); p.rect(3, 3, obs.width - 6, obs.height - 6, 4); } else if (obs.type === 'double') { // Double spike p.fill(...obs.color); p.rect(0, 0, obs.width, obs.height, 4); // Glow p.fill(200, 100, 255, 100); p.rect(-2, -2, obs.width + 4, obs.height + 4, 6); } else { // Regular block p.fill(255, 100, 100, 150); p.rect(0, 0, obs.width, obs.height, 6); p.fill(...obs.color); p.rect(2, 2, obs.width - 4, obs.height - 4, 4); } p.pop(); } } p.pop(); // Draw player - Running character if (!player.invulnerable || Math.floor(p.frameCount / 3) % 2 === 0) { p.push(); p.translate(player.x + player.width/2, player.y + player.height/2); // Running animation let legAngle1 = Math.sin(player.runFrame * 2) * 0.8; let legAngle2 = Math.sin(player.runFrame * 2 + Math.PI) * 0.8; let armAngle1 = Math.sin(player.runFrame * 1.5) * 0.5; let armAngle2 = Math.sin(player.runFrame * 1.5 + Math.PI) * 0.5; // LeBron James body - jersey p.fill(255, 0, 0); // Red Lakers jersey p.stroke(255, 255, 255, 100); p.strokeWeight(2); p.rect(-14, -20, 28, 35, 8); // Number 23 on jersey p.fill(255); p.textSize(14); p.textAlign(p.CENTER); p.text('23', 0, -2); p.textSize(10); p.text('JAMES', 0, 8); // Head - skin tone p.fill(240, 180, 120); p.noStroke(); p.ellipse(0, -28, 22, 22); // Hair - short black fade p.fill(40, 30, 20); p.ellipse(0, -30, 18, 16); // Eyes p.fill(255); p.ellipse(-6, -29, 5, 5); p.ellipse(6, -29, 5, 5); p.fill(0); p.ellipse(-5, -29, 2, 2); p.ellipse(5, -29, 2, 2); // Arms - muscular p.stroke(240, 180, 120); p.strokeWeight(6); p.line(-10, -14, -18 + Math.cos(armAngle1) * 10, -8 + Math.sin(armAngle1) * 8); p.line(10, -14, 18 + Math.cos(armAngle2) * 10, -8 + Math.sin(armAngle2) * 8); // Hands p.fill(220, 160, 100); p.noStroke(); p.ellipse(-18 + Math.cos(armAngle1) * 10, -8 + Math.sin(armAngle1) * 8, 12, 10); p.ellipse(18 + Math.cos(armAngle2) * 10, -8 + Math.sin(armAngle2) * 8, 12, 10); // Shorts p.fill(0, 0, 0); p.rect(-12, 8, 24, 15, 6); // Legs - muscular p.stroke(240, 180, 120); p.strokeWeight(8); p.line(-8, 18, -14 + Math.cos(legAngle1) * 10, 28 + Math.sin(legAngle1) * 10); p.line(8, 18, 14 + Math.cos(legAngle2) * 10, 28 + Math.sin(legAngle2) * 10); // Sneakers - Nike style p.fill(255, 200, 0); p.noStroke(); p.ellipse(-14 + Math.cos(legAngle1) * 10, 28 + Math.sin(legAngle1) * 10, 14, 10); p.ellipse(14 + Math.cos(legAngle2) * 10, 28 + Math.sin(legAngle2) * 10, 14, 10); // Swoosh on sneakers p.fill(0); p.noStroke(); p.triangle(-18 + Math.cos(legAngle1) * 10, 25 + Math.sin(legAngle1) * 10, -12 + Math.cos(legAngle1) * 10, 28 + Math.sin(legAngle1) * 10, -15 + Math.cos(legAngle1) * 10, 32 + Math.sin(legAngle1) * 10); p.triangle(12 + Math.cos(legAngle2) * 10, 25 + Math.sin(legAngle2) * 10, 18 + Math.cos(legAngle2) * 10, 28 + Math.sin(legAngle2) * 10, 15 + Math.cos(legAngle2) * 10, 32 + Math.sin(legAngle2) * 10); p.noStroke(); p.textAlign(p.CENTER); } p.pop(); // Draw UI - Geometry Dash style p.resetMatrix(); p.fill(0, 0, 0, 180); p.rect(10, 10, 250, 60); p.fill(255); p.textSize(20); p.text(`Distance: ${score}m`, 20, 30); p.text(`Best: ${highScore}m`, 20, 50); p.text(`Speed: ${speed.toFixed(1)}`, 20, 70); p.textSize(16); p.text(`Level: ${currentLevelData.name}`, 20, 85); // Geometry Dash pulse effect on UI let uiPulse = p.sin(p.frameCount * 0.1) * 0.1 + 1; p.fill(255, 255, 255, 100); p.rect(5, 5, 260 * uiPulse, 70 * uiPulse); } p.pop(); p.pop(); }; // Click to jump (Geometry Dash style) p.mousePressed = () => { if (gameState === 'playing' && player.onGround) { player.vy = player.jumpPower; player.onGround = false; createParticles(player.x + player.width/2, player.y + player.height/2, 12, player.color); } else if (gameState === 'menu') { initPlayer(); gameState = 'playing'; } }; function loadLevel(index) { currentLevelData = { ...levels[index] }; } p.keyPressed = () => { if (p.key.toLowerCase() === 'r') { initPlayer(); } if (p.key.toLowerCase() === 'l' && gameState === 'menu') { levelIndex = (levelIndex + 1) % levels.length; currentLevelData = levels[levelIndex]; } }; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } if (p.keydownHandler) { window.removeEventListener('keydown', p.keydownHandler); } if (p.keyupHandler) { window.removeEventListener('keyup', p.keyupHandler); } 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