2D Parkour Platformer

Score: 0

Game Over

import { Player } from './player.js'; import { platforms, drawPlatforms, resetPlatforms, generatePlatforms } from './platforms.js'; const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreEl = document.getElementById('score'); const gameOverEl = document.getElementById('gameOver'); const restartBtn = document.getElementById('restartBtn'); let player; let score; let gameOver; function init() { player = new Player(100, 500); resetPlatforms(); generatePlatforms(); score = 0; gameOver = false; gameOverEl.style.display = 'none'; scoreEl.textContent = score; } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (!gameOver) { player.update(platforms, canvas); player.draw(ctx); drawPlatforms(ctx); // Increase score as player ascends if (player.y < 300) { const dy = 300 - player.y; player.y = 300; for (const plat of platforms) { plat.y += dy; } score += Math.floor(dy / 10); scoreEl.textContent = score; } // Generate new platforms if needed generatePlatforms(); // Check if player fell below screen if (player.y > canvas.height) { gameOver = true; gameOverEl.style.display = 'block'; } } requestAnimationFrame(gameLoop); } restartBtn.onclick = () => { init(); }; init(); gameLoop(); window.addEventListener('keydown', (e) => { if (e.code === 'ArrowLeft' || e.code === 'KeyA') player.moveLeft(true); if (e.code === 'ArrowRight' || e.code === 'KeyD') player.moveRight(true); if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'KeyW') player.jump(); }); window.addEventListener('keyup', (e) => { if (e.code === 'ArrowLeft' || e.code === 'KeyA') player.moveLeft(false); if (e.code === 'ArrowRight' || e.code === 'KeyD') player.moveRight(false); }); export class Player { constructor(x, y) { this.x = x; this.y = y; this.width = 40; this.height = 60; this.color = '#ff9800'; this.velX = 0; this.velY = 0; this.speed = 4; this.jumpStrength = 12; this.gravity = 0.6; this.friction = 0.8; this.onGround = false; this.left = false; this.right = false; } moveLeft(isPressed) { this.left = isPressed; } moveRight(isPressed) { this.right = isPressed; } jump() { if (this.onGround) { this.velY = -this.jumpStrength; this.onGround = false; } } update(platforms, canvas) { if (this.left) this.velX = -this.speed; if (this.right) this.velX = this.speed; if (!this.left && !this.right) this.velX *= this.friction; this.velY += this.gravity; this.x += this.velX; this.y += this.velY; // Horizontal boundaries if (this.x < 0) this.x = 0; if (this.x + this.width > canvas.width) this.x = canvas.width - this.width; // Platform collision this.onGround = false; for (const plat of platforms) { if ( this.x < plat.x + plat.width && this.x + this.width > plat.x && this.y + this.height < plat.y + this.velY && this.y + this.height + this.velY >= plat.y ) { if ( this.y + this.height <= plat.y && this.velY >= 0 ) { this.y = plat.y - this.height; this.velY = 0; this.onGround = true; } } } } draw(ctx) { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); // Add face ctx.fillStyle = '#000'; ctx.fillRect(this.x + 10, this.y + 20, 5, 5); ctx.fillRect(this.x + 25, this.y + 20, 5, 5); ctx.fillRect(this.x + 15, this.y + 40, 10, 3); } } export let platforms = []; export function resetPlatforms() { platforms = [ { x: 0, y: 580, width: 800, height: 20 } // ground ]; } export function generatePlatforms() { const minY = Math.min(...platforms.map(p => p.y)); while (minY > -100) { const lastY = Math.min(...platforms.map(p => p.y)); const newY = lastY - 80; const newX = Math.random() * (800 - 120); platforms.push({ x: newX, y: newY, width: 120, height: 15 }); } // Remove platforms below screen platforms = platforms.filter(p => p.y < 600 + 50); } export function drawPlatforms(ctx) { for (const plat of platforms) { // Platform base ctx.fillStyle = '#4caf50'; ctx.fillRect(plat.x, plat.y, plat.width, plat.height); // Platform border ctx.strokeStyle = '#2e7d32'; ctx.lineWidth = 2; ctx.strokeRect(plat.x, plat.y, plat.width, plat.height); } }