Procedural Platformer

Okay, let's modify the platformer to have procedurally generated platforms that appear above the player as they ascend, and ensure they are placed at jumpable heights. We'll implement a simple vertical scrolling mechanism where the camera follows the player upwards. Procedural Platformer

body { margin: 0; overflow: hidden; background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh; } canvas { border: 1px solid #fff; background-color: #555; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 600; // Player properties const player = { x: canvas.width / 2 - 20, // Start in the middle horizontally y: 0, // World Y coordinate width: 40, height: 40, color: 'blue', speed: 5, jumpPower: -15, // Adjusted jump power velocityY: 0, isJumping: false, isOnGround: false }; // Game physics const gravity = 0.8; // Camera/Scrolling let cameraY = 0; // How much the world has scrolled down // Platforms (store world coordinates) const platforms = []; // Platform generation parameters const minPlatformWidth = 80; const maxPlatformWidth = 200; const minVerticalGap = 80; // Minimum vertical space between platforms const maxVerticalGap = 120; // Maximum vertical space between platforms (should be jumpable) const minHorizontalGap = 50; // Minimum horizontal space between platforms const platformHeight = 20; const platformColor = 'brown'; // Initial ground platform platforms.push({ x: 0, y: canvas.height - platformHeight, // World Y coordinate width: canvas.width, height: platformHeight, color: 'green' }); // Function to generate a new platform function generatePlatform() { // Find the highest platform (lowest Y world coordinate) let highestPlatformY = canvas.height; // Start with ground Y if (platforms.length > 0) { highestPlatformY = platforms.reduce((minY, p) => Math.min(minY, p.y), canvas.height); } const newPlatformWidth = Math.random() * (maxPlatformWidth - minPlatformWidth) + minPlatformWidth; const newPlatformHeight = platformHeight; const newPlatformY = highestPlatformY - (Math.random() * (maxVerticalGap - minVerticalGap) + minVerticalGap) - newPlatformHeight; // Place above highest platform // Ensure platform is within horizontal bounds, considering previous platform's position let newPlatformX; if (platforms.length > 1) { // If there's more than just the ground const prevPlatform = platforms[platforms.length - 1]; // This might not be the *highest*, need to rethink horizontal placement relative to the one below // A simpler approach: place randomly but ensure it's reachable horizontally from *somewhere* below // For simplicity, let's just place it randomly within bounds for now newPlatformX = Math.random() * (canvas.width - newPlatformWidth); } else { // First platform above ground newPlatformX = Math.random() * (canvas.width - newPlatformWidth); } // Basic check to prevent placing too far horizontally from player's current x // This is a simple heuristic and can be improved const playerScreenX = player.x - cameraY; // This is wrong, player.x is world x const playerWorldX = player.x; const maxHorizontalReach = player.width + player.speed * 10; // Estimate max horizontal movement in a few frames/jumps // Ensure the new platform is horizontally reachable from the player's current world X // This logic is tricky with random placement. A better approach is to place relative to the platform *below* it. // Let's regenerate platforms relative to the one just added. // We'll generate platforms downwards from a high point, or upwards from the last generated one. // Let's generate upwards from the highest platform. // Find the highest platform (lowest Y world coordinate) again let lastGeneratedY = canvas.height - platformHeight; // Start with ground Y if (platforms.length > 0) { lastGeneratedY = platforms.reduce((minY, p) => Math.min(minY, p.y), canvas.height); } const nextPlatformY = lastGeneratedY - (Math.random() * (maxVerticalGap - minVerticalGap) + minVerticalGap) - newPlatformHeight; const nextPlatformWidth = Math.random() * (maxPlatformWidth - minPlatformWidth) + minPlatformWidth; const nextPlatformX = Math.random() * (canvas.width - nextPlatformWidth); // Simple random horizontal placement platforms.push({ x: nextPlatformX, y: nextPlatformY, // World Y coordinate width: nextPlatformWidth, height: newPlatformHeight, color: platformColor }); } // Generate initial platforms above the ground let initialPlatformY = canvas.height - platformHeight; for(let i = 0; i < 10; i++) { // Generate a few platforms initially const newPlatformWidth = Math.random() * (maxPlatformWidth - minPlatformWidth) + minPlatformWidth; const newPlatformHeight = platformHeight; const newPlatformY = initialPlatformY - (Math.random() * (maxVerticalGap - minVerticalGap) + minVerticalGap) - newPlatformHeight; const newPlatformX = Math.random() * (canvas.width - newPlatformWidth); platforms.push({ x: newPlatformX, y: newPlatformY, width: newPlatformWidth, height: newPlatformHeight, color: platformColor }); initialPlatformY = newPlatformY; // Set the Y for the next platform relative to this one } // Input handling const keys = {}; window.addEventListener('keydown', (e) => { keys[e.key] = true; }); window.addEventListener('keyup', (e) => { keys[e.key] = false; }); function update() { // Apply gravity player.velocityY += gravity; player.y += player.velocityY; // Update player's world Y // Horizontal movement if (keys['ArrowLeft']) { player.x -= player.speed; } if (keys['ArrowRight']) { player.x += player.speed; } // Keep player within canvas bounds horizontally (world coordinates) if (player.x < 0) player.x = 0; if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; // Collision detection with platforms (using world coordinates) player.isOnGround = false; // Assume not on ground until collision is detected for (const platform of platforms) { // AABB collision check (using world coordinates) if (player.x < platform.x + platform.width && player.x + player.width > platform.x && player.y < platform.y + platform.height && player.y + player.height > platform.y) { // Collision detected // Check if player is falling and hits the top of the platform if (player.velocityY > 0 && player.y + player.height - player.velocityY <= platform.y) { player.y = platform.y - player.height; // Snap to top of platform (world Y) player.velocityY = 0; // Stop vertical movement player.isOnGround = true; // Player is on the ground player.isJumping = false; // Reset jump state } // Basic collision response for other sides (can be improved) else if (player.velocityY < 0 && player.y >= platform.y + platform.height - Math.abs(player.velocityY)) { // Collision with bottom of platform (head hit) player.y = platform.y + platform.height; player.velocityY = 0; } else if (keys['ArrowRight'] && player.x + player.width - player.speed <= platform.x) { // Collision with left side of platform player.x = platform.x - player.width; } else if (keys['ArrowLeft'] && player.x + player.speed >= platform.x + platform.width) { // Collision with right side of platform player.x = platform.x + platform.width; } } } // Jumping if (keys['ArrowUp'] && player.isOnGround) { player.velocityY = player.jumpPower; player.isJumping = true; player.isOnGround = false; // No longer on ground when jumping } // Update camera position (scrolls down as player moves up) // Keep player roughly in the top 40% of the screen const playerScreenY = player.y - cameraY; const scrollThreshold = canvas.height * 0.4; if (playerScreenY < scrollThreshold) { cameraY = player.y - scrollThreshold; } // Generate new platforms if the highest platform is getting close to the top of the screen let highestPlatformY = canvas.height; if (platforms.length > 0) { highestPlatformY = platforms.reduce((minY, p) => Math.min(minY, p.y), canvas.height); } const generateThreshold = cameraY + canvas.height * 0.2; // Generate when highest platform is within 20% of screen top if (highestPlatformY > generateThreshold) { generatePlatform(); } // Remove platforms that are off-screen below the camera view const removeThreshold = cameraY + canvas.height + platformHeight; platforms.filter(platform => platform.y > removeThreshold); // This doesn't modify in place // Correct way to filter: for (let i = platforms.length - 1; i >= 0; i--) { if (platforms[i].y > removeThreshold) { platforms.splice(i, 1); } } } function draw() { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw platforms (using screen coordinates: worldY - cameraY) for (const platform of platforms) { ctx.fillStyle = platform.color; ctx.fillRect(platform.x, platform.y - cameraY, platform.width, platform.height); } // Draw player (using screen coordinates: worldY - cameraY) ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y - cameraY, player.width, player.height); } function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } // Start the game loop gameLoop(); Now, the platforms will be generated above the current highest platform as you move upwards. The camera will follow you, giving the illusion of ascending. The vertical gap between platforms is controlled by `minVerticalGap` and `maxVerticalGap`, set to values that should be reachable with the current `jumpPower`. Keep in mind this is still a basic implementation. A full game would require more sophisticated platform generation (e.g., ensuring horizontal reachability, varying platform types), level goals, enemies, etc. The 3D transition is a separate, much larger task involving WebGL and 3D math.