engine.scope(({ start, cls, spr, btn, btnp, text, caption, mset, mget, map, fget, camera, creset }) => { const sprites = { floor: [ [ 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 11, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 11, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, ], [false, false, false, false, false, false, false, false], ], wall: [ [ 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 5, 6, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 6, ], [true, false, false, false, false, false, false, false], ], playerDown: [ [ -1, -1, 8, 8, 8, 8, -1, -1, -1, 8, 8, 8, 8, 8, 8, -1, -1, 15, 15, 15, 15, 15, 15, -1, -1, 15, 1, 15, 15, 1, 15, -1, -1, -1, 1, 1, 1, 1, -1, -1, -1, 1, 1, 1, 1, 1, 1, -1, -1, -1, 1, -1, -1, 1, -1, -1, -1, -1, 4, -1, -1, 4, -1, -1, ], [false, false, false, false, false, false, false, false], ], playerUp: [ [ -1, -1, 8, 8, 8, 8, -1, -1, -1, 8, 8, 8, 8, 8, 8, -1, -1, 8, 8, 8, 8, 8, 8, -1, -1, 8, 8, 8, 8, 8, 8, -1, -1, -1, 1, 1, 1, 1, -1, -1, -1, 1, 1, 1, 1, 1, 1, -1, -1, -1, 1, -1, -1, 1, -1, -1, -1, -1, 4, -1, -1, 4, -1, -1, ], [false, false, false, false, false, false, false, false], ], playerLeft: [ [ -1, -1, 8, 8, 8, -1, -1, -1, -1, 8, 8, 8, 8, 8, -1, -1, -1, 15, 15, 15, 15, -1, -1, -1, 1, 15, 15, 15, -1, -1, -1, -1, -1, -1, 1, 1, 1, -1, -1, -1, -1, 1, 1, 1, 1, -1, -1, -1, -1, -1, 1, -1, 1, -1, -1, -1, -1, -1, 4, -1, 4, -1, -1, -1, ], [false, false, false, false, false, false, false, false], ], playerRight: [ [ -1, -1, -1, 8, 8, 8, -1, -1, -1, -1, 8, 8, 8, 8, 8, -1, -1, -1, -1, 15, 15, 15, 15, -1, -1, -1, -1, -1, 15, 15, 15, 1, -1, -1, -1, 1, 1, 1, -1, -1, -1, -1, 1, 1, 1, 1, -1, -1, -1, -1, 1, -1, 1, -1, -1, -1, -1, -1, 4, -1, 4, -1, -1, -1, ], [false, false, false, false, false, false, false, false], ], npc: [ [ -1, -1, 13, 13, 13, 13, -1, -1, -1, 13, 13, 13, 13, 13, 13, -1, -1, 15, 15, 15, 15, 15, 15, -1, -1, 15, 1, 15, 15, 1, 15, -1, -1, -1, 12, 12, 12, 12, -1, -1, -1, 12, 12, 12, 12, 12, 12, -1, -1, -1, 12, -1, -1, 12, -1, -1, -1, -1, 4, -1, -1, 4, -1, -1, ], [false, false, false, false, false, false, false, false], ], }; const MAP_W = 32, MAP_H = 24; const CANVAS = 128; let tileX = 3, tileY = 3; let px, py; let camX = 0, camY = 0; let moving = false; let facing = 'down'; let lastAxis = 'h'; const speed = 2; const facingSprite = { down: 'playerDown', up: 'playerUp', left: 'playerLeft', right: 'playerRight', }; const dir = { left: [-1, 0], right: [1, 0], up: [0, -1], down: [0, 1] }; const npcs = [ { tileX: 5, tileY: 4, sprite: 'npc', name: 'Old Man', lines: ['Welcome, traveler!', 'Head east through', 'the corridor.'] }, { tileX: 22, tileY: 4, sprite: 'npc', name: 'Guard', lines: ['You made it to', 'the east wing.', 'Keep exploring!'] }, { tileX: 10, tileY: 18, sprite: 'npc', name: 'Scholar', lines: ['The camera follows', 'you around this', 'bigger world.'] }, ]; let nearNpc = null; let mode = 'explore'; let dialogNpc = null; let dialogLine = 0; function isBlocked(x, y) { const tile = mget(x, y); if (tile && fget(tile, 0)) return true; return npcs.some(n => n.tileX === x && n.tileY === y); } function buildWorld() { for (let y = 0; y < MAP_H; y++) { for (let x = 0; x < MAP_W; x++) { mset(x, y, 'floor'); } } for (let x = 0; x < MAP_W; x++) { mset(x, 0, 'wall'); mset(x, MAP_H - 1, 'wall'); } for (let y = 0; y < MAP_H; y++) { mset(0, y, 'wall'); mset(MAP_W - 1, y, 'wall'); } // vertical wall splitting west and east wings for (let y = 1; y < MAP_H - 1; y++) { if (y >= 5 && y <= 7) continue; mset(15, y, 'wall'); } // horizontal wall splitting north and south for (let x = 1; x < MAP_W - 1; x++) { if (x === 15) continue; if (x >= 8 && x <= 11) continue; if (x >= 22 && x <= 25) continue; mset(x, 11, 'wall'); } // west room pillars mset(4, 7, 'wall'); mset(5, 7, 'wall'); mset(10, 7, 'wall'); mset(11, 7, 'wall'); // east room alcove for (let y = 2; y <= 4; y++) mset(25, y, 'wall'); for (let x = 25; x <= 28; x++) mset(x, 4, 'wall'); // south room obstacles mset(5, 16, 'wall'); mset(6, 16, 'wall'); mset(5, 17, 'wall'); mset(24, 16, 'wall'); mset(25, 16, 'wall'); mset(24, 17, 'wall'); } function init() { buildWorld(); px = tileX * 8; py = tileY * 8; } function update() { if (mode === 'dialogue') { if (btnp('z') || btnp(' ')) { dialogLine++; if (dialogLine >= dialogNpc.lines.length) { mode = 'explore'; dialogNpc = null; dialogLine = 0; } } return; } if (!moving && nearNpc && (btnp('z') || btnp(' '))) { mode = 'dialogue'; dialogNpc = nearNpc; dialogLine = 0; return; } let dx = 0, dy = 0; if (btn('ArrowLeft') || btn('a')) dx = -1; else if (btn('ArrowRight') || btn('d')) dx = 1; if (btn('ArrowUp') || btn('w')) dy = -1; else if (btn('ArrowDown') || btn('s')) dy = 1; if (dx !== 0 && dy === 0) lastAxis = 'h'; if (dy !== 0 && dx === 0) lastAxis = 'v'; if (dx !== 0 && dy !== 0) { if (lastAxis === 'h') dx = 0; else dy = 0; } if (dx === -1) facing = 'left'; else if (dx === 1) facing = 'right'; else if (dy === -1) facing = 'up'; else if (dy === 1) facing = 'down'; if (!moving && (dx !== 0 || dy !== 0)) { const nx = tileX + dx; const ny = tileY + dy; if (!isBlocked(nx, ny)) { tileX = nx; tileY = ny; moving = true; } } if (moving) { const tx = tileX * 8; const ty = tileY * 8; if (px < tx) px = Math.min(px + speed, tx); else if (px > tx) px = Math.max(px - speed, tx); if (py < ty) py = Math.min(py + speed, ty); else if (py > ty) py = Math.max(py - speed, ty); if (px === tx && py === ty) moving = false; } const [fdx, fdy] = dir[facing]; const fx = tileX + fdx; const fy = tileY + fdy; nearNpc = npcs.find(n => n.tileX === fx && n.tileY === fy) || null; camX = Math.max(0, Math.min(MAP_W * 8 - CANVAS, px - 60)); camY = Math.max(0, Math.min(MAP_H * 8 - CANVAS, py - 60)); } function draw() { cls(0); camera(camX, camY); const cx = Math.floor(camX / 8); const cy = Math.floor(camY / 8); map(0, cx, cy, 17, 17, cx * 8, cy * 8); for (const n of npcs) { spr(n.sprite, n.tileX * 8, n.tileY * 8); } spr(facingSprite[facing], px, py); creset(); if (mode === 'dialogue' && dialogNpc) { caption(dialogNpc.name, 4, 88, 10); caption(dialogNpc.lines[dialogLine], 4, 100, 7); caption('Z...', 108, 112, 6); } else if (nearNpc && !moving) { caption('Z to talk', 38, 112, 7); } } start({ sprites, sounds: {}, init, update, draw, target }); });

Editing: Top-Down Adventure: Camera

Recent Edits

Plugins