Platformer Game

Score: 0 Combo: x1

body { margin: 0; overflow: hidden; background-color: #111; /* Dark space background */ font-family: sans-serif; color: white; } canvas { display: block; } #scoreDisplay { position: absolute; top: 10px; left: 10px; font-size: 16px; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreValueDisplay = document.getElementById('scoreValue'); const comboValueDisplay = document.getElementById('comboValue'); const player = { x: 50, y: canvas.height - 50, width: 20, height: 30, velocityY: 0, isJumping: false, jumpsAvailable: 2, color: 'white', draw: function() { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.x + this.width / 2, this.y - 10); ctx.lineTo(this.x + this.width, this.y); ctx.closePath(); ctx.fill(); }, update: function() { this.y += this.velocityY; this.velocityY += gravity; platforms.forEach(platform => { if (this.velocityY >= 0 && this.x < platform.x + platform.width && this.x + this.width > platform.x && this.y + this.height > platform.y && this.y + this.height <= platform.y + platform.height) { this.velocityY = 0; this.y = platform.y - this.height; this.isJumping = false; this.jumpsAvailable = 2; combo = 0; } }); if (this.y + this.height > canvas.height) { this.y = canvas.height - this.height; this.velocityY = 0; this.isJumping = false; this.jumpsAvailable = 2; combo = 0; } this.x = Math.max(0, Math.min(this.x, canvas.width - this.width)); }, jump: function() { if (this.jumpsAvailable > 0) { this.velocityY = -12; this.isJumping = true; this.jumpsAvailable--; } } }; let platforms = [ { x: 0, y: canvas.height - 20, width: canvas.width, height: 20, color: 'gray' } ]; let coins = []; const gravity = 0.4; const keys = {}; let score = 0; let combo = 0; let cameraY = 0; const platformGap = 120; const platformWidth = 100; const platformHeight = 20; const coinRadius = 10; const maxHorizontalGap = 200; let lastPlatformX = 0; document.addEventListener('keydown', (e) => { keys[e.key] = true; }); document.addEventListener('keyup', (e) => { keys[e.key] = false; }); function updatePlayerPosition() { if (keys['ArrowLeft']) { player.x -= 5; } if (keys['ArrowRight']) { player.x += 5; } if (keys['ArrowUp'] || keys[' ']) { player.jump(); } } function generatePlatform() { const lastPlatform = platforms[platforms.length - 1]; const newPlatformY = lastPlatform.y - platformGap; let newPlatformX; do { newPlatformX = Math.random() * (canvas.width - platformWidth); } while (Math.abs(newPlatformX - lastPlatformX) > maxHorizontalGap); platforms.push({ x: newPlatformX, y: newPlatformY, width: platformWidth, height: platformHeight, color: 'gray' }); lastPlatformX = newPlatformX; if (Math.random() < 0.5) { coins.push({ x: newPlatformX + platformWidth / 2, y: newPlatformY - coinRadius - 20, radius: coinRadius, color: 'yellow', collected: false }); } } function drawPlatforms() { platforms.forEach(platform => { ctx.fillStyle = platform.color; ctx.fillRect(platform.x, platform.y - cameraY, platform.width, platform.height); }); } // function drawCoins() { // Removed coin drawing for simplification // coins.forEach(coin => { // if (!coin.collected) { // ctx.fillStyle = coin.color; // ctx.beginPath(); // ctx.arc(coin.x, coin.y - cameraY, coin.radius, 0, Math.PI * 2); // ctx.closePath(); // ctx.fill(); // } // }); // } // function drawBackground() { // Removed background drawing for simplification // ctx.fillStyle = '#111'; // ctx.fillRect(0, 0, canvas.width, canvas.height); // ctx.fillStyle = 'white'; // for (let i = 0; i < 200; i++) { // const x = Math.random() * canvas.width; // const y = Math.random() * canvas.height - cameraY; // if (y > 0 && y < canvas.height) { // const radius = Math.random() * 1; // ctx.beginPath(); // ctx.arc(x, y, radius, 0, Math.PI * 2); // ctx.closePath(); // ctx.fill(); // } // } // } // function checkCoinCollisions() { // Removed coin collision for simplification // coins.forEach(coin => { // if (!coin.collected) { // const distance = Math.sqrt( // (player.x + player.width / 2 - coin.x) ** 2 + // (player.y + player.height / 2 - (coin.y - cameraY)) ** 2 // ); // if (distance < player.width / 2 + coin.radius) { // coin.collected = true; // score += 1 + combo; // combo++; // updateScoreDisplay(); // } // } // }); // } function updateScoreDisplay() { scoreValueDisplay.textContent = score; comboValueDisplay.textContent = `x${combo + 1}`; } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); // drawBackground(); // Removed background drawing updatePlayerPosition(); player.update(); if (player.y < canvas.height / 2 + cameraY) { cameraY = player.y - canvas.height / 2; } if (platforms[platforms.length - 1].y - cameraY > 0) { generatePlatform(); } platforms = platforms.filter(platform => platform.y > cameraY - platformGap * 2); coins = coins.filter(coin => coin.y > cameraY - platformGap * 2 || !coin.collected); drawPlatforms(); // drawCoins(); // Removed coin drawing // checkCoinCollisions(); // Removed coin collision player.draw(); drawScore(); ctx.fillStyle = 'green'; ctx.fillRect(0, canvas.height - 20 - cameraY, canvas.width, 20); requestAnimationFrame(gameLoop); } for (let i = 0; i < 5; i++) { generatePlatform(); } updateScoreDisplay(); gameLoop();