Geometry Dash Platformer

body { margin: 0; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; color: white; } canvas { background-color: #333; width: 100%; height: 100%; display: block; /* Prevents scrollbars */ } #gameOverScreen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #gameOverScreen h1 { font-size: 3em; margin-bottom: 0.5em; } #gameOverScreen p { font-size: 1.5em; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const gameOverScreen = document.getElementById('gameOverScreen'); let gameRunning = true; let player = { x: 50, y: 0, width: 30, height: 30, velocityY: 0, gravity: 0.5, isJumping: false, color: 'lime', rotation: 0, rotationSpeed: 0.15 }; let level = [ { type: 'spike', x: 400 }, { type: 'spike', x: 700 }, { type: 'spike', x: 900 }, { type: 'spike', x: 1200 }, { type: 'spike', x: 1500 }, { type: 'spike', x: 1800 }, { type: 'spike', x: 2100 }, { type: 'spike', x: 2400 }, { type: 'spike', x: 2700 }, { type: 'spike', x: 3000 }, { type: 'spike', x: 3300 }, { type: 'spike', x: 3600 }, { type: 'spike', x: 3900 }, { type: 'spike', x: 4200 }, { type: 'spike', x: 4500 }, { type: 'spike', x: 4800 }, { type: 'spike', x: 5100 }, { type: 'spike', x: 5400 }, { type: 'spike', x: 5700 }, { type: 'spike', x: 6000 } ]; let obstacles = []; let jumpOrbs = []; let obstacleBaseY; let spikeHeight = 30; let obstacleSpacing = 300; let score = 0; let levelPosition = 0; // Explosion particles let explosionPieces = []; let isExploding = false; const pieceCount = 20; const pieceSize = 5; const explosionSpeed = 5; const gravityExplosion = 0.1; const fadeSpeed = 0.02; // Jump Orb properties const orbRadius = 20; const orbColor = 'cyan'; const orbRingColor = 'white'; const orbRingThickness = 3; const boostMultiplier = 2; let orbUseEffects = []; // Array for jump orb use effects const orbEffectPieceCount = 15; // Particles for orb use effect const orbEffectSpeed = 3; const orbEffectFadeSpeed = 0.05; // Function to calculate jump distance (approximate) function calculateJumpDistance(initialVelocity) { return (initialVelocity * initialVelocity) / (2 * player.gravity); } function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; reset(); } function reset() { gameRunning = true; gameOverScreen.style.display = 'none'; player.y = canvas.height - 50; player.rotation = 0; obstacleBaseY = canvas.height - spikeHeight; obstacles = []; jumpOrbs = []; levelPosition = 0; generateInitialObstacles(); player.gravity = 0.5; player.color = 'lime'; score = 0; explosionPieces = []; isExploding = false; orbUseEffects = []; // Clear orb use effects on reset } function generateInitialObstacles() { obstacles = level.map((obstacleData, index) => { const obstacle = { ...obstacleData, type: 'spike', x: obstacleData.x + canvas.width }; let generatedObstacles = [obstacle]; let shouldAddOrb = false; if (Math.random() < 0.3) { const setOfSpikes = [obstacle, { ...obstacleData, type: 'spike', x: obstacle.x + spikeHeight * 2 }, { ...obstacleData, type: 'spike', x: obstacle.x + spikeHeight * 4 }]; generatedObstacles = setOfSpikes; shouldAddOrb = true; } else if (Math.random() < 0.1) { shouldAddOrb = true; } if (shouldAddOrb) { jumpOrbs.push({ x: obstacle.x + (generatedObstacles.length > 1 ? spikeHeight * 2 : 0), y: canvas.height - spikeHeight - orbRadius - 50 }); } return generatedObstacles; }).flat(); for (let i = 0; i < jumpOrbs.length; i++) { const orb = jumpOrbs[i]; const jumpLandingX = orb.x + calculateJumpDistance(10 * boostMultiplier) * 0.5; for (let j = 0; j < obstacles.length; j++) { if (obstacles[j].type === 'spike' && obstacles[j].x > orb.x && obstacles[j].x < jumpLandingX + 200) { obstacles.splice(j, 1); j--; } } } } function updatePlayer() { if (!isExploding) { player.velocityY += player.gravity; player.y += player.velocityY; if (player.isJumping) { player.rotation += player.rotationSpeed; } if (player.y > canvas.height - player.height) { player.y = canvas.height - player.height; player.velocityY = 0; player.isJumping = false; player.rotation = 0; } } } function updateObstacles() { obstacles.forEach(obstacle => { obstacle.x -= 5; }); jumpOrbs.forEach(orb => { orb.x -= 5; }); updateOrbUseEffects(); // Update jump orb effect particles if (obstacles.length > 0 && obstacles[0].x + spikeHeight < 0) { obstacles.shift(); jumpOrbs = jumpOrbs.filter(orb => orb.x > -orbRadius * 2); const nextObstacleData = level[levelPosition % level.length]; let nextObstacles = []; let shouldAddOrb = false; if (Math.random() < 0.3) { const nextSetOfSpikes = [{ ...nextObstacleData, type: 'spike', x: obstacles[obstacles.length - 1].x + obstacleSpacing }, { ...nextObstacleData, type: 'spike', x: obstacles[obstacles.length - 1].x + obstacleSpacing + spikeHeight * 2 }, { ...nextObstacleData, type: 'spike', x: obstacles[obstacles.length - 1].x + obstacleSpacing + spikeHeight * 4 }]; nextObstacles = nextSetOfSpikes; shouldAddOrb = true; } else { nextObstacles = [{ ...nextObstacleData, type: 'spike', x: obstacles[obstacles.length - 1].x + obstacleSpacing }]; if (Math.random() < 0.1) { shouldAddOrb = true; } } obstacles.push(...nextObstacles); if (shouldAddOrb) { jumpOrbs.push({ x: nextObstacles[0].x + (nextObstacles.length > 1 ? spikeHeight * 2 : 0), y: canvas.height - spikeHeight - orbRadius - 50 }); } levelPosition++; // Ensure safe landing after jump orb in update for (let i = jumpOrbs.length -1 ; i < jumpOrbs.length; i++) { if (jumpOrbs[i]) { const orb = jumpOrbs[i]; const jumpLandingX = orb.x + calculateJumpDistance(10 * boostMultiplier) * 0.5; for (let j = 0; j < obstacles.length; j++) { if (obstacles[j].type === 'spike' && obstacles[j].x > orb.x && obstacles[j].x < jumpLandingX + 200) { obstacles.splice(j, 1); j--; } } } } } jumpOrbs = jumpOrbs.filter(orb => !orb.used); } function createExplosionPieces(obstacle = null) { isExploding = true; const explosionSourceX = obstacle ? obstacle.x + spikeHeight / 2 : player.x + player.width / 2; const explosionSourceY = obstacle ? canvas.height - spikeHeight : player.y + player.height / 2; for (let i = 0; i < pieceCount; i++) { explosionPieces.push({ x: explosionSourceX, y: explosionSourceY, size: pieceSize, velocityX: (Math.random() - 0.5) * explosionSpeed * 2, velocityY: (Math.random() - 0.5) * explosionSpeed * 2, gravity: gravityExplosion, alpha: 1 }); } if (!obstacle) { // Only change player color if it's player explosion player.color = 'transparent'; } } function updateExplosionPieces() { if (!isExploding) return; explosionPieces.forEach(piece => { piece.x += piece.velocityX; piece.y += piece.velocityY; piece.velocityY += piece.gravity; piece.alpha -= fadeSpeed; }); explosionPieces = explosionPieces.filter(piece => piece.alpha > 0); if (explosionPieces.length === 0 && isExploding) { isExploding = false; gameRunning = false; gameOverScreen.style.display = 'flex'; } } function createOrbUseEffect(orb) { for (let i = 0; i < orbEffectPieceCount; i++) { orbUseEffects.push({ x: orb.x, y: orb.y, size: pieceSize, velocityX: (Math.random() - 0.5) * orbEffectSpeed * 2, velocityY: (Math.random() - 0.5) * orbEffectSpeed * 2, alpha: 1, fadeSpeed: orbEffectFadeSpeed, color: orbColor // Use orb color for effect }); } } function updateOrbUseEffects() { orbUseEffects.forEach(effect => { effect.x += effect.velocityX; effect.y += effect.velocityY; effect.alpha -= effect.fadeSpeed; }); orbUseEffects = orbUseEffects.filter(effect => effect.alpha > 0); } function checkCollision() { if (isExploding) return; for (const obstacle of obstacles) { let obstacleY = canvas.height - spikeHeight; let obstacleWidth = spikeHeight; let obstacleHeight = spikeHeight; if ( player.x < obstacle.x + obstacleWidth && player.x + player.width > obstacle.x && player.y < obstacleY + obstacleHeight && player.y + player.height > obstacleY ) { createExplosionPieces(obstacle); // Pass the obstacle here createExplosionPieces(); // Player explosion as well return; } } for (let i = 0; i < jumpOrbs.length; i++) { const orb = jumpOrbs[i]; const distance = Math.sqrt( (player.x + player.width / 2 - orb.x) ** 2 + (player.y + player.height / 2 - orb.y) ** 2 ); if (distance < orbRadius + player.width / 2) { player.velocityY = -10 * boostMultiplier; player.isJumping = true; jumpOrbs[i].used = true; createOrbUseEffect(orb); // Create orb use effect return; } } } function drawPlayer() { if (!isExploding) { ctx.fillStyle = player.color; ctx.save(); ctx.translate(player.x + player.width / 2, player.y + player.height / 2); ctx.rotate(player.rotation); ctx.fillRect(-player.width / 2, -player.height / 2, player.width, player.height); ctx.restore(); } } function drawExplosion() { if (!isExploding) return; explosionPieces.forEach(piece => { ctx.fillStyle = `rgba(255, 255, 0, ${piece.alpha})`; ctx.fillRect(piece.x - piece.size / 2, piece.y - piece.size / 2, piece.size, piece.size); }); } function drawJumpOrbs() { jumpOrbs.forEach(orb => { // Draw ring ctx.fillStyle = orbRingColor; ctx.beginPath(); ctx.arc(orb.x, orb.y, orbRadius + orbRingThickness, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); // Draw inner orb ctx.fillStyle = orbColor; ctx.beginPath(); ctx.arc(orb.x, orb.y, orbRadius, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); }); } function drawOrbUseEffects() { orbUseEffects.forEach(effect => { ctx.fillStyle = `rgba(0, 255, 255, ${effect.alpha})`; // Cyan color, same as orb ctx.fillRect(effect.x - effect.size / 2, effect.y - effect.size / 2, effect.size, effect.size); }); } function drawObstacles() { obstacles.forEach(obstacle => { ctx.fillStyle = 'red'; ctx.beginPath(); ctx.moveTo(obstacle.x, canvas.height); ctx.lineTo(obstacle.x + spikeHeight / 2, canvas.height - spikeHeight); ctx.lineTo(obstacle.x + spikeHeight, canvas.height); ctx.closePath(); ctx.fill(); }); } function drawScore() { ctx.fillStyle = 'white'; ctx.font = '20px Arial'; ctx.fillText('Score: ' + score.toFixed(0), 10, 30); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawObstacles(); drawJumpOrbs(); drawOrbUseEffects(); // Draw jump orb effects drawExplosion(); drawPlayer(); drawScore(); } function gameLoop() { if (gameRunning) { updatePlayer(); updateObstacles(); checkCollision(); updateExplosionPieces(); score += 0.01; draw(); } requestAnimationFrame(gameLoop); } document.addEventListener('keydown', (event) => { if (event.code === 'Space') { if (!player.isJumping && gameRunning && !isExploding) { let nearOrb = false; for (let i = 0; i < jumpOrbs.length; i++) { const orb = jumpOrbs[i]; const distance = Math.sqrt( (player.x + player.width / 2 - orb.x) ** 2 + (player.y + player.height / 2 - orb.y) ** 2 ); if (distance < orbRadius + player.width / 2) { nearOrb = true; break; } } if (!nearOrb) { player.velocityY = -10; player.isJumping = true; } } else if (!gameRunning) { reset(); } } }); window.addEventListener('resize', resizeCanvas); resizeCanvas(); reset(); gameLoop();