engine.scope(({ start, cls, spr, btn, btnp, text, rectfill, mset, mget, map, fget, camera, creset, rnd, randomIntegerBetween }) => { const sprites = { grass: [ [ 3, 3, 11, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 11, 3, 3, 3, 11, 3, 3, 3, 3, 3, 11, 3, 3, 3, 11, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 11, 3, 11, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 11, 3, 3, 3, 3, 3, 11, 3, 3, 3, 3, 11, ], [false, true, false, false, false, false, false, false], ], path: [ [ 4, 4, 4, 4, 4, 4, 4, 4, 4, 15, 4, 4, 4, 4, 15, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 15, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 15, 4, 4, 4, 15, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, ], [false, false, false, false, false, false, false, false], ], tree: [ [ -1, 3, 11, 3, 3, 11, 3, -1, 3, 11, 3, 11, 11, 3, 11, 3, 3, 3, 11, 3, 3, 11, 3, 3, -1, 3, 3, 11, 11, 3, 3, -1, -1, -1, -1, 4, 4, -1, -1, -1, -1, -1, -1, 4, 4, -1, -1, -1, -1, -1, -1, 4, 4, -1, -1, -1, -1, -1, -1, 4, 4, -1, -1, -1, ], [true, 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], ], flamepup: [ [ -1, -1, 8, 8, 8, 8, -1, -1, -1, 8, 9, 8, 8, 9, 8, -1, -1, 8, 8, 8, 8, 8, 8, -1, 8, 0, 8, 8, 8, 0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 8, 8, -1, 8, 8, 8, 8, 8, 8, -1, -1, -1, 9, 9, 9, 9, -1, -1, ], [false, false, false, false, false, false, false, false], ], }; const MAP_W = 24, MAP_H = 24; const CANVAS = 128; const SPAWN_X = 11, SPAWN_Y = 12; const HP_BAR_W = 40; let tileX = SPAWN_X, tileY = SPAWN_Y; 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', }; let mode = 'overworld'; let battleState = 'menu'; let wildMonster = null; let playerHp = 30; const playerMaxHp = 30; const playerAtk = 8; const playerDef = 5; let menuCursor = 0; let messageText = ''; let messageTimer = 0; let nextBattleState = ''; let transitionTimer = 0; let flashTarget = ''; let flashTimer = 0; const monsterPool = [ { name: 'Flamepup', sprite: 'flamepup', maxHp: 20, attack: 8, defense: 3 }, ]; const menuOptions = ['FIGHT', 'RUN']; function buildWorld() { for (let y = 0; y < MAP_H; y++) { for (let x = 0; x < MAP_W; x++) mset(x, y, 'grass'); } for (let x = 0; x < MAP_W; x++) { mset(x, 0, 'tree'); mset(x, MAP_H - 1, 'tree'); } for (let y = 0; y < MAP_H; y++) { mset(0, y, 'tree'); mset(MAP_W - 1, y, 'tree'); } for (let y = 8; y <= 15; y++) { for (let x = 8; x <= 15; x++) mset(x, y, 'path'); } for (let y = 9; y <= 10; y++) { for (let x = 9; x <= 11; x++) mset(x, y, 'wall'); } for (let y = 9; y <= 10; y++) { for (let x = 13; x <= 15; x++) mset(x, y, 'wall'); } for (let y = 13; y <= 14; y++) { for (let x = 10; x <= 13; x++) mset(x, y, 'wall'); } for (let y = 1; y <= 7; y++) { mset(11, y, 'path'); mset(12, y, 'path'); } for (let y = 16; y <= 22; y++) { mset(11, y, 'path'); mset(12, y, 'path'); } for (let x = 1; x <= 7; x++) { mset(x, 11, 'path'); mset(x, 12, 'path'); } for (let x = 16; x <= 22; x++) { mset(x, 11, 'path'); mset(x, 12, 'path'); } mset(3, 3, 'tree'); mset(5, 5, 'tree'); mset(7, 3, 'tree'); mset(4, 6, 'tree'); mset(18, 3, 'tree'); mset(20, 5, 'tree'); mset(17, 6, 'tree'); mset(21, 2, 'tree'); mset(3, 18, 'tree'); mset(6, 20, 'tree'); mset(4, 21, 'tree'); mset(19, 18, 'tree'); mset(21, 20, 'tree'); mset(17, 21, 'tree'); } function isSolid(x, y) { const tile = mget(x, y); return tile && fget(tile, 0); } function isEncounterZone(x, y) { const tile = mget(x, y); return tile && fget(tile, 1); } function calcDamage(atk, def) { return Math.max(1, atk - def + randomIntegerBetween(-2, 2)); } function hpBarColor(hp, maxHp) { const pct = hp / maxHp; if (pct > 0.5) return 11; if (pct > 0.25) return 10; return 8; } function drawHpBar(x, y, hp, maxHp) { const fillW = Math.floor((hp / maxHp) * HP_BAR_W); rectfill(x, y, x + HP_BAR_W, y + 3, 5); if (fillW > 0) rectfill(x, y, x + fillW, y + 3, hpBarColor(hp, maxHp)); } function startEncounter() { const template = monsterPool[Math.floor(rnd(monsterPool.length))]; wildMonster = { ...template, hp: template.maxHp }; mode = 'transition'; transitionTimer = 12; } function endBattle() { mode = 'overworld'; wildMonster = null; } function showMessage(msg, frames) { messageText = msg; messageTimer = frames; battleState = 'message'; } function startFlash(target) { flashTarget = target; flashTimer = 12; } function init() { buildWorld(); px = tileX * 8; py = tileY * 8; } function updateOverworld() { 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 (!isSolid(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; if (isEncounterZone(tileX, tileY) && rnd(1) < 0.15) { startEncounter(); return; } } } 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 updateBattle() { if (flashTimer > 0) flashTimer--; if (battleState === 'message') { messageTimer--; if (messageTimer <= 0) { if (nextBattleState === 'endWin') { showMessage(wildMonster.name + ' defeated!', 60); nextBattleState = 'endReturn'; } else if (nextBattleState === 'endReturn') { endBattle(); } else if (nextBattleState === 'endLose') { showMessage('You blacked out!', 60); nextBattleState = 'endReset'; } else if (nextBattleState === 'endReset') { playerHp = playerMaxHp; tileX = SPAWN_X; tileY = SPAWN_Y; px = tileX * 8; py = tileY * 8; endBattle(); } else if (nextBattleState === 'enemyTurn') { const dmg = calcDamage(wildMonster.attack, playerDef); playerHp = Math.max(0, playerHp - dmg); startFlash('player'); showMessage(wildMonster.name + ' deals ' + dmg + '!', 40); nextBattleState = playerHp <= 0 ? 'endLose' : 'backToMenu'; } else if (nextBattleState === 'backToMenu') { battleState = 'menu'; } else if (nextBattleState === 'runFail') { const dmg = calcDamage(wildMonster.attack, playerDef); playerHp = Math.max(0, playerHp - dmg); startFlash('player'); showMessage(wildMonster.name + ' deals ' + dmg + '!', 40); nextBattleState = playerHp <= 0 ? 'endLose' : 'backToMenu'; } } return; } if (battleState === 'menu') { if (btnp('ArrowUp') || btnp('w')) menuCursor = (menuCursor + menuOptions.length - 1) % menuOptions.length; if (btnp('ArrowDown') || btnp('s')) menuCursor = (menuCursor + 1) % menuOptions.length; if (btnp('z') || btnp(' ')) { if (menuOptions[menuCursor] === 'FIGHT') { const dmg = calcDamage(playerAtk, wildMonster.defense); wildMonster.hp = Math.max(0, wildMonster.hp - dmg); startFlash('enemy'); showMessage('You deal ' + dmg + ' damage!', 40); nextBattleState = wildMonster.hp <= 0 ? 'endWin' : 'enemyTurn'; } else if (menuOptions[menuCursor] === 'RUN') { if (rnd(1) < 0.6) { showMessage('Got away safely!', 40); nextBattleState = 'endReturn'; } else { showMessage("Can't escape!", 40); nextBattleState = 'runFail'; } } } } } function update() { if (mode === 'transition') { transitionTimer--; if (transitionTimer <= 0) { mode = 'battle'; battleState = 'menu'; menuCursor = 0; messageText = ''; messageTimer = 0; flashTimer = 0; } return; } if (mode === 'overworld') updateOverworld(); else if (mode === 'battle') updateBattle(); } function drawBattle() { creset(); cls(0); if (!wildMonster) return; const enemyVisible = !(flashTarget === 'enemy' && flashTimer > 0 && Math.floor(flashTimer / 2) % 2 === 0); if (enemyVisible) spr(wildMonster.sprite, 92, 8); text(wildMonster.name, 4, 4, 7); drawHpBar(4, 14, wildMonster.hp, wildMonster.maxHp); const playerVisible = !(flashTarget === 'player' && flashTimer > 0 && Math.floor(flashTimer / 2) % 2 === 0); if (playerVisible) spr('playerDown', 28, 44); text('You', 72, 40, 7); drawHpBar(72, 50, playerHp, playerMaxHp); if (battleState === 'message') { text(messageText, 4, 90, 10); } else if (battleState === 'menu') { for (let i = 0; i < menuOptions.length; i++) { const y = 90 + i * 14; text(menuOptions[i], 20, y, 7); if (i === menuCursor) text('>', 10, y, 10); } } } function drawOverworld() { 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); spr(facingSprite[facing], px, py); } function draw() { if (mode === 'transition') { cls(transitionTimer % 2 === 0 ? 0 : 7); return; } if (mode === 'battle') drawBattle(); else drawOverworld(); } start({ sprites, sounds: {}, init, update, draw, target }); });

Editing: JRPG: Battle UI

Recent Edits

Plugins