Simple Platformer

Certainly! Let's create a basic but fun platformer game using HTML, CSS, and JavaScript. We'll include core mechanics like movement, jumping, gravity, and simple collision detection, along with a small visual flourish. Simple 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; // Game constants const GRAVITY = 0.6; const JUMP_STRENGTH = 15; const MOVE_SPEED = 5; const FRICTION = 0.8; // Horizontal friction // Player object const player = { x: 50, y: 50, width: 40, height: 40, dx: 0, // velocity x dy: 0, // velocity y isJumping: false, isOnGround: false, color: '#00ff00' // Green }; // Platforms const platforms = [ { x: 0, y: canvas.height - 40, width: canvas.width, height: 40, color: '#888' }, // Ground { x: 150, y: canvas.height - 150, width: 200, height: 20, color: '#888' }, { x: 450, y: canvas.height - 250, width: 200, height: 20, color: '#888' }, { x: 100, y: canvas.height - 350, width: 150, height: 20, color: '#888' }, { x: 550, y: canvas.height - 400, width: 150, height: 20, color: '#888' } ]; // Input handling const keys = { right: false, left: false, up: false }; document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' || e.key === 'd') keys.right = true; if (e.key === 'ArrowLeft' || e.key === 'a') keys.left = true; if (e.key === 'ArrowUp' || e.key === 'w' || e.key === ' ') keys.up = true; }); document.addEventListener('keyup', (e) => { if (e.key === 'ArrowRight' || e.key === 'd') keys.right = false; if (e.key === 'ArrowLeft' || e.key === 'a') keys.left = false; if (e.key === 'ArrowUp' || e.key === 'w' || e.key === ' ') keys.up = false; }); // Particle system for landing effect const particles = []; function createLandingParticles() { for (let i = 0; i < 10; i++) { particles.push({ x: player.x + player.width / 2, y: player.y + player.height, size: Math.random() * 5 + 2, dx: (Math.random() - 0.5) * 5, dy: Math.random() * -5 - 2, alpha: 1, color: '#fff' // White particles }); } } function updateParticles() { for (let i = particles.length - 1; i >= 0; i--) { const p = particles[i]; p.x += p.dx; p.y += p.dy; p.dy += GRAVITY * 0.5; // Lighter gravity for particles p.alpha -= 0.02; // Fade out if (p.alpha <= 0) { particles.splice(i, 1); // Remove particle } } } function drawParticles() { particles.forEach(p => { ctx.save(); ctx.globalAlpha = p.alpha; ctx.fillStyle = p.color; ctx.fillRect(p.x, p.y, p.size, p.size); ctx.restore(); }); } // Collision detection (AABB) function checkCollision(rect1, rect2) { return rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y; } // Game update logic function update() { // Horizontal movement if (keys.right) { player.dx = MOVE_SPEED; } else if (keys.left) { player.dx = -MOVE_SPEED; } else { player.dx *= FRICTION; // Apply friction when no key is pressed if (Math.abs(player.dx) < 0.1) player.dx = 0; // Stop if velocity is very small } // Apply gravity player.dy += GRAVITY; // Apply velocity player.x += player.dx; player.y += player.dy; // Check for landing state change const wasOnGround = player.isOnGround; player.isOnGround = false; // Assume not on ground until collision proves otherwise // Platform collision platforms.forEach(platform => { if (checkCollision(player, platform)) { // Determine which side the collision occurred const overlapX = Math.min(player.x + player.width, platform.x + platform.width) - Math.max(player.x, platform.x); const overlapY = Math.min(player.y + player.height, platform.y + platform.height) - Math.max(player.y, platform.y); if (overlapX < overlapY) { // Horizontal collision if (player.dx > 0) { // Colliding from left player.x = platform.x - player.width; } else if (player.dx < 0) { // Colliding from right player.x = platform.x + platform.width; } player.dx = 0; // Stop horizontal movement } else { // Vertical collision if (player.dy > 0) { // Colliding from above (landing) player.y = platform.y - player.height; player.dy = 0; player.isOnGround = true; player.isJumping = false; if (!wasOnGround) { // If just landed createLandingParticles(); } } else if (player.dy < 0) { // Colliding from below (hitting head) player.y = platform.y + platform.height; player.dy = 0; // Stop upward movement } } } }); // Jumping if (keys.up && player.isOnGround) { player.dy = -JUMP_STRENGTH; player.isOnGround = false; player.isJumping = true; } // Keep player within canvas bounds (optional, but good for simple games) if (player.x < 0) player.x = 0; if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; // Note: Vertical bounds are handled by ground collision, but could add ceiling/fall detection // Update particles updateParticles(); } // Game drawing logic function draw() { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw platforms platforms.forEach(platform => { ctx.fillStyle = platform.color; ctx.fillRect(platform.x, platform.y, platform.width, platform.height); }); // Draw player ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); // Draw particles drawParticles(); } // Game loop function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); // Loop continuously } // Start the game gameLoop(); You can now play the game in the preview window. Use the Arrow keys or WASD for movement and the Up Arrow, W, or Spacebar to jump.