{"log":"","html":"\n

\n \n

","runBy":"4ce2b46f-a6bb-42a1-8142-27620039fe30","errors":"","isOpen":false,"modules":[{"id":"76289217-4a22-484a-a5cc-07bb6c8acb63","file":"constants","code":"export const BLOCK_SIZE = 4; // px per sprite pixel\nexport const TILE_SIZE = 16; // sprite blocks per tile width (64px rendered)\nexport const TILE_HEIGHT = BLOCK_SIZE * 8; // sprite tile height in px = 32px (8 rows × 4px)\nexport const CANVAS_WIDTH = 640;\nexport const CANVAS_HEIGHT = 384;\nexport const HEART_BEAT = 33; // ms per frame (~30fps)\n\nexport const LIVES = 3;\nexport const LEVELS = [60, 60]; // seconds per level\nexport const INITIAL_SPEED = 1;\nexport const MAX_SPEED = 1;\nexport const SPEED_UP_EVERY = 9999;\n\n// Physics (in pixels)\nexport const GRAVITY = 0.45;\nexport const JUMP_VY = -12;\nexport const MOVE_SPEED = 3;\nexport const GOOMBA_SPEED = 1;\n\n// World\nexport const WORLD_WIDTH = 2560; // 4× canvas width\nexport const GROUND_Y = CANVAS_HEIGHT - TILE_SIZE * BLOCK_SIZE; // top of ground row in px\n\n// Score\nexport const STOMP_SCORE = 5;\nexport const MUSHROOM_SCORE = 20;\nexport const COIN_SCORE = 10;\n\n// Sprite-specific block sizes\nexport const MARIO_BLOCK_SIZE = 4; // original size\nexport const GOOMBA_BLOCK_SIZE = 2; // BLOCK_SIZE × 0.5\nexport const MUSHROOM_BLOCK_SIZE = 4;\n\n// Mario sprite size in px\nexport const MARIO_W = 12 * MARIO_BLOCK_SIZE; // 48px\nexport const MARIO_H = 14 * MARIO_BLOCK_SIZE; // 56px\n\n// Goomba sprite size in px\nexport const GOOMBA_W = 12 * GOOMBA_BLOCK_SIZE; // 24px\nexport const GOOMBA_H = 10 * GOOMBA_BLOCK_SIZE; // 20px\n\n// Mushroom sprite size in px\nexport const MUSHROOM_W = 8 * MUSHROOM_BLOCK_SIZE; // 16px\nexport const MUSHROOM_H = 8 * MUSHROOM_BLOCK_SIZE; // 16px\nexport const MUSHROOM_SPEED = 1;\n\n// Invincibility flash duration after respawn (~2 seconds at 30fps)\nexport const INVINCIBLE_FRAMES = 60;\n","errors":[],"open":false},{"id":"c35c72bb-5b98-49d0-b13d-706b88af8ed1","file":"game","code":"import { BaseGame } from './gamedoh-engine.js';\nimport {\n CANVAS_WIDTH, CANVAS_HEIGHT, BLOCK_SIZE, TILE_SIZE,\n HEART_BEAT, LIVES, INITIAL_SPEED, MAX_SPEED, SPEED_UP_EVERY,\n WORLD_WIDTH, COIN_SCORE, TILE_HEIGHT,\n} from './constants.js';\nimport Level from './level.js';\nimport { getTiles, drawTilemap, drawClouds } from './tilemap.js';\nimport { LEVEL_1, LEVEL_2 } from './tilemap.js';\nimport { drawStartScreen, drawPauseOverlay, drawGameOverScreen, drawWinScreen } from './screens.js';\nimport { playSound } from './sounds.js';\nimport Mushroom from './mushroom/index.js';\n\nconst LAYOUTS = [LEVEL_1, LEVEL_2];\n\nconst winAudio = document.getElementById('winAudio');\nconst overAudio = document.getElementById('overAudio');\n\nclass Game extends BaseGame {\n constructor(ctx, opts) {\n super(ctx, opts, {\n canvasWidth: CANVAS_WIDTH,\n canvasHeight: CANVAS_HEIGHT,\n blockSize: BLOCK_SIZE,\n heartbeat: HEART_BEAT,\n lives: LIVES,\n initialSpeed: INITIAL_SPEED,\n maxSpeed: MAX_SPEED,\n speedUpEvery: SPEED_UP_EVERY,\n });\n this.level = new Level(this);\n this.cameraX = 0;\n this.mushrooms = [];\n this.coins = [];\n this.blockHits = new Map(); // tracks hit count per ? block index\n this.spawnedPipes = new Set();\n }\n\n get currentLayout() {\n return LAYOUTS[Math.min(this.level.index, LAYOUTS.length - 1)];\n }\n\n _update() {\n const tiles = getTiles(this.currentLayout);\n const layout = this.currentLayout;\n const TS = TILE_SIZE * BLOCK_SIZE;\n\n // Save vy BEFORE update — tile resolver resets it to 0 on ceiling hit\n const marioVyBefore = this.mario.vy;\n this.mario.update(tiles, this.cameraX);\n this.goombas.forEach((g) => g.update(tiles, this.cameraX, this.mario));\n this.goombas = this.goombas.filter((g) => g.alive);\n\n // Question block hit detection (Mario bumps from below)\n // After update: mario.y === blockBottom (tile resolver placed him there), vy === 0\n // Use marioVyBefore < 0 to confirm he was moving upward\n if (!this.mario._dead) {\n layout.questions.forEach(({ x, y }, i) => {\n if ((this.blockHits.get(i) || 0) >= 3) return; // already exhausted\n const bx = x * TS;\n const by = CANVAS_HEIGHT - (y + 1) * TS;\n const blockBottom = by + TILE_HEIGHT;\n if (\n marioVyBefore < 0 &&\n Math.abs(this.mario.y - blockBottom) <= 2 &&\n this.mario.x + this.mario.width > bx &&\n this.mario.x < bx + TS\n ) {\n const hits = (this.blockHits.get(i) || 0) + 1;\n this.blockHits.set(i, hits);\n if (hits >= 3) {\n this.addScore(COIN_SCORE);\n playSound('coin');\n this.playPowerUpSound();\n this.coins.push({ x: bx + TS / 2, y: by, vy: -5, life: 40 });\n }\n }\n });\n }\n\n // Coin animations\n this.coins.forEach((c) => { c.y += c.vy; c.vy += 0.4; c.life--; });\n this.coins = this.coins.filter((c) => c.life > 0);\n\n // Mushroom spawn: spawn from each pipe when Mario is within 5 tiles\n layout.pipes.forEach(({ x, h }, i) => {\n if (this.spawnedPipes.has(i)) return;\n const pipePixelX = x * TS;\n const dist = Math.abs(this.mario.x - pipePixelX);\n if (dist < 5 * TS) {\n this.spawnedPipes.add(i);\n const groundY = CANVAS_HEIGHT - TS;\n const pipeTopY = groundY - h * TILE_HEIGHT; // TH=32 per pipe row\n this.mushrooms.push(new Mushroom(this, pipePixelX, pipeTopY));\n }\n });\n\n // Mushroom updates\n this.mushrooms.forEach((m) => m.update(tiles, this.mario));\n this.mushrooms = this.mushrooms.filter((m) => m.alive);\n\n // Camera follow\n const targetX = this.mario.x - CANVAS_WIDTH / 3;\n this.cameraX = Math.max(0, Math.min(targetX, WORLD_WIDTH - CANVAS_WIDTH));\n\n // Time ran out — immediate game over, no death animation\n if (this.level._timeUp && !this.mario._dead) {\n this.level._timeUp = false;\n this._timeoutGameOver = true;\n this._wasTimeUp = true;\n this.lives = 1; // super.loseLife() will decrement to 0 → game over\n this.loseLife();\n return;\n }\n\n // Mario reached the end of the world → advance or win\n if (!this.mario._dead && this.mario.x >= WORLD_WIDTH - this.mario.width - 4) {\n this.level.reachEnd();\n }\n }\n\n _drawWorld() {\n const { ctx } = this;\n ctx.save();\n // Sky\n ctx.fillStyle = '#5c94fc';\n ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n ctx.restore();\n\n drawClouds(ctx, this.cameraX);\n drawTilemap(ctx, this.cameraX, this.currentLayout, this.blockHits);\n this.goombas.forEach((g) => g.draw(ctx, this.cameraX));\n this.mushrooms.forEach((m) => m.draw(ctx, this.cameraX));\n\n // Coin pop animations\n ctx.save();\n ctx.fillStyle = '#f8d800';\n this.coins.forEach((c) => {\n ctx.beginPath();\n ctx.arc(c.x - this.cameraX, c.y, 8, 0, Math.PI * 2);\n ctx.fill();\n });\n ctx.restore();\n\n this.mario.draw(ctx, this.cameraX);\n }\n\n playPowerUpSound() {\n if (winAudio) {\n winAudio.loop = false;\n winAudio.currentTime = 0;\n winAudio.play().catch(() => {});\n }\n }\n\n win() {\n super.win();\n if (winAudio) winAudio.loop = false;\n }\n\n loseLife() {\n this.mushrooms = [];\n this.coins = [];\n this.spawnedPipes = new Set();\n // On timeout, skip respawn and go straight to game over\n if (this._timeoutGameOver) {\n this._timeoutGameOver = false;\n super.loseLife();\n if (overAudio) { overAudio.currentTime = 0; overAudio.play().catch(() => {}); }\n return;\n }\n this._respawnX = Math.max(64, this.mario._lastGroundX ?? this.mario.x);\n this.mario._dead = false;\n if (this.onLoseLife) this.onLoseLife();\n super.loseLife();\n // Play game over music when last life is lost\n if (this.lives <= 0) {\n if (overAudio) { overAudio.currentTime = 0; overAudio.play().catch(() => {}); }\n }\n }\n\n drawStartScreen() { drawStartScreen(this.ctx, this.startButton); }\n drawPauseOverlay() { drawPauseOverlay(this.ctx); }\n drawGameOverScreen() { drawGameOverScreen(this.ctx, this.score, this.restartButton, this._wasTimeUp); }\n drawWinScreen() { drawWinScreen(this.ctx, this.score, this.restartButton); }\n\n drawHUD() {\n const { ctx } = this;\n ctx.save();\n\n // Semi-transparent backing strip\n ctx.fillStyle = 'rgba(255, 255, 255, 0.55)';\n ctx.fillRect(0, 0, CANVAS_WIDTH, 42);\n\n ctx.textBaseline = 'top';\n\n // ── Labels row (y=6) ──────────────────────────────\n ctx.font = 'bold 11px monospace';\n ctx.fillStyle = '#555';\n\n ctx.textAlign = 'left';\n ctx.fillText('LIVES', 10, 6);\n\n ctx.textAlign = 'center';\n ctx.fillText('MARIO', CANVAS_WIDTH * 0.38, 6);\n\n ctx.textAlign = 'center';\n ctx.fillText(`WORLD 1-${this.level.number}`, CANVAS_WIDTH * 0.65, 6);\n\n ctx.textAlign = 'right';\n ctx.fillText('TIME', CANVAS_WIDTH - 10, 6);\n\n // ── Values row (y=20) ─────────────────────────────\n ctx.font = 'bold 16px monospace';\n ctx.fillStyle = '#222';\n\n ctx.textAlign = 'left';\n ctx.fillStyle = '#c00';\n ctx.fillText('♥'.repeat(this.lives), 10, 20);\n\n ctx.fillStyle = '#222';\n ctx.textAlign = 'center';\n ctx.fillText(String(this.score).padStart(6, '0'), CANVAS_WIDTH * 0.38, 20);\n\n ctx.textAlign = 'right';\n ctx.fillText(this.level._remaining ?? '--', CANVAS_WIDTH - 10, 20);\n\n // ── Pause hint ────────────────────────────────────\n ctx.fillStyle = 'rgba(0,0,0,0.3)';\n ctx.font = '12px monospace';\n ctx.textAlign = 'center';\n ctx.fillText('[P] pause', CANVAS_WIDTH / 2, CANVAS_HEIGHT - 18);\n\n ctx.restore();\n }\n}\n\nexport default Game;\n","errors":[],"open":false},{"id":"24e17960-c4da-437b-a65e-6d85e7521535","file":"tilemap","code":"import { drawShape } from './gamedoh-engine.js';\nimport { BLOCK_SIZE, TILE_SIZE, CANVAS_WIDTH, CANVAS_HEIGHT } from './constants.js';\n\nconst TS = TILE_SIZE * BLOCK_SIZE; // tile width = 64px\nconst TH = BLOCK_SIZE * 8; // tile height = 32px (sprites are 8 rows tall)\n\n// ── Tile sprites (16×8 blocks) ─────────────────────────────────────────────\n\nconst groundTile = [\n ['r','r','r','r','r','r','r','r','r','r','r','r','r','r','r','r'],\n ['r','o','o','o','o','r','o','o','o','o','r','o','o','o','o','r'],\n ['r','o','o','o','o','r','o','o','o','o','r','o','o','o','o','r'],\n ['r','r','r','r','r','r','r','r','r','r','r','r','r','r','r','r'],\n ['o','o','r','o','o','o','o','r','o','o','o','o','r','o','o','o'],\n ['o','o','r','o','o','o','o','r','o','o','o','o','r','o','o','o'],\n ['o','o','r','o','o','o','o','r','o','o','o','o','r','o','o','o'],\n ['r','r','r','r','r','r','r','r','r','r','r','r','r','r','r','r'],\n];\n\nconst brickTile = [\n ['o','o','o','o','o','o','o','o','o','o','o','o','o','o','o','o'],\n ['o','r','r','r','r','o','r','r','r','r','o','r','r','r','r','o'],\n ['o','r','r','r','r','o','r','r','r','r','o','r','r','r','r','o'],\n ['o','o','o','o','o','o','o','o','o','o','o','o','o','o','o','o'],\n ['r','r','r','o','r','r','r','r','r','o','r','r','r','r','o','r'],\n ['r','r','r','o','r','r','r','r','r','o','r','r','r','r','o','r'],\n ['r','r','r','o','r','r','r','r','r','o','r','r','r','r','o','r'],\n ['o','o','o','o','o','o','o','o','o','o','o','o','o','o','o','o'],\n];\n\n// Question blocks drawn with canvas text — no pixel-art sprite needed\n\nconst pipeTopTile = [\n ['_','g','g','g','g','g','g','g','g','g','g','g','g','g','g','_'],\n ['g','g','l','l','l','g','g','g','g','g','g','l','l','l','g','g'],\n ['g','g','l','l','l','g','g','g','g','g','g','l','l','l','g','g'],\n ['g','g','g','g','g','g','g','g','g','g','g','g','g','g','g','g'],\n ['_','_','g','g','g','g','g','g','g','g','g','g','g','g','_','_'],\n ['_','_','g','g','l','l','g','g','g','g','l','l','g','g','_','_'],\n ['_','_','g','g','l','l','g','g','g','g','l','l','g','g','_','_'],\n ['_','_','g','g','g','g','g','g','g','g','g','g','g','g','_','_'],\n];\n\nconst pipeBodyTile = [\n ['_','_','g','g','g','g','g','g','g','g','g','g','g','g','_','_'],\n ['_','_','g','g','l','l','g','g','g','g','l','l','g','g','_','_'],\n ['_','_','g','g','l','l','g','g','g','g','l','l','g','g','_','_'],\n ['_','_','g','g','g','g','g','g','g','g','g','g','g','g','_','_'],\n ['_','_','g','g','g','g','g','g','g','g','g','g','g','g','_','_'],\n ['_','_','g','g','l','l','g','g','g','g','l','l','g','g','_','_'],\n ['_','_','g','g','l','l','g','g','g','g','l','l','g','g','_','_'],\n ['_','_','g','g','g','g','g','g','g','g','g','g','g','g','_','_'],\n];\n\n// ── Level layouts ──────────────────────────────────────────────────────────\n// World = 2560px = 40 tiles (TS=64px each). Pipes occupy 2 tiles width.\n// Keep bricks/? at least 1 tile gap from any pipe edge.\n// Goombas start at tile 6+ so Mario has reaction time.\n\nexport const LEVEL_1 = {\n ground: [{ x: 0, w: 14 }, { x: 15, w: 13 }, { x: 29, w: 11 }],\n bricks: [{ x: 8, y: 2 }, { x: 9, y: 2 }, { x: 23, y: 2 }, { x: 24, y: 2 }, { x: 36, y: 2 }],\n questions: [{ x: 10, y: 2 }, { x: 25, y: 2 }, { x: 38, y: 2 }],\n pipes: [{ x: 3, h: 2 }, { x: 20, h: 2 }, { x: 33, h: 3 }],\n goombas: [{ x: 6 }, { x: 12 }, { x: 17 }, { x: 22 }, { x: 30 }, { x: 37 }],\n};\n\nexport const LEVEL_2 = {\n ground: [{ x: 0, w: 10 }, { x: 12, w: 12 }, { x: 26, w: 14 }],\n bricks: [{ x: 5, y: 2 }, { x: 6, y: 2 }, { x: 18, y: 2 }, { x: 19, y: 2 }, { x: 31, y: 2 }, { x: 32, y: 2 }],\n questions: [{ x: 7, y: 2 }, { x: 20, y: 2 }, { x: 34, y: 2 }],\n pipes: [{ x: 2, h: 2 }, { x: 14, h: 3 }, { x: 27, h: 2 }, { x: 37, h: 2 }],\n goombas: [{ x: 5 }, { x: 8 }, { x: 13 }, { x: 16 }, { x: 22 }, { x: 28 }, { x: 34 }, { x: 39 }],\n};\n\n// ── Solid collision rects ──────────────────────────────────────────────────\n\nexport const getTiles = (layout) => {\n const rects = [];\n const groundY = CANVAS_HEIGHT - TS; // 320px\n\n // Ground — full height to canvas bottom for each segment\n layout.ground.forEach(({ x, w }) => {\n rects.push({ x: x * TS, y: groundY, w: w * TS, h: TS });\n });\n\n // Brick platforms — TH tall\n layout.bricks.forEach(({ x, y }) => {\n const py = CANVAS_HEIGHT - (y + 1) * TS;\n rects.push({ x: x * TS, y: py, w: TS, h: TH });\n });\n\n // Question blocks — TH tall\n layout.questions.forEach(({ x, y }) => {\n const py = CANVAS_HEIGHT - (y + 1) * TS;\n rects.push({ x: x * TS, y: py, w: TS, h: TH });\n });\n\n // Pipes — extend 1px above actual top to close the strict-> boundary gap\n // (prevents Mario from passing through at the exact pipe-top pixel)\n layout.pipes.forEach(({ x, h }) => {\n const py = groundY - h * TH;\n rects.push({ x: x * TS, y: py - 1, w: 2 * TS, h: h * TH + 1 });\n });\n\n return rects;\n};\n\n// ── Draw ───────────────────────────────────────────────────────────────────\n\nconst drawTile = (ctx, sprite, px, py) => {\n drawShape(ctx, BLOCK_SIZE, sprite, px, py);\n};\n\nconst drawQuestionBlock = (ctx, px, py, hits) => {\n const used = hits >= 3;\n ctx.save();\n // Outer brick-colour border (matches brick tile: 'r'=red, 'o'=orange)\n ctx.fillStyle = used ? '#666' : 'red';\n ctx.fillRect(px, py, TS, TH);\n // Inner orange inset (brick body colour)\n ctx.fillStyle = used ? '#888' : 'orange';\n ctx.fillRect(px + 3, py + 3, TS - 6, TH - 6);\n // Yellow centre\n ctx.fillStyle = used ? '#888' : '#e8b800';\n ctx.fillRect(px + 5, py + 5, TS - 10, TH - 10);\n // \"?\" text (only when not used)\n if (!used) {\n ctx.fillStyle = '#fff';\n ctx.font = `bold ${TH - 8}px monospace`;\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText('?', px + TS / 2, py + TH / 2);\n }\n ctx.restore();\n};\n\nexport const drawTilemap = (ctx, cameraX, layout, blockHits = new Map()) => {\n const groundY = CANVAS_HEIGHT - TS;\n const buf = TS * 2;\n\n // Ground — 2 rows fill solid to canvas bottom\n layout.ground.forEach(({ x, w }) => {\n for (let tx = x; tx < x + w; tx++) {\n const px = tx * TS - cameraX;\n if (px > -buf && px < CANVAS_WIDTH + buf) {\n drawTile(ctx, groundTile, px, groundY);\n drawTile(ctx, groundTile, px, groundY + TH);\n }\n }\n });\n\n // Bricks\n layout.bricks.forEach(({ x, y }) => {\n const px = x * TS - cameraX;\n const py = CANVAS_HEIGHT - (y + 1) * TS;\n if (px > -buf && px < CANVAS_WIDTH + buf) {\n drawTile(ctx, brickTile, px, py);\n }\n });\n\n // Question blocks — drawn with canvas text\n layout.questions.forEach(({ x, y }, i) => {\n const px = x * TS - cameraX;\n const py = CANVAS_HEIGHT - (y + 1) * TS;\n if (px > -buf && px < CANVAS_WIDTH + buf) {\n drawQuestionBlock(ctx, px, py, blockHits.get(i) || 0);\n }\n });\n\n // Pipes — drawn at 2× horizontal scale to match 128px collision width\n layout.pipes.forEach(({ x, h }) => {\n const px = x * TS - cameraX;\n if (px <= -buf || px >= CANVAS_WIDTH + buf) return;\n ctx.save();\n ctx.translate(px, 0);\n ctx.scale(2, 1); // stretch sprite from 64px → 128px wide\n for (let ty = 0; ty < h - 1; ty++) {\n drawShape(ctx, BLOCK_SIZE, pipeBodyTile, 0, groundY - (ty + 1) * TH);\n }\n drawShape(ctx, BLOCK_SIZE, pipeTopTile, 0, groundY - h * TH);\n ctx.restore();\n });\n};\n\n// ── Cloud drawing ──────────────────────────────────────────────────────────\n\nexport const drawClouds = (ctx, cameraX) => {\n const clouds = [\n { x: 150, y: 60, r: 28 }, { x: 210, y: 48, r: 38 }, { x: 265, y: 64, r: 22 },\n { x: 500, y: 55, r: 32 }, { x: 560, y: 42, r: 42 }, { x: 620, y: 58, r: 26 },\n { x: 900, y: 62, r: 28 }, { x: 960, y: 50, r: 36 }, { x: 1020, y: 65, r: 22 },\n { x: 1300, y: 55, r: 34 }, { x: 1370, y: 44, r: 40 }, { x: 1430, y: 60, r: 24 },\n { x: 1700, y: 58, r: 30 }, { x: 1760, y: 46, r: 38 }, { x: 1820, y: 62, r: 26 },\n { x: 2100, y: 55, r: 32 }, { x: 2160, y: 44, r: 42 }, { x: 2220, y: 60, r: 24 },\n { x: 2450, y: 62, r: 28 }, { x: 2510, y: 50, r: 36 }, { x: 2560, y: 66, r: 22 },\n ];\n ctx.save();\n ctx.fillStyle = '#fff';\n clouds.forEach(({ x, y, r }) => {\n const px = x - cameraX * 0.5;\n if (px < -100 || px > CANVAS_WIDTH + 100) return;\n ctx.beginPath();\n ctx.arc(px, y, r, 0, Math.PI * 2);\n ctx.arc(px + r * 0.8, y - r * 0.3, r * 0.7, 0, Math.PI * 2);\n ctx.arc(px + r * 1.6, y, r * 0.6, 0, Math.PI * 2);\n ctx.fill();\n });\n ctx.restore();\n};\n","errors":[],"open":false},{"id":"9c3d6557-38a8-4dda-bdb2-c136cd2d5283","file":"sounds","code":"let _actx = null;\nlet _walkInterval = null;\n\nconst getCtx = () => {\n if (!_actx) _actx = new AudioContext();\n return _actx;\n};\n\nconst tone = (freq, endFreq, duration, type = 'square') => {\n try {\n const ctx = getCtx();\n if (ctx.state === 'suspended') ctx.resume();\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.connect(gain);\n gain.connect(ctx.destination);\n osc.type = type;\n osc.frequency.setValueAtTime(freq, ctx.currentTime);\n if (endFreq !== null) {\n osc.frequency.linearRampToValueAtTime(endFreq, ctx.currentTime + duration);\n }\n gain.gain.setValueAtTime(0.08, ctx.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);\n osc.start(ctx.currentTime);\n osc.stop(ctx.currentTime + duration);\n } catch (_) {}\n};\n\nexport const playSound = (type) => {\n if (type === 'jump') tone(300, 500, 0.15, 'sine');\n if (type === 'stomp') tone(150, 100, 0.1);\n if (type === 'death') tone(400, 100, 0.4, 'sine');\n if (type === 'coin') tone(800, 1000, 0.1, 'sine');\n};\n\nexport const startWalking = () => {\n if (_walkInterval) return;\n const step = () => tone(120, 80, 0.07, 'square');\n step();\n _walkInterval = setInterval(step, 220);\n};\n\nexport const stopWalking = () => {\n if (_walkInterval) {\n clearInterval(_walkInterval);\n _walkInterval = null;\n }\n};\n","errors":[],"open":false},{"id":"32820785-9ce4-4840-8406-4d699bfbad11","file":"gamedoh-engine","code":"import BaseGame from 'https://jskidz.au/gamedoh-engine/v1/Game.js';\nimport Button from 'https://jskidz.au/gamedoh-engine/v1/Button.js';\nimport Countdown from 'https://jskidz.au/gamedoh-engine/v1/Countdown.js';\nimport GameTimer from 'https://jskidz.au/gamedoh-engine/v1/GameTimer.js';\nimport Image from 'https://jskidz.au/gamedoh-engine/v1/Image.js';\nimport Level from 'https://jskidz.au/gamedoh-engine/v1/Level.js';\nimport LevelIntro from 'https://jskidz.au/gamedoh-engine/v1/LevelIntro.js';\nimport PixelButton from 'https://jskidz.au/gamedoh-engine/v1/PixelButton.js';\nimport ScoreBoard from 'https://jskidz.au/gamedoh-engine/v1/ScoreBoard.js';\nimport SoundManager from 'https://jskidz.au/gamedoh-engine/v1/SoundManager.js';\nimport State from 'https://jskidz.au/gamedoh-engine/v1/State.js';\nimport Timer from 'https://jskidz.au/gamedoh-engine/v1/Timer.js';\nimport { GAME_STATE } from 'https://jskidz.au/gamedoh-engine/v1/constants.js';\nimport {\n drawGrid,\n drawShape,\n isCollision,\n getRandomNumber,\n shuffle,\n delay,\n stopAllAudio,\n Shake,\n Flash,\n} from 'https://jskidz.au/gamedoh-engine/v1/utils.js';\n\nexport {\n BaseGame,\n Button,\n Countdown,\n GameTimer,\n Image,\n Level,\n LevelIntro,\n PixelButton,\n ScoreBoard,\n SoundManager,\n State,\n Timer,\n GAME_STATE,\n drawGrid,\n drawShape,\n isCollision,\n getRandomNumber,\n shuffle,\n delay,\n stopAllAudio,\n Shake,\n Flash,\n};\n","errors":[],"open":true},{"id":"d383e056-0c4e-4682-bd07-efab4df000d4","file":"inputHandler","code":"import { GAME_STATE } from './gamedoh-engine.js';\n\nconst inputHandler = (game) => {\n const keys = {};\n\n const movementKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', ' ']);\n\n document.body.addEventListener('keydown', (e) => {\n if (e.metaKey || e.ctrlKey) return;\n e.preventDefault();\n\n // Only forward non-movement keys to the framework (start/pause/restart)\n // so arrow keys on the game over screen don't accidentally restart\n if (!movementKeys.has(e.key)) game.handleKey(e.key);\n\n keys[e.key] = true;\n\n if (game.state === GAME_STATE.PLAYING) {\n if (e.key === 'ArrowLeft') game.mario.move('left');\n if (e.key === 'ArrowRight') game.mario.move('right');\n if (e.key === 'ArrowUp' || e.key === ' ') game.mario.move('jump');\n }\n });\n\n document.body.addEventListener('keyup', (e) => {\n keys[e.key] = false;\n\n // Stop horizontal movement when key released\n if (game.state === GAME_STATE.PLAYING) {\n if ((e.key === 'ArrowLeft' && !keys['ArrowRight']) ||\n (e.key === 'ArrowRight' && !keys['ArrowLeft'])) {\n game.mario.move('stop');\n }\n }\n });\n};\n\nexport default inputHandler;\n","errors":[],"open":false},{"id":"4e945ae3-be32-4665-b304-2d0ed1ee083e","file":"screens","code":"import { Timer } from './gamedoh-engine.js';\nimport { CANVAS_WIDTH, CANVAS_HEIGHT, STOMP_SCORE, MUSHROOM_SCORE, COIN_SCORE } from './constants.js';\n\nexport const drawStartScreen = (ctx, startButton) => {\n ctx.save();\n\n // Sky\n ctx.fillStyle = '#5c94fc';\n ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n\n // Clouds\n ctx.fillStyle = '#fff';\n [[120, 70, 30], [165, 58, 38], [210, 72, 25],\n [440, 65, 28], [485, 52, 36], [528, 67, 22]].forEach(([x, y, r]) => {\n ctx.beginPath();\n ctx.arc(x, y, r, 0, Math.PI * 2);\n ctx.arc(x + r * 0.9, y - r * 0.3, r * 0.7, 0, Math.PI * 2);\n ctx.arc(x + r * 1.7, y, r * 0.6, 0, Math.PI * 2);\n ctx.fill();\n });\n\n // Ground strip\n ctx.fillStyle = '#c84c0c';\n ctx.fillRect(0, CANVAS_HEIGHT - 64, CANVAS_WIDTH, 64);\n ctx.fillStyle = '#e86030';\n ctx.fillRect(0, CANVAS_HEIGHT - 64, CANVAS_WIDTH, 8);\n\n // Title\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = '#fff';\n ctx.strokeStyle = '#c84c0c';\n ctx.lineWidth = 6;\n ctx.font = 'bold 56px monospace';\n ctx.strokeText('SUPER MARIO', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 80);\n ctx.fillText('SUPER MARIO', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 80);\n\n ctx.fillStyle = '#f8d800';\n ctx.font = 'bold 20px monospace';\n ctx.fillText('← → to move ↑ to jump', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 28);\n\n // Scoring guide\n ctx.font = '15px monospace';\n ctx.fillStyle = '#fff';\n const col1 = CANVAS_WIDTH / 2 - 140;\n const col2 = CANVAS_WIDTH / 2 + 20;\n let row = CANVAS_HEIGHT / 2 + 10;\n const lineH = 22;\n ctx.textAlign = 'left';\n ctx.fillText(`👾 Stomp Goomba`, col1, row);\n ctx.fillStyle = '#f8d800';\n ctx.fillText(`+${STOMP_SCORE} pts`, col2, row);\n row += lineH;\n ctx.fillStyle = '#fff';\n ctx.fillText(`🍄 Eat Mushroom`, col1, row);\n ctx.fillStyle = '#f8d800';\n ctx.fillText(`+${MUSHROOM_SCORE} pts`, col2, row);\n row += lineH;\n ctx.fillStyle = '#fff';\n ctx.fillText(`❓ Hit ? Block x3`, col1, row);\n ctx.fillStyle = '#f8d800';\n ctx.fillText(`+${COIN_SCORE} pts`, col2, row);\n\n ctx.textAlign = 'center';\n ctx.fillStyle = '#ccc';\n ctx.font = '14px monospace';\n ctx.fillText('[P] to pause', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 88);\n\n ctx.restore();\n // Push start button below the scoring guide, just above the ground strip\n startButton.y = CANVAS_HEIGHT - 72;\n startButton.draw(ctx);\n};\n\nexport const drawPauseOverlay = (ctx) => {\n ctx.save();\n ctx.fillStyle = 'rgba(0,0,0,0.6)';\n ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n ctx.fillStyle = '#f8d800';\n ctx.font = 'bold 52px monospace';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText('PAUSED', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 20);\n ctx.fillStyle = '#ccc';\n ctx.font = '20px monospace';\n ctx.fillText('[P] to resume', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 36);\n ctx.restore();\n};\n\nexport const drawLevelTransition = async (game, levelNumber) => {\n game.transitioning = true;\n let remaining = 3;\n\n game.transitionRenderer = () => {\n const { ctx } = game;\n ctx.save();\n ctx.fillStyle = 'rgba(0,0,0,0.7)';\n ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = '#f8d800';\n ctx.font = 'bold 52px monospace';\n ctx.fillText(`WORLD 1-${levelNumber}`, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 50);\n ctx.fillStyle = '#fff';\n ctx.font = 'bold 80px monospace';\n ctx.fillText(remaining, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 40);\n ctx.restore();\n };\n\n const timer = new Timer(3);\n await timer.start((r) => { remaining = r; });\n\n game.transitioning = false;\n game.transitionRenderer = null;\n};\n\nexport const drawGameOverScreen = (ctx, score, restartButton, timeUp = false) => {\n ctx.save();\n ctx.fillStyle = 'rgba(0,0,0,0.8)';\n ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n\n if (timeUp) {\n ctx.fillStyle = '#f8d800';\n ctx.font = 'bold 38px monospace';\n ctx.fillText('TIME UP!', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 110);\n }\n\n ctx.fillStyle = '#e33';\n ctx.font = 'bold 56px monospace';\n ctx.fillText('GAME OVER', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 60);\n ctx.fillStyle = '#fff';\n ctx.font = '24px monospace';\n ctx.fillText(`Score: ${score}`, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);\n ctx.restore();\n restartButton.draw(ctx);\n};\n\nexport const drawWinScreen = (ctx, score, restartButton) => {\n ctx.save();\n ctx.fillStyle = 'rgba(0,80,0,0.85)';\n ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = '#f8d800';\n ctx.font = 'bold 52px monospace';\n ctx.fillText('YOU WIN!', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 60);\n ctx.fillStyle = '#fff';\n ctx.font = '24px monospace';\n ctx.fillText(`Score: ${score}`, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);\n ctx.restore();\n restartButton.draw(ctx);\n};\n","errors":[],"open":false},{"id":"2f287685-c376-4713-8a13-b40f9f270149","file":"level","code":"import { Level as FrameworkLevel, GameTimer } from './gamedoh-engine.js';\nimport { LEVELS, HEART_BEAT, LIVES } from './constants.js';\nimport { drawLevelTransition } from './screens.js';\n\nclass Level extends FrameworkLevel {\n constructor(game) {\n super(game, LEVELS, null);\n this._remaining = LEVELS[0];\n this._createTimer();\n }\n\n get duration() {\n return LEVELS[this.index];\n }\n\n _createTimer() {\n this._done = false;\n this._timeUp = false;\n this.timer = new GameTimer(\n this.duration,\n HEART_BEAT,\n (remaining) => {\n if (this._done) return;\n this._remaining = remaining;\n },\n () => {\n if (this._done) return;\n this._done = true;\n this._timeUp = true; // handled in game._update() during active gameplay only\n }\n );\n this._remaining = this.duration;\n }\n\n // Called when Mario walks to the end of the world\n reachEnd() {\n if (this._done) return;\n this._done = true;\n if (this.isLast()) {\n this.game.win();\n } else {\n this._advance();\n }\n }\n\n async _advance() {\n this.index++;\n await drawLevelTransition(this.game, this.number);\n this.game.lives = LIVES;\n this._createTimer();\n this.timer.start();\n if (this.game.onLevelSetup) this.game.onLevelSetup();\n }\n\n reset() {\n this.index = 0;\n this._createTimer();\n }\n\n draw() {\n // HUD drawn in game.js drawHUD instead\n }\n}\n\nexport default Level;\n","errors":[],"open":false},{"id":"278eeea2-0d17-4676-a8fb-4c0f8e55c631","file":"mushroom/index","code":"import { drawShape } from './gamedoh-engine.js';\nimport { mushroomSprite } from './mushroom/images.js';\nimport {\n MUSHROOM_BLOCK_SIZE, MUSHROOM_W, MUSHROOM_H,\n MUSHROOM_SPEED, MUSHROOM_SCORE,\n GRAVITY, CANVAS_HEIGHT, CANVAS_WIDTH, TILE_SIZE, BLOCK_SIZE, WORLD_WIDTH,\n} from './constants.js';\nconst TS = TILE_SIZE * BLOCK_SIZE; // 64px\n\nclass Mushroom {\n constructor(game, pipeX, pipeTopY) {\n this.game = game;\n this.x = pipeX + TS - MUSHROOM_W / 2; // centered in 128px-wide pipe\n this.y = pipeTopY + MUSHROOM_H; // start hidden inside the pipe\n this.vx = MUSHROOM_SPEED;\n this.vy = 0;\n this.width = MUSHROOM_W;\n this.height = MUSHROOM_H;\n this.alive = true;\n this.emerged = false;\n this.onGround = false;\n this._pipeTopY = pipeTopY; // clip boundary during emergence\n this._pipeRightX = pipeX + 2 * TS; // right edge of pipe collision zone\n this._emergeTargetY = pipeTopY - MUSHROOM_H - 2; // fully above pipe when reached\n }\n\n update(tiles, mario) {\n if (!this.alive) return;\n\n // Slide up out of pipe — no physics until fully emerged\n if (!this.emerged) {\n this.y -= 1;\n if (this.y <= this._emergeTargetY) {\n this.emerged = true;\n // Place just outside the pipe so it doesn't land on the pipe top\n this.x = this._pipeRightX + 1;\n }\n return;\n }\n\n this.onGround = false;\n\n // Gravity\n this.vy += GRAVITY;\n\n // Horizontal\n this.x += this.vx;\n this._resolveTilesX(tiles);\n\n // World boundary bounce\n if (this.x <= 0) { this.x = 0; this.vx = Math.abs(this.vx); }\n if (this.x + this.width >= WORLD_WIDTH) { this.x = WORLD_WIDTH - this.width; this.vx = -Math.abs(this.vx); }\n\n // Vertical\n this.y += this.vy;\n this._resolveTilesY(tiles);\n\n // Cliff edge detection\n if (this.onGround) this._checkEdge(tiles);\n\n // Fall off world\n if (this.y > CANVAS_HEIGHT + 40) { this.alive = false; return; }\n\n // Mario eats mushroom\n if (!mario._dead && this._overlaps(mario)) {\n this.alive = false;\n this.game.addScore(MUSHROOM_SCORE);\n this.game.playPowerUpSound();\n }\n }\n\n _resolveTilesX(tiles) {\n tiles.forEach((tile) => {\n if (!this._overlaps(tile)) return;\n this.vx = -this.vx;\n this.x += this.vx * 2;\n });\n }\n\n _resolveTilesY(tiles) {\n tiles.forEach((tile) => {\n if (!this._overlaps(tile)) return;\n if (this.vy > 0) {\n this.y = tile.y - this.height;\n this.vy = 0;\n this.onGround = true;\n } else if (this.vy < 0) {\n this.y = tile.y + tile.h;\n this.vy = 0;\n }\n });\n }\n\n _checkEdge(tiles) {\n const probeX = this.vx > 0 ? this.x + this.width + 2 : this.x - 2;\n const probeY = this.y + this.height + 1;\n const hasGround = tiles.some(\n (t) => probeX >= t.x && probeX < t.x + t.w && probeY >= t.y && probeY < t.y + t.h\n );\n if (!hasGround) this.vx = -this.vx;\n }\n\n _overlaps(obj) {\n const ow = obj.w ?? obj.width;\n const oh = obj.h ?? obj.height;\n return (\n this.x < obj.x + ow &&\n this.x + this.width > obj.x &&\n this.y < obj.y + oh &&\n this.y + this.height > obj.y\n );\n }\n\n draw(ctx, cameraX) {\n if (!this.alive) return;\n const screenX = this.x - cameraX;\n if (screenX < -this.width || screenX > CANVAS_WIDTH + this.width) return;\n\n if (!this.emerged) {\n // Clip to only show the part of the mushroom that has emerged above the pipe top\n ctx.save();\n ctx.beginPath();\n ctx.rect(screenX, 0, this.width, this._pipeTopY);\n ctx.clip();\n drawShape(ctx, MUSHROOM_BLOCK_SIZE, mushroomSprite, screenX, this.y);\n ctx.restore();\n } else {\n drawShape(ctx, MUSHROOM_BLOCK_SIZE, mushroomSprite, screenX, this.y);\n }\n }\n}\n\nexport default Mushroom;\n","errors":[],"open":false},{"id":"3f1a8158-4367-4136-aa09-aa05155b1734","file":"mushroom/images","code":"// Mushroom sprite — 8×8 blocks, MUSHROOM_BLOCK_SIZE=2 → 16×16px rendered\n// r=red cap, w=white dot, e=cream stem, d=dark outline, _=transparent\nexport const mushroomSprite = [\n ['_', '_', 'r', 'r', 'r', 'r', '_', '_'],\n ['_', 'r', 'r', 'r', 'r', 'r', 'r', '_'],\n ['r', 'w', 'r', 'r', 'r', 'r', 'w', 'r'],\n ['r', 'w', 'r', 'r', 'r', 'r', 'w', 'r'],\n ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'],\n ['_', 'e', 'e', 'e', 'e', 'e', 'e', '_'],\n ['_', 'e', 'e', 'e', 'e', 'e', 'e', '_'],\n ['_', '_', 'e', 'e', 'e', 'e', '_', '_'],\n];\n","errors":[],"open":false},{"id":"931e85f7-164e-43ac-b685-9ec46d042ecd","file":"goomba/index","code":"import { drawShape } from './gamedoh-engine.js';\nimport { goombaA, goombaB, goombaFlat } from './goomba/images.js';\nimport {\n GOOMBA_BLOCK_SIZE, GRAVITY, GOOMBA_SPEED, GOOMBA_W, GOOMBA_H,\n CANVAS_HEIGHT, CANVAS_WIDTH, STOMP_SCORE, WORLD_WIDTH,\n} from './constants.js';\n\nclass Goomba {\n constructor(game, startX) {\n this.game = game;\n this.x = startX;\n this.y = CANVAS_HEIGHT - 64 - GOOMBA_H;\n this.vx = -GOOMBA_SPEED;\n this.vy = 0;\n this.width = GOOMBA_W;\n this.height = GOOMBA_H;\n this.alive = true;\n this.flat = false;\n this.onGround = false;\n this._flatTimer = 0;\n this._animTimer = 0;\n this._frame = 0;\n }\n\n update(tiles, cameraX, mario) {\n if (this.flat) {\n this._flatTimer++;\n if (this._flatTimer > 30) this.alive = false;\n return;\n }\n if (!this.alive) return;\n\n // Only update if near camera view\n const screenX = this.x - cameraX;\n if (screenX < -CANVAS_WIDTH || screenX > CANVAS_WIDTH * 2) return;\n\n this.onGround = false;\n\n // Gravity\n this.vy += GRAVITY;\n\n // Horizontal move\n this.x += this.vx;\n this._resolveTilesX(tiles);\n\n // World boundary bounce\n if (this.x <= 0) { this.x = 0; this.vx = Math.abs(this.vx); }\n if (this.x + this.width >= WORLD_WIDTH) { this.x = WORLD_WIDTH - this.width; this.vx = -Math.abs(this.vx); }\n\n // Vertical move\n this.y += this.vy;\n this._resolveTilesY(tiles);\n\n // Cliff edge detection — reverse before stepping off\n if (this.onGround) this._checkEdge(tiles);\n\n // Fall into pit — remove\n if (this.y > CANVAS_HEIGHT + 40) { this.alive = false; return; }\n\n // Animate walk\n if (++this._animTimer >= 10) {\n this._animTimer = 0;\n this._frame = this._frame === 0 ? 1 : 0;\n }\n\n // Stomp check\n if (mario._dead) return;\n if (this._overlaps(mario)) {\n const marioBottom = mario.y + mario.height;\n const goombaTop = this.y;\n if (mario.vy > 0 && marioBottom < goombaTop + 20) {\n this.flat = true;\n mario.vy = -6;\n this.game.addScore(STOMP_SCORE);\n } else if (!mario.flash?.active) {\n mario.die();\n }\n }\n }\n\n _resolveTilesX(tiles) {\n tiles.forEach((tile) => {\n if (!this._overlaps(tile)) return;\n this.vx = -this.vx;\n this.x += this.vx * 2;\n });\n }\n\n _resolveTilesY(tiles) {\n tiles.forEach((tile) => {\n if (!this._overlaps(tile)) return;\n if (this.vy > 0) {\n this.y = tile.y - this.height;\n this.vy = 0;\n this.onGround = true;\n } else if (this.vy < 0) {\n this.y = tile.y + tile.h;\n this.vy = 0;\n }\n });\n }\n\n // Reverse direction if there's no ground 1px ahead of the front edge\n _checkEdge(tiles) {\n const probeX = this.vx > 0 ? this.x + this.width + 2 : this.x - 2;\n const probeY = this.y + this.height + 1;\n const hasGround = tiles.some(\n (t) => probeX >= t.x && probeX < t.x + t.w && probeY >= t.y && probeY < t.y + t.h\n );\n if (!hasGround) this.vx = -this.vx;\n }\n\n _overlaps(obj) {\n const ow = obj.w ?? obj.width;\n const oh = obj.h ?? obj.height;\n return (\n this.x < obj.x + ow &&\n this.x + this.width > obj.x &&\n this.y < obj.y + oh &&\n this.y + this.height > obj.y\n );\n }\n\n draw(ctx, cameraX) {\n if (!this.alive) return;\n const screenX = this.x - cameraX;\n if (screenX < -this.width || screenX > CANVAS_WIDTH + this.width) return;\n const sprite = this.flat ? goombaFlat : (this._frame === 0 ? goombaA : goombaB);\n drawShape(ctx, GOOMBA_BLOCK_SIZE, sprite, screenX, this.y);\n }\n}\n\nexport default Goomba;\n","errors":[],"open":false},{"id":"c713677f-d187-42ac-85ed-2161f576b22a","file":"goomba/images","code":"// Goomba sprites — 12 wide × 10 tall blocks (48×40px at BLOCK_SIZE=4)\n// Color key: o=orange(body/brown), d=black(outline/eyes/feet),\n// w=white(eye whites), r=red(angry brows), _=transparent\n\nexport const goombaA = [\n ['_','_','o','o','o','o','o','o','o','_','_','_'],\n ['_','o','o','o','o','o','o','o','o','o','_','_'],\n ['o','o','o','o','o','o','o','o','o','o','o','_'],\n ['o','d','d','o','o','o','o','d','d','o','o','_'],\n ['o','d','w','d','o','o','d','w','d','o','o','_'],\n ['o','o','r','o','o','o','o','r','o','o','o','_'],\n ['o','o','o','o','o','o','o','o','o','o','o','_'],\n ['_','o','d','d','o','o','d','d','o','o','_','_'],\n ['_','d','d','_','_','_','_','d','d','_','_','_'],\n ['d','d','_','_','_','_','_','_','d','d','_','_'],\n];\n\nexport const goombaB = [\n ['_','_','o','o','o','o','o','o','o','_','_','_'],\n ['_','o','o','o','o','o','o','o','o','o','_','_'],\n ['o','o','o','o','o','o','o','o','o','o','o','_'],\n ['o','d','d','o','o','o','o','d','d','o','o','_'],\n ['o','d','w','d','o','o','d','w','d','o','o','_'],\n ['o','o','r','o','o','o','o','r','o','o','o','_'],\n ['o','o','o','o','o','o','o','o','o','o','o','_'],\n ['_','o','d','d','o','o','d','d','o','o','_','_'],\n ['d','d','d','_','_','_','_','d','d','d','_','_'],\n ['_','d','_','_','_','_','_','_','_','d','_','_'],\n];\n\nexport const goombaFlat = [\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['o','o','o','o','o','o','o','o','o','o','o','_'],\n ['d','d','d','d','d','d','d','d','d','d','d','_'],\n];\n","errors":[],"open":false},{"id":"4b5d2bb9-57a2-4679-9724-70a3af6e983d","file":"mario/index","code":"import { drawShape, Flash } from './gamedoh-engine.js';\nimport { IdleState, RunningState, JumpingState, DeadState, IDLE, RUNNING, JUMPING, DEAD } from './mario/states.js';\nimport { playSound } from './sounds.js';\nimport {\n MARIO_BLOCK_SIZE, GRAVITY, JUMP_VY, MOVE_SPEED,\n MARIO_W, MARIO_H, CANVAS_HEIGHT, CANVAS_WIDTH, WORLD_WIDTH,\n} from './constants.js';\n\nclass Mario {\n constructor(game, startX = 64) {\n this.game = game;\n this.x = startX;\n this.y = CANVAS_HEIGHT - 64 - MARIO_H; // standing on ground\n this.vx = 0;\n this.vy = 0;\n this.width = MARIO_W;\n this.height = MARIO_H;\n this.onGround = false;\n this.facingRight = true;\n this._dead = false;\n this.flash = new Flash(); // post-respawn invincibility\n this._lastGroundX = startX; // last x position where Mario stood on solid ground\n\n this.states = {\n [IDLE]: new IdleState(this),\n [RUNNING]: new RunningState(this),\n [JUMPING]: new JumpingState(this),\n [DEAD]: new DeadState(this),\n };\n this.currentState = this.states[IDLE];\n this.currentState.enter();\n }\n\n enterState(name) {\n if (this.currentState.state === name) return;\n this.currentState = this.states[name];\n this.currentState.enter();\n }\n\n move(dir) {\n if (this._dead) return;\n if (dir === 'left') { this.vx = -MOVE_SPEED; this.facingRight = false; }\n if (dir === 'right') { this.vx = MOVE_SPEED; this.facingRight = true; }\n if (dir === 'stop') { this.vx = 0; }\n if (dir === 'jump' && this.onGround) {\n this.vy = JUMP_VY;\n this.onGround = false;\n playSound('jump');\n }\n }\n\n die() {\n if (this._dead) return;\n this._dead = true;\n playSound('death');\n this.enterState(DEAD);\n }\n\n update(tiles, cameraX) {\n this.flash.update();\n\n if (this._dead) {\n // Dead Mario: only gravity, no tile collision\n this.vy += GRAVITY;\n this.y += this.vy;\n this.currentState.nextFrame();\n return;\n }\n\n // Gravity\n this.vy += GRAVITY;\n\n // Move horizontally\n this.x += this.vx;\n\n // Left boundary — can't scroll back past camera\n if (this.x < cameraX) this.x = cameraX;\n\n // Horizontal tile collision\n this._resolveTiles(tiles, 'x');\n\n // Move vertically\n this.onGround = false;\n this.y += this.vy;\n\n // Vertical tile collision\n this._resolveTiles(tiles, 'y');\n\n // Right world boundary\n const rightLimit = WORLD_WIDTH - this.width;\n if (this.x > rightLimit) { this.x = rightLimit; this.vx = 0; }\n\n // Fall into pit\n if (this.y > CANVAS_HEIGHT + 40) {\n this.die();\n return;\n }\n\n // Track last safe ground position for respawn\n if (this.onGround) this._lastGroundX = this.x;\n\n // Update animation state\n if (!this.onGround) {\n this.enterState(JUMPING);\n } else if (this.vx !== 0) {\n this.enterState(RUNNING);\n } else {\n this.enterState(IDLE);\n }\n\n this.currentState.nextFrame();\n }\n\n _resolveTiles(tiles, axis) {\n tiles.forEach((tile) => {\n if (!this._overlaps(tile)) return;\n\n if (axis === 'x') {\n if (this.vx > 0) this.x = tile.x - this.width;\n else if (this.vx < 0) this.x = tile.x + tile.w;\n this.vx = 0;\n } else {\n if (this.vy > 0) {\n // Landing on top\n this.y = tile.y - this.height;\n this.vy = 0;\n this.onGround = true;\n } else if (this.vy < 0) {\n // Hitting ceiling\n this.y = tile.y + tile.h;\n this.vy = 0;\n }\n }\n });\n }\n\n _overlaps(tile) {\n return (\n this.x < tile.x + tile.w &&\n this.x + this.width > tile.x &&\n this.y < tile.y + tile.h &&\n this.y + this.height > tile.y\n );\n }\n\n draw(ctx, cameraX) {\n if (!this.flash.visible) return;\n\n const sprite = this.currentState.getImage();\n const screenX = this.x - cameraX;\n const screenY = this.y;\n\n if (!this.facingRight) {\n // Mirror horizontally\n ctx.save();\n ctx.translate(screenX + this.width, screenY);\n ctx.scale(-1, 1);\n drawShape(ctx, MARIO_BLOCK_SIZE, sprite, 0, 0);\n ctx.restore();\n } else {\n drawShape(ctx, MARIO_BLOCK_SIZE, sprite, screenX, screenY);\n }\n }\n}\n\nexport default Mario;\n","errors":[],"open":false},{"id":"4555a4e0-b59a-404a-8f26-c06d64c4702f","file":"mario/states","code":"import { State, Image } from './gamedoh-engine.js';\nimport { marioIdle, marioWalkA, marioWalkB, marioJump, marioDead } from './mario/images.js';\nimport { startWalking, stopWalking } from './sounds.js';\n\nexport const IDLE = 'IDLE';\nexport const RUNNING = 'RUNNING';\nexport const JUMPING = 'JUMPING';\nexport const DEAD = 'DEAD';\n\nexport class IdleState extends State {\n constructor(mario) {\n super(mario, IDLE);\n this.image = new Image([marioIdle]);\n }\n enter() { this.image.index = 0; stopWalking(); }\n getImage() { return this.image.getImage(); }\n nextFrame() {}\n}\n\nexport class RunningState extends State {\n constructor(mario) {\n super(mario, RUNNING);\n this.image = new Image([marioWalkA, marioWalkB]);\n this._timer = 0;\n }\n enter() { this.image.index = 0; this._timer = 0; startWalking(); }\n getImage() { return this.image.getImage(); }\n nextFrame() {\n if (++this._timer >= 5) {\n this._timer = 0;\n this.image.next();\n }\n }\n}\n\nexport class JumpingState extends State {\n constructor(mario) {\n super(mario, JUMPING);\n this.image = new Image([marioJump]);\n }\n enter() { this.image.index = 0; stopWalking(); }\n getImage() { return this.image.getImage(); }\n nextFrame() {}\n}\n\nexport class DeadState extends State {\n constructor(mario) {\n super(mario, DEAD);\n this.image = new Image([marioDead]);\n this._timer = 0;\n }\n enter() {\n this.image.index = 0;\n this._timer = 0;\n this.entity.vy = -8;\n this.entity.vx = 0;\n stopWalking();\n }\n getImage() { return this.image.getImage(); }\n nextFrame() {\n this._timer++;\n if (this._timer > 80) {\n this.entity.game.loseLife();\n }\n }\n}\n","errors":[],"open":false},{"id":"1f496ef0-d821-46e2-9a1c-f1497cd7b94b","file":"mario/images","code":"// Mario sprites — 12 wide × 14 tall blocks (48×56px at BLOCK_SIZE=4)\n// Color key: r=red(hat/shirt), o=orange(skin), b=blue(overalls),\n// d=black(eyes/shoes), y=yellow(buckle), _=transparent\n\nexport const marioIdle = [\n ['_','_','_','r','r','r','r','_','_','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','o','o','o','d','o','o','_','_','_','_'],\n ['_','o','o','o','o','o','o','o','o','_','_','_'],\n ['_','o','r','r','o','o','r','r','o','_','_','_'],\n ['_','_','r','r','r','r','r','r','_','_','_','_'],\n ['_','r','b','b','r','r','b','b','r','_','_','_'],\n ['r','r','b','b','b','b','b','b','r','r','_','_'],\n ['_','o','b','y','b','b','y','b','o','_','_','_'],\n ['_','_','b','b','b','b','b','b','_','_','_','_'],\n ['_','_','b','b','_','_','b','b','_','_','_','_'],\n ['_','d','d','d','_','_','d','d','d','_','_','_'],\n ['d','d','d','_','_','_','_','d','d','d','_','_'],\n];\n\nexport const marioWalkA = [\n ['_','_','_','r','r','r','r','_','_','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','o','o','o','d','o','o','_','_','_','_'],\n ['_','o','o','o','o','o','o','o','o','_','_','_'],\n ['_','o','r','r','o','o','r','r','o','_','_','_'],\n ['_','_','r','r','r','r','r','r','_','_','_','_'],\n ['_','r','b','b','r','r','b','b','r','_','_','_'],\n ['r','r','b','b','b','b','b','b','r','r','_','_'],\n ['_','o','b','y','b','b','y','b','o','_','_','_'],\n ['_','_','b','b','b','b','b','b','_','_','_','_'],\n ['_','b','b','b','_','_','_','b','_','_','_','_'],\n ['_','d','d','_','_','_','_','_','d','_','_','_'],\n ['_','d','d','_','_','_','_','d','d','_','_','_'],\n];\n\nexport const marioWalkB = [\n ['_','_','_','r','r','r','r','_','_','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','o','o','o','d','o','o','_','_','_','_'],\n ['_','o','o','o','o','o','o','o','o','_','_','_'],\n ['_','o','r','r','o','o','r','r','o','_','_','_'],\n ['_','_','r','r','r','r','r','r','_','_','_','_'],\n ['_','r','b','b','r','r','b','b','r','_','_','_'],\n ['r','r','b','b','b','b','b','b','r','r','_','_'],\n ['_','o','b','y','b','b','y','b','o','_','_','_'],\n ['_','_','b','b','b','b','b','b','_','_','_','_'],\n ['_','_','b','_','_','_','b','b','b','_','_','_'],\n ['_','_','d','_','_','_','_','d','d','_','_','_'],\n ['_','d','d','_','_','_','_','d','d','_','_','_'],\n];\n\nexport const marioJump = [\n ['_','_','_','r','r','r','r','_','_','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','_','o','o','o','d','o','o','_','_','_','_'],\n ['_','o','o','o','o','o','o','o','o','_','_','_'],\n ['_','o','r','r','o','o','r','r','o','_','_','_'],\n ['_','_','r','r','r','r','r','r','_','_','_','_'],\n ['r','_','b','b','r','r','b','b','_','r','_','_'],\n ['r','r','b','b','b','b','b','b','r','r','_','_'],\n ['r','o','b','y','b','b','y','b','o','r','_','_'],\n ['_','_','b','b','b','b','b','b','_','_','_','_'],\n ['_','_','d','d','b','b','d','d','_','_','_','_'],\n ['_','d','d','_','_','_','_','d','d','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n];\n\nexport const marioDead = [\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','r','r','r','r','_','_','_','_','_'],\n ['_','_','r','r','r','r','r','r','r','_','_','_'],\n ['_','o','r','o','o','r','o','o','r','_','_','_'],\n ['_','o','o','o','o','o','o','o','o','_','_','_'],\n ['_','_','o','o','d','o','d','o','_','_','_','_'],\n ['_','_','r','r','r','r','r','r','_','_','_','_'],\n ['_','r','b','r','r','r','r','b','r','_','_','_'],\n ['r','r','r','b','b','b','b','r','r','r','_','_'],\n ['_','_','b','b','b','b','b','b','_','_','_','_'],\n ['_','d','d','b','_','_','b','d','d','_','_','_'],\n ['_','_','d','d','_','_','d','d','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n ['_','_','_','_','_','_','_','_','_','_','_','_'],\n];\n","errors":[],"open":false},{"id":"d76b6fa1-e98a-4ceb-9fef-3cccf5b4c898","file":"main","code":"import Game from './game.js';\nimport Mario from './mario/index.js';\nimport Goomba from './goomba/index.js';\nimport inputHandler from './inputHandler.js';\nimport { CANVAS_WIDTH, CANVAS_HEIGHT, TILE_SIZE, BLOCK_SIZE, INVINCIBLE_FRAMES } from './constants.js';\nimport { LEVEL_1, LEVEL_2 } from './tilemap.js';\n\nconst LAYOUTS = [LEVEL_1, LEVEL_2];\n\nconst canvas = document.getElementById('gameCanvas');\ncanvas.width = CANVAS_WIDTH;\ncanvas.height = CANVAS_HEIGHT;\nconst ctx = canvas.getContext('2d');\n\nconst game = new Game(ctx, { canvas });\n\nconst spawnGoombas = (layout) =>\n layout.goombas.map((g) => new Goomba(game, g.x * TILE_SIZE * BLOCK_SIZE));\n\nconst resetGameState = () => {\n game.mushrooms = [];\n game.coins = [];\n game.blockHits = new Map();\n game.spawnedPipes = new Set();\n game.cameraX = 0;\n};\n\nconst setupGame = () => {\n game.mario = new Mario(game);\n game.goombas = spawnGoombas(LEVEL_1);\n game._wasTimeUp = false;\n resetGameState();\n};\n\nconst resetResources = () => {\n const layout = LAYOUTS[Math.min(game.level.index, LAYOUTS.length - 1)];\n game.mario = new Mario(game);\n game.goombas = spawnGoombas(layout);\n resetGameState();\n};\n\ngame.onLoseLife = () => {\n const spawnX = game._respawnX || 64;\n game.mario = new Mario(game, spawnX);\n game.mario.flash.trigger(INVINCIBLE_FRAMES);\n game.cameraX = Math.max(0, spawnX - CANVAS_WIDTH / 2);\n};\n\nsetupGame();\ngame.onRestart = setupGame;\ngame.onLevelSetup = resetResources;\n\ninputHandler(game);\n\nconst loadAssets = () =>\n new Promise((resolve) => {\n if (document.readyState === 'complete') resolve();\n else window.addEventListener('load', resolve);\n });\n\n(async () => {\n await loadAssets();\n document.getElementById('loading').style.display = 'none';\n document.getElementById('gameCanvas').style.display = 'block';\n game.init();\n})();\n","errors":[],"open":false}],"running":false,"htmlOpen":false}