Interactive Stickman Game

Interactive Stickman Game

Controls: Left/Right arrows to move, Up to jump, Space to wave

body { background: #f0f0f0; font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; } h1 { margin-top: 20px; color: #333; } #gameCanvas { background: #fff; border: 2px solid #333; margin-top: 20px; display: block; margin-left: auto; margin-right: auto; } .controls { margin-top: 10px; color: #555; } import { Stickman } from './stickman.js'; const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const groundY = canvas.height - 60; const stickman = new Stickman(100, groundY, ctx); let keys = { left: false, right: false, up: false, space: false }; function handleKeyDown(e) { if (e.code === 'ArrowLeft') keys.left = true; if (e.code === 'ArrowRight') keys.right = true; if (e.code === 'ArrowUp') keys.up = true; if (e.code === 'Space') keys.space = true; } function handleKeyUp(e) { if (e.code === 'ArrowLeft') keys.left = false; if (e.code === 'ArrowRight') keys.right = false; if (e.code === 'ArrowUp') keys.up = false; if (e.code === 'Space') keys.space = false; } window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw ground ctx.fillStyle = '#888'; ctx.fillRect(0, groundY + 40, canvas.width, 20); // Update stickman stickman.update(keys, groundY); stickman.draw(); requestAnimationFrame(gameLoop); } gameLoop(); export class Stickman { constructor(x, groundY, ctx) { this.x = x; this.y = groundY; this.ctx = ctx; this.radius = 20; // head radius this.bodyLen = 50; this.armLen = 35; this.legLen = 40; this.velX = 0; this.velY = 0; this.onGround = true; this.facing = 1; // 1: right, -1: left this.isWaving = false; this.waveTimer = 0; } update(keys, groundY) { // Horizontal movement if (keys.left) { this.velX = -3; this.facing = -1; } else if (keys.right) { this.velX = 3; this.facing = 1; } else { this.velX = 0; } // Jump if (keys.up && this.onGround) { this.velY = -9; this.onGround = false; } // Gravity if (!this.onGround) { this.velY += 0.5; // gravity } // Apply movement this.x += this.velX; this.y += this.velY; // Ground collision if (this.y > groundY) { this.y = groundY; this.velY = 0; this.onGround = true; } // Boundaries if (this.x < 30) this.x = 30; if (this.x > 570) this.x = 570; // Waving if (keys.space && !this.isWaving) { this.isWaving = true; this.waveTimer = 20; } if (this.isWaving) { this.waveTimer--; if (this.waveTimer <= 0) { this.isWaving = false; } } } draw() { const ctx = this.ctx; ctx.save(); ctx.translate(this.x, this.y); // Draw legs ctx.strokeStyle = '#222'; ctx.lineWidth = 4; ctx.beginPath(); // Left leg ctx.moveTo(0, 0); ctx.lineTo(-12, this.legLen); // Right leg ctx.moveTo(0, 0); ctx.lineTo(12, this.legLen); ctx.stroke(); // Draw body ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -this.bodyLen); ctx.stroke(); // Draw arms ctx.beginPath(); // Left arm ctx.moveTo(0, -this.bodyLen + 10); ctx.lineTo(-this.armLen, -this.bodyLen + 10); // Right arm (waving if active) ctx.moveTo(0, -this.bodyLen + 10); if (this.isWaving) { // Waving animation: arm up and waving let waveAngle = Math.sin(this.waveTimer * 0.5) * 0.5 + 1.2; let armX = Math.cos(waveAngle) * this.armLen; let armY = Math.sin(waveAngle) * this.armLen - this.bodyLen + 10; ctx.lineTo(armX, armY); } else { ctx.lineTo(this.armLen, -this.bodyLen + 10); } ctx.stroke(); // Draw head ctx.beginPath(); ctx.arc(0, -this.bodyLen - this.radius, this.radius, 0, Math.PI * 2); ctx.fillStyle = '#ffe0b2'; ctx.fill(); ctx.strokeStyle = '#222'; ctx.stroke(); // Draw face (simple eyes and smile) ctx.save(); ctx.translate(0, -this.bodyLen - this.radius); // Eyes ctx.beginPath(); ctx.arc(-6, -4, 2, 0, Math.PI * 2); ctx.arc(6, -4, 2, 0, Math.PI * 2); ctx.fillStyle = '#222'; ctx.fill(); // Smile ctx.beginPath(); ctx.arc(0, 2, 7, 0.2 * Math.PI, 0.8 * Math.PI); ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.stroke(); ctx.restore(); ctx.restore(); } }