const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; const GRAVITY = 0.4; const JUMP_STRENGTH = -12; const SPIKE_SPEED = 5; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let angle = 0; let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; // Game state let playerY = DESIGN_HEIGHT / 2; let playerVelocity = 0; let spikes = []; let score = 0; let gameState = 'playing'; // 'playing', 'gameOver' let highScores = JSON.parse(localStorage.getItem('geometryDashHighScores') || '[]'); if (highScores.length > 10) { highScores = highScores.slice(0, 10); } 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, }); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.noStroke(); 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 = () => { p.background(135, 206, 235); // Sky blue p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Ground p.fill(34, 139, 34); p.rect(0, DESIGN_HEIGHT - 100, DESIGN_WIDTH, 100); if (gameState === 'playing') { updateGame(); drawPlayer(); drawSpikes(); drawScore(); } if (gameState === 'gameOver') { drawPlayer(); drawSpikes(); drawScore(); drawGameOver(); } p.pop(); }; const updateGame = () => { if (gameState !== 'playing') return; // Player physics playerVelocity += GRAVITY; playerY += playerVelocity; // Generate spikes if (p.frameCount % 120 === 0) { spikes.push({ x: DESIGN_WIDTH }); } // Move spikes for (let i = spikes.length - 1; i >= 0; i--) { spikes[i].x -= SPIKE_SPEED; // Remove offscreen spikes if (spikes[i].x + 40 < 0) { spikes.splice(i, 1); } } // Update score (distance based) score = Math.floor(p.frameCount / 10); // Collision detection if (playerY < 0 || playerY > DESIGN_HEIGHT - 100 - 20) { gameState = 'gameOver'; } // Spike collision for (let spike of spikes) { if (playerY + 20 > DESIGN_HEIGHT - 100 && 100 > spike.x - 10 && 100 < spike.x + 30 && playerY < DESIGN_HEIGHT - 80) { gameState = 'gameOver'; } } }; const drawPlayer = () => { p.fill(255); p.rect(100 - 10, playerY, 20, 20); }; const drawSpikes = () => { p.fill(255, 0, 0); for (let spike of spikes) { p.triangle(spike.x, DESIGN_HEIGHT - 100, spike.x - 10, DESIGN_HEIGHT - 60, spike.x + 20, DESIGN_HEIGHT - 100); } }; const drawScore = () => { p.fill(0, 0, 0); p.textAlign(p.LEFT); p.textSize(24); p.text('Score: ' + score, 20, 40); }; const drawGameOver = () => { p.fill(0, 0, 0, 180); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(255); p.textAlign(p.CENTER, p.CENTER); p.textSize(64); p.text('Geometry Dash', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 80); p.textSize(32); p.text('Score: ' + score, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 40); // High scores p.textSize(24); p.text('High Scores:', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 10); p.textSize(20); for (let i = 0; i < highScores.length && i < 10; i++) { const entry = highScores[i]; p.text((i + 1) + '. ' + entry.name + ' - ' + entry.score, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40 + i * 25); } p.textSize(24); p.text('Click to restart', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 170); }; p.mousePressed = () => { const pointer = toDesignSpace(p.mouseX, p.mouseY); if (pointer.x >= 0 && pointer.x <= DESIGN_WIDTH && pointer.y >= 0 && pointer.y <= DESIGN_HEIGHT) { if (gameState === 'playing') { playerVelocity = JUMP_STRENGTH; } if (gameState === 'gameOver') { // Check high score if (highScores.length < 10 || score > Math.min(...highScores.map(s => s.score))) { const name = window.prompt('New high score! Enter your name:', 'Anonymous') || 'Anonymous'; highScores.push({ name, score }); highScores.sort((a, b) => b.score - a.score); highScores = highScores.slice(0, 10); localStorage.setItem('geometryDashHighScores', JSON.stringify(highScores)); } // Restart playerY = DESIGN_HEIGHT / 2; playerVelocity = 0; spikes = []; score = 0; gameState = 'playing'; } } }; p.keyPressed = () => { if (p.keyCode === 32) { // Spacebar if (gameState === 'playing') { playerVelocity = JUMP_STRENGTH; } if (gameState === 'gameOver') { // Check high score if (highScores.length < 10 || score > Math.min(...highScores.map(s => s.score))) { const name = window.prompt('New high score! Enter your name:', 'Anonymous') || 'Anonymous'; highScores.push({ name, score }); highScores.sort((a, b) => b.score - a.score); highScores = highScores.slice(0, 10); localStorage.setItem('geometryDashHighScores', JSON.stringify(highScores)); } // Restart playerY = DESIGN_HEIGHT / 2; playerVelocity = 0; spikes = []; score = 0; gameState = 'playing'; } } }; 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