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 score = 0; let gameOver = false; let frameCount = 0; let speedBoost = 0; let speedBoostTimer = 0; let shieldActive = false; let shieldTimer = 0; 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(); playerX = DESIGN_WIDTH / 2; playerY = DESIGN_HEIGHT - 50; meteors = []; stars = []; powerStars = []; shieldStars = []; score = 0; gameOver = false; frameCount = 0; speedBoost = 0; speedBoostTimer = 0; shieldActive = false; shieldTimer = 0; 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 (gameOver || score >= 15000) { // Restart game playerX = DESIGN_WIDTH / 2; playerY = DESIGN_HEIGHT - 50; meteors = []; stars = []; powerStars = []; shieldStars = []; score = 0; gameOver = false; frameCount = 0; speedBoost = 0; speedBoostTimer = 0; } }; p.draw = () => { p.background(15, 23, 42); // 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); 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 if (p.random() < (score >= 3000 ? 0.04 : 0.02)) { 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.015) { 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.008) { 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.006) { 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) }); } // 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, 200); 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 (score >= 15000) { 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, 235, 59, 220); p.noStroke(); p.star(powerStar.x, powerStar.y, twinkleSize * 0.4, twinkleSize, 5); // Glowing aura p.fill(255, 235, 59, 80); 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, 235, 59, 230); 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, 235, 59, 60); 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); } } // 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, 235, 59, 150); 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()} / 15000`, 10, 30); if (speedBoost > 0) { p.fill(255, 235, 59); p.textSize(20); p.text(`SPEED BOOST! ${Math.ceil(speedBoostTimer / 60)}s`, 10, 60); } if (shieldActive) { p.fill(255, 235, 59); p.textSize(20); p.text(`SHIELD! ${Math.ceil(shieldTimer / 60)}s`, 10, speedBoost > 0 ? 85 : 60); } } else if (score >= 15000) { // Win screen p.fill(0, 255, 0); p.textSize(48); p.textAlign(p.CENTER, p.CENTER); p.text("YOU WIN!", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(24); p.text(`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); } 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

How to play