Super Mario Bros (Big Human Mario)

Super Mario Bros (Big Human Mario)

body { background: #5c94fc; margin: 0; font-family: 'Press Start 2P', cursive, Arial, sans-serif; text-align: center; } h1 { color: #fff; margin-top: 20px; margin-bottom: 10px; text-shadow: 2px 2px 0 #333; } #game { background: #8ec0e4; display: block; margin: 0 auto; border: 4px solid #333; box-shadow: 0 0 20px #222; } import { Game } from './src/Game.js'; const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const game = new Game(canvas, ctx); function loop() { game.update(); game.draw(); requestAnimationFrame(loop); } loop(); import { Mario } from './Mario.js'; import { Level } from './Level.js'; export class Game { constructor(canvas, ctx) { this.canvas = canvas; this.ctx = ctx; this.level = new Level(); this.mario = new Mario(50, 320, this.level); // Lower starting Y for big Mario this.keys = {}; window.addEventListener('keydown', e => { this.keys[e.code] = true; }); window.addEventListener('keyup', e => { this.keys[e.code] = false; }); } update() { this.mario.update(this.keys); } draw() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.level.draw(this.ctx); this.mario.draw(this.ctx); } } // Simple tile-based level const TILE_SIZE = 32; // 20 tiles wide, 15 tiles high const LEVEL_MAP = [ '............................', '............................', '............................', '............................', '............................', '............................', '............................', '.............?..............', '............................', '.................###........', '............................', '......###...................', '............................', '############################', '############################' ]; export class Level { constructor() { this.tiles = LEVEL_MAP.map(row => row.split('')); } isSolid(x, y) { // x, y in pixels const tx = Math.floor(x / TILE_SIZE); const ty = Math.floor(y / TILE_SIZE); if (ty < 0 || ty >= this.tiles.length || tx < 0 || tx >= this.tiles[0].length) return false; const tile = this.tiles[ty][tx]; return tile === '#' || tile === '?'; } hitBlock(x, y) { // x, y in pixels const tx = Math.floor(x / TILE_SIZE); const ty = Math.floor(y / TILE_SIZE); if (ty < 0 || ty >= this.tiles.length || tx < 0 || tx >= this.tiles[0].length) return; if (this.tiles[ty][tx] === '?') { this.tiles[ty][tx] = '.'; } } draw(ctx) { for (let y = 0; y < this.tiles.length; y++) { for (let x = 0; x < this.tiles[y].length; x++) { const tile = this.tiles[y][x]; if (tile === '#') { ctx.fillStyle = '#b5651d'; ctx.fillRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE); ctx.strokeStyle = '#7a3e0a'; ctx.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE); } else if (tile === '?') { ctx.fillStyle = '#ffd800'; ctx.fillRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE); ctx.strokeStyle = '#bfa100'; ctx.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE); ctx.fillStyle = '#fff'; ctx.font = '20px monospace'; ctx.fillText('?', x * TILE_SIZE + 8, y * TILE_SIZE + 24); } } } } } const TILE_SIZE = 32; const GRAVITY = 0.7; const JUMP_POWER = -14; const MOVE_SPEED = 4; const MARIO_WIDTH = 48; const MARIO_HEIGHT = 96; export class Mario { constructor(x, y, level) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.level = level; this.onGround = false; this.facing = 1; // 1: right, -1: left this.color = '#ff0000'; } update(keys) { // Horizontal movement if (keys['ArrowLeft'] || keys['KeyA']) { this.vx = -MOVE_SPEED; this.facing = -1; } else if (keys['ArrowRight'] || keys['KeyD']) { this.vx = MOVE_SPEED; this.facing = 1; } else { this.vx = 0; } // Jump if ((keys['ArrowUp'] || keys['KeyW'] || keys['Space']) && this.onGround) { this.vy = JUMP_POWER; this.onGround = false; } // Apply gravity this.vy += GRAVITY; // X axis collision let newX = this.x + this.vx; if (!this.collides(newX, this.y)) { this.x = newX; } else { // Try to move as far as possible while (!this.collides(this.x + Math.sign(this.vx), this.y)) { this.x += Math.sign(this.vx); } this.vx = 0; } // Y axis collision let newY = this.y + this.vy; if (!this.collides(this.x, newY)) { this.y = newY; this.onGround = false; } else { if (this.vy > 0) { // Landing this.onGround = true; this.y = Math.floor((this.y + this.vy + MARIO_HEIGHT) / TILE_SIZE) * TILE_SIZE - MARIO_HEIGHT; } else if (this.vy < 0) { // Hitting block from below this.level.hitBlock(this.x + MARIO_WIDTH / 2, this.y - 1); this.y = Math.ceil((this.y + this.vy) / TILE_SIZE) * TILE_SIZE; } this.vy = 0; } } collides(x, y) { // Check 4 corners return ( this.level.isSolid(x, y) || this.level.isSolid(x + MARIO_WIDTH - 1, y) || this.level.isSolid(x, y + MARIO_HEIGHT - 1) || this.level.isSolid(x + MARIO_WIDTH - 1, y + MARIO_HEIGHT - 1) ); } draw(ctx) { // Draw Mario as a big human (🧍-like) ctx.save(); ctx.translate(this.x + MARIO_WIDTH / 2, this.y + MARIO_HEIGHT / 2); ctx.scale(this.facing, 1); // Body ctx.fillStyle = '#ff0000'; ctx.fillRect(-16, 0, 32, 48); // Head ctx.beginPath(); ctx.arc(0, -32, 24, 0, Math.PI * 2); ctx.fillStyle = '#ffe0b3'; ctx.fill(); // Eyes ctx.beginPath(); ctx.arc(-8, -36, 4, 0, Math.PI * 2); ctx.arc(8, -36, 4, 0, Math.PI * 2); ctx.fillStyle = '#222'; ctx.fill(); // Hat ctx.beginPath(); ctx.arc(0, -44, 24, Math.PI, 0, false); ctx.closePath(); ctx.fillStyle = '#c00'; ctx.fill(); ctx.fillRect(-24, -44, 48, 10); // Arms ctx.fillStyle = '#ffe0b3'; ctx.fillRect(-28, 8, 12, 40); ctx.fillRect(16, 8, 12, 40); // Legs ctx.fillStyle = '#1a237e'; ctx.fillRect(-16, 48, 12, 36); ctx.fillRect(4, 48, 12, 36); // Shoes ctx.fillStyle = '#6d4c1b'; ctx.fillRect(-16, 80, 12, 8); ctx.fillRect(4, 80, 12, 8); ctx.restore(); } }