const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; 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; let playerX = DESIGN_WIDTH / 2; let playerY = DESIGN_HEIGHT - 50; let meteors = []; let stars = []; let powerStars = []; let shieldStars = []; let yellowStars = []; let score = 0; let gameOver = false; let frameCount = 0; let speedBoost = 0; let speedBoostTimer = 0; let shieldActive = false; let shieldTimer = 0; let endlessButton = false; let challengeButton = false; let quickButton = false; let gameStarted = false; let winAnimation = false; let landY = DESIGN_HEIGHT + 100; let marsX = DESIGN_WIDTH / 2; let marsY = DESIGN_HEIGHT; let dustParticles = []; 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(); // Create mode selection buttons const buttonContainer = p.createDiv(''); buttonContainer.position((DESIGN_WIDTH / 2 - 70) * scaleFactor + offsetX, (DESIGN_HEIGHT / 2 - 30) * scaleFactor + offsetY); buttonContainer.style('pointer-events', 'auto'); buttonContainer.style('z-index', '1000'); const endlessBtn = p.createButton('Endless Mode'); endlessBtn.parent(buttonContainer); endlessBtn.position(0, 0); endlessBtn.style('width', '140px'); endlessBtn.style('height', '50px'); endlessBtn.style('font-size', '18px'); endlessBtn.style('font-weight', 'bold'); endlessBtn.style('background', 'linear-gradient(45deg, #ff6b6b, #ffd93d)'); endlessBtn.style('border', 'none'); endlessBtn.style('border-radius', '10px'); endlessBtn.style('color', 'white'); endlessBtn.style('cursor', 'pointer'); endlessBtn.mousePressed(() => { endlessButton = true; gameStarted = true; buttonContainer.hide(); }); const challengeBtn = p.createButton('Challenge'); challengeBtn.parent(buttonContainer); challengeBtn.position(0, 60); challengeBtn.style('width', '140px'); challengeBtn.style('height', '50px'); challengeBtn.style('font-size', '18px'); challengeBtn.style('font-weight', 'bold'); challengeBtn.style('background', 'linear-gradient(45deg, #4ecdc4, #44a08d)'); challengeBtn.style('border', 'none'); challengeBtn.style('border-radius', '10px'); challengeBtn.style('color', 'white'); challengeBtn.style('cursor', 'pointer'); challengeBtn.mousePressed(() => { challengeButton = true; gameStarted = true; buttonContainer.hide(); }); const quickBtn = p.createButton('Quick Mode'); quickBtn.parent(buttonContainer); quickBtn.position(0, 120); quickBtn.style('width', '140px'); quickBtn.style('height', '50px'); quickBtn.style('font-size', '18px'); quickBtn.style('font-weight', 'bold'); quickBtn.style('background', 'linear-gradient(45deg, #ffd93d, #ff6b6b)'); quickBtn.style('border', 'none'); quickBtn.style('border-radius', '10px'); quickBtn.style('color', 'white'); quickBtn.style('cursor', 'pointer'); quickBtn.mousePressed(() => { quickButton = true; gameStarted = true; buttonContainer.hide(); }); 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.mousePressed = () => { if (!gameStarted) return; if (gameOver || (challengeButton && score >= 15000) || (quickButton && score >= 3500)) { // Restart game playerX = DESIGN_WIDTH / 2; playerY = DESIGN_HEIGHT - 50; meteors = []; stars = []; powerStars = []; shieldStars = []; yellowStars = []; score = 0; gameOver = false; frameCount = 0; speedBoost = 0; speedBoostTimer = 0; shieldActive = false; shieldTimer = 0; endlessButton = false; challengeButton = false; quickButton = false; winAnimation = false; landY = DESIGN_HEIGHT + 100; dustParticles = []; } }; p.draw = () => { p.background(15, 23, 42); // Start menu overlay if (!gameStarted) { p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); p.fill(0, 0, 0, 200); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(255); p.textSize(48); p.textAlign(p.CENTER, p.CENTER); p.text("ASTEROID RUNNER", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 120); p.textSize(24); p.text("Choose your mode:", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 80); p.textAlign(p.LEFT, p.TOP); p.pop(); return; } // Star function for drawing stars p.star = function(x, y, radius1, radius2, npoints) { p.noStroke(); let angle = p.TWO_PI / npoints; let halfAngle = angle / 2.0; p.beginShape(); for (let a = 0; a < p.TWO_PI; a += angle) { let sx = x + p.cos(a) * radius2; let sy = y + p.sin(a) * radius2; p.vertex(sx, sy); sx = x + p.cos(a + halfAngle) * radius1; sy = y + p.sin(a + halfAngle) * radius1; p.vertex(sx, sy); } p.endShape(p.CLOSE); }; p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); const drawMars = () => { // Mars surface p.fill(165, 42, 42); p.rect(0, marsY - 80, DESIGN_WIDTH, 80); // Mars craters p.fill(139, 28, 28); p.ellipse(200, marsY - 50, 60, 40); p.ellipse(400, marsY - 60, 50, 35); p.ellipse(600, marsY - 45, 70, 45); // Surface details p.stroke(101, 31, 19); p.strokeWeight(1); for (let i = 0; i < 10; i++) { p.line(i * 80, marsY - 80, i * 80 + 40, marsY - 20); } p.noStroke(); }; if (winAnimation) { // Win animation - landing on Mars frameCount++; // Animate rocket descending landY += 1.5; playerX = marsX; // Update dust particles if (landY > marsY - 100) { if (p.frameCount % 3 === 0) { dustParticles.push({ x: p.random(marsX - 30, marsX + 30), y: marsY - 80, vy: p.random(-2, 2), vx: p.random(-1, 1), life: 60 }); } } // Update dust particles for (let i = dustParticles.length - 1; i >= 0; i--) { const dust = dustParticles[i]; dust.y += dust.vy; dust.x += dust.vx; dust.life--; dust.vy += 0.1; if (dust.life <= 0) { dustParticles.splice(i, 1); } } // Draw background stars p.fill(255, 255, 200, 100); for (let i = 0; i < 50; i++) { p.star( (i * 137.5) % DESIGN_WIDTH, (i * 239.1 + frameCount * 0.5) % 200, 3, 6, 5 ); } // Draw Mars drawMars(); // Draw dust particles for (let dust of dustParticles) { p.fill(210, 180, 140, dust.life / 60 * 150); p.ellipse(dust.x, dust.y, 6, 6); } // Draw landing rocket (orange for landing) p.fill(255, 165, 0); p.triangle( playerX, landY - 20, playerX - 12, landY + 10, playerX + 12, landY + 10 ); p.fill(255, 140, 0); p.triangle( playerX - 18, landY - 5, playerX - 28, landY + 5, playerX - 12, landY + 5 ); p.triangle( playerX + 18, landY - 5, playerX + 28, landY + 5, playerX + 12, landY + 5 ); p.fill(255); p.ellipse(playerX, landY - 8, 8, 6); // Landing flames if (landY > marsY - 100) { p.fill(255, 200, 0, 200); p.triangle( playerX - 8, landY + 12, playerX + 8, landY + 12, playerX, landY + 30 ); p.fill(255, 100, 0, 220); p.triangle( playerX - 5, landY + 18, playerX + 5, landY + 18, playerX, landY + 28 ); } // Landing complete message if (landY >= marsY - 30) { p.fill(0, 255, 127); p.textSize(64); p.textAlign(p.CENTER, p.CENTER); p.text("MISSION SUCCESS!", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 50); p.textSize(32); p.fill(255, 255, 200); p.text("You landed on Mars!", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(24); p.text("Click to play again", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 80); p.textAlign(p.LEFT, p.TOP); } else { // During descent p.fill(255); p.textSize(32); p.textAlign(p.CENTER, p.CENTER); p.text("Landing on Mars...", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textAlign(p.LEFT, p.TOP); } return; } if (!gameOver) { frameCount++; // Update player position with speed boost const pointer = toDesignSpace(p.mouseX, p.mouseY); const moveSpeed = speedBoost > 0 ? 0.4 : 0.2; playerX += (pointer.x - playerX) * moveSpeed; playerY += (pointer.y - playerY) * moveSpeed * 0.5; // Less vertical movement playerX = p.constrain(playerX, 0, DESIGN_WIDTH); playerY = p.constrain(playerY, 0, DESIGN_HEIGHT - 50); // Add new meteor const meteorSpawnRate = quickButton ? 0.015 : (score >= 3000 ? 0.04 : 0.02); if (p.random() < meteorSpawnRate) { meteors.push({ x: p.random(0, DESIGN_WIDTH), y: 0, speed: p.random(2, 5) + (score >= 1500 ? 2 : 0), size: p.random(20, 40) + (score >= 2000 ? 20 : 0), rotation: p.random(0, p.TWO_PI), rotationSpeed: p.random(-0.1, 0.1) }); } // Add new star if (p.random() < 0.001) { stars.push({ x: p.random(0, DESIGN_WIDTH), y: 0, speed: p.random(1, 3), size: p.random(8, 15), twinkle: p.random(0, p.TWO_PI) }); } // Add new power star (yellow speed boost) if (p.random() < 0.001) { powerStars.push({ x: p.random(0, DESIGN_WIDTH), y: 0, speed: p.random(1, 2.5), size: p.random(12, 18), twinkle: p.random(0, p.TWO_PI) }); } // Add new shield star (yellow shield) if (p.random() < 0.00075) { shieldStars.push({ x: p.random(0, DESIGN_WIDTH), y: 0, speed: p.random(1.2, 2.8), size: p.random(14, 20), twinkle: p.random(0, p.TWO_PI) }); } // Add milestone yellow stars every 1000 points if (score > 0 && score % 1000 === 0 && score / 1000 !== Math.floor(score / 1000)) { for (let i = 0; i < 1; i++) { yellowStars.push({ x: p.random(0, DESIGN_WIDTH), y: 0, speed: p.random(1.5, 2.5), size: p.random(16, 22), twinkle: p.random(0, p.TWO_PI) }); } } // Update and draw meteors for (let i = meteors.length - 1; i >= 0; i--) { const meteor = meteors[i]; meteor.y += meteor.speed; meteor.rotation += meteor.rotationSpeed; // Draw detailed meteor p.fill(139, 69, 19); p.ellipse(meteor.x, meteor.y, meteor.size, meteor.size * 0.8); // Crater details p.fill(120, 59, 15); p.ellipse(meteor.x - meteor.size * 0.2, meteor.y - meteor.size * 0.1, meteor.size * 0.3, meteor.size * 0.25); p.ellipse(meteor.x + meteor.size * 0.15, meteor.y + meteor.size * 0.2, meteor.size * 0.25, meteor.size * 0.2); // Surface cracks p.stroke(101, 67, 33); p.strokeWeight(2); p.line(meteor.x - meteor.size * 0.3, meteor.y - meteor.size * 0.2, meteor.x + meteor.size * 0.25, meteor.y + meteor.size * 0.15); p.line(meteor.x + meteor.size * 0.1, meteor.y - meteor.size * 0.35, meteor.x - meteor.size * 0.2, meteor.y + meteor.size * 0.1); p.noStroke(); // Glowing trail for (let i = 0; i < 5; i++) { p.fill(255, 165 - i * 30, 0, 100 - i * 15); p.circle(meteor.x, meteor.y + meteor.size * 0.6 + i * 3, meteor.size * (0.4 - i * 0.08)); } // Check collision const collisionDist = p.dist(meteor.x, meteor.y, playerX, playerY); if (collisionDist < meteor.size / 2 + 10) { if (!shieldActive) { gameOver = true; } } // Remove off-screen meteors if (meteor.y > DESIGN_HEIGHT) { meteors.splice(i, 1); } } // Update speed boost timer if (speedBoostTimer > 0) { speedBoostTimer--; if (speedBoostTimer <= 0) { speedBoost = 0; } } // Update shield timer if (shieldTimer > 0) { shieldTimer--; if (shieldTimer <= 0) { shieldActive = false; } } // Update and draw stars for (let i = stars.length - 1; i >= 0; i--) { const star = stars[i]; star.y += star.speed; star.twinkle += 0.2; // Draw twinkling star const twinkleSize = star.size + p.sin(star.twinkle) * 3; p.fill(255, 255, 200, 160); p.noStroke(); p.star(star.x, star.y, twinkleSize * 0.3, twinkleSize, 5); // Check star collection const starDist = p.dist(star.x, star.y, playerX, playerY); if (starDist < star.size + 10) { score += 100; if ((challengeButton && score >= 15000) || (quickButton && score >= 3500)) { winAnimation = true; gameOver = true; } stars.splice(i, 1); continue; } // Remove off-screen stars if (star.y > DESIGN_HEIGHT) { stars.splice(i, 1); } } // Update and draw power stars (yellow speed boost) for (let i = powerStars.length - 1; i >= 0; i--) { const powerStar = powerStars[i]; powerStar.y += powerStar.speed; powerStar.twinkle += 0.25; // Draw yellow twinkling power star const twinkleSize = powerStar.size + p.sin(powerStar.twinkle) * 4; p.fill(255, 240, 150, 160); p.noStroke(); p.star(powerStar.x, powerStar.y, twinkleSize * 0.4, twinkleSize, 5); // Glowing aura p.fill(255, 255, 200, 60); p.circle(powerStar.x, powerStar.y, twinkleSize * 1.8); // Check power star collection const powerDist = p.dist(powerStar.x, powerStar.y, playerX, playerY); if (powerDist < powerStar.size + 12) { score += 500; speedBoost = 4; speedBoostTimer = 300; // 5 seconds at 60fps powerStars.splice(i, 1); continue; } // Remove off-screen power stars if (powerStar.y > DESIGN_HEIGHT) { powerStars.splice(i, 1); } } // Update and draw shield stars (yellow shield) for (let i = shieldStars.length - 1; i >= 0; i--) { const shieldStar = shieldStars[i]; shieldStar.y += shieldStar.speed; shieldStar.twinkle += 0.22; // Draw yellow shield star with blue tint const twinkleSize = shieldStar.size + p.sin(shieldStar.twinkle) * 5; p.fill(255, 240, 150, 170); p.noStroke(); p.star(shieldStar.x, shieldStar.y, twinkleSize * 0.35, twinkleSize, 5); // Protective aura p.fill(59, 130, 246, 100); p.circle(shieldStar.x, shieldStar.y, twinkleSize * 2.2); p.fill(255, 255, 200, 45); p.circle(shieldStar.x, shieldStar.y, twinkleSize * 1.5); // Check shield star collection const shieldDist = p.dist(shieldStar.x, shieldStar.y, playerX, playerY); if (shieldDist < shieldStar.size + 14) { score += 300; shieldActive = true; shieldTimer = 300; // 5 seconds at 60fps shieldStars.splice(i, 1); continue; } // Remove off-screen shield stars if (shieldStar.y > DESIGN_HEIGHT) { shieldStars.splice(i, 1); } } // Update and draw milestone yellow stars for (let i = yellowStars.length - 1; i >= 0; i--) { const yellowStar = yellowStars[i]; yellowStar.y += yellowStar.speed; yellowStar.twinkle += 0.3; // Draw bright yellow twinkling star const twinkleSize = yellowStar.size + p.sin(yellowStar.twinkle) * 6; p.fill(255, 240, 150, 200); p.noStroke(); p.star(yellowStar.x, yellowStar.y, twinkleSize * 0.45, twinkleSize, 5); // Bright glowing aura p.fill(255, 255, 0, 80); p.circle(yellowStar.x, yellowStar.y, twinkleSize * 2.5); p.fill(255, 255, 200, 40); p.circle(yellowStar.x, yellowStar.y, twinkleSize * 1.8); // Check yellow star collection const yellowDist = p.dist(yellowStar.x, yellowStar.y, playerX, playerY); if (yellowDist < yellowStar.size + 16) { score += 10; yellowStars.splice(i, 1); continue; } // Remove off-screen yellow stars if (yellowStar.y > DESIGN_HEIGHT) { yellowStars.splice(i, 1); } } // Draw player (rocket) p.fill(34, 197, 94); // Main body p.triangle( playerX, playerY - 20, playerX - 10, playerY + 10, playerX + 10, playerY + 10 ); // Wings p.fill(59, 130, 246); p.triangle( playerX - 15, playerY - 5, playerX - 25, playerY + 5, playerX - 10, playerY + 5 ); p.triangle( playerX + 15, playerY - 5, playerX + 25, playerY + 5, playerX + 10, playerY + 5 ); // Cockpit p.fill(255, 255, 255); p.ellipse(playerX, playerY - 8, 8, 6); // Engine flame p.fill(255, 165, 0, 150); p.triangle( playerX - 6, playerY + 12, playerX + 6, playerY + 12, playerX, playerY + 25 ); p.fill(255, 69, 0, 200); p.triangle( playerX - 4, playerY + 15, playerX + 4, playerY + 15, playerX, playerY + 22 ); // Draw shield effect if (shieldActive) { p.noFill(); p.stroke(59, 130, 246); p.strokeWeight(3); for (let i = 0; i < 3; i++) { p.circle(playerX, playerY, 50 + i * 15 + p.sin(frameCount * 0.2 + i) * 5); } p.stroke(255, 255, 200, 120); p.strokeWeight(2); p.circle(playerX, playerY, 40 + p.sin(frameCount * 0.15) * 8); p.noStroke(); } // Display score and speed boost p.fill(255); p.textSize(24); p.text(`Score: ${score.toLocaleString()}${quickButton ? ' / 3500' : challengeButton ? ' / 15000' : ''}`, 10, 30); // Show milestone indicator if (score > 0 && score % 1000 < 100) { p.fill(255, 255, 0); p.textSize(18); p.text(`MILESTONE! Collect yellow stars (0 pts)`, 10, 55); } if (speedBoost > 0) { p.fill(255, 255, 200); p.textSize(20); p.text(`SPEED BOOST! ${Math.ceil(speedBoostTimer / 60)}s`, 10, 60); } if (shieldActive) { p.fill(255, 255, 200); p.textSize(20); p.text(`SHIELD! ${Math.ceil(shieldTimer / 60)}s`, 10, speedBoost > 0 ? 85 : 60); } p.fill(255); p.textSize(20); p.textAlign(p.LEFT, p.TOP); p.textAlign(p.LEFT, p.TOP); } else { // Game over screen p.fill(255, 0, 0); p.textSize(48); p.textAlign(p.CENTER, p.CENTER); p.text("Game Over", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(24); p.text(`Final Score: ${score.toLocaleString()}`, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 60); p.text("Click to restart", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 100); p.textAlign(p.LEFT, p.TOP); } 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); } };

SpaceDodger (Fork v25)

How to play