justin/pokeazure
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace directed path with free 2D movement, NPC spawns in random direction each leg

Browse Source
This commit is contained in:
justin committed 2026-05-20 21:32:50 -07:00
1 parent 427381aecf
commit 5877210cb4
2 files changed
+83 -173
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

game.js
+83 -172
View File
@@ -253,8 +253,6 @@ class Game {
worldX: 0, worldY: 0, worldX: 0, worldY: 0,
npcWorldX: 0, npcWorldY: 0, npcWorldX: 0, npcWorldY: 0,
pathDir: 'right', pathDir: 'right',
legProgress: 0,
legLength: 0,
lastDir: 'right', lastDir: 'right',
cursor:0, cursor:0,
}; };
@@ -376,82 +374,63 @@ class Game {
}; };
} }
_legVector() {
const d = this.state.pathDir;
return {
dx: d === 'right' ? 1 : d === 'left' ? -1 : 0,
dy: d === 'down' ? 1 : d === 'up' ? -1 : 0,
};
}
_playerScreenPos() {
const {viewW, viewH} = this._getViewport();
return { sx: viewW / 2 - 16, sy: viewH / 2 - 32 };
}
_walkTick() { _walkTick() {
if (this.state.screen !== 'map') return; if (this.state.screen !== 'map') return;
const {viewW, viewH} = this._getViewport(); const {viewW, viewH} = this._getViewport();
const SPEED = 8; const SPEED = 8;
const pd = this.state.pathDir; let dx = 0, dy = 0, dir = '';
const fwd = { right:'right', left:'left', up:'up', down:'down' }[pd]; if (this._heldKeys.has('right')) { dx = SPEED; dir = 'right'; }
if (!this._heldKeys.has(fwd)) return; if (this._heldKeys.has('left')) { dx = -SPEED; dir = 'left'; }
if (this._heldKeys.has('up')) { dy = -SPEED; dir = 'up'; }
if (this._heldKeys.has('down')) { dy = SPEED; dir = 'down'; }
if (!dir) return;
const {dx, dy} = this._legVector(); this.state.worldX += dx;
const maxProg = this.state.legLength - 60; this.state.worldY += dy;
this.state.legProgress = Math.min(maxProg, Math.max(0, this.state.legProgress + SPEED)); this.state.lastDir = dir;
this.state.lastDir = pd;
this._applyCamera(); this._applyCamera();
this._placePlayer(`walk-${pd}`);
const p = document.getElementById('map-player');
const bub = document.getElementById('player-bubble');
if (p) {
const cx = viewW / 2 - 16;
const bot = viewH * 0.35;
p.style.left = cx + 'px';
p.style.bottom = bot + 'px';
p.className = `map-player walk-${dir}`;
if (bub) { bub.style.left = (cx - 4) + 'px'; bub.style.bottom = (bot + 66) + 'px'; }
}
this._checkNPCProximity(); this._checkNPCProximity();
this._drawPath();
} }
_applyCamera() { _applyCamera() {
const {viewW, viewH} = this._getViewport(); const {viewW, viewH} = this._getViewport();
const {dx, dy} = this._legVector(); const spread = Math.max(viewW, viewH) * 5;
const prog = this.state.legProgress;
const tx = -(prog * dx);
const ty = -(prog * dy);
const inner = document.getElementById('map-inner'); const inner = document.getElementById('map-inner');
const tx = -(spread + this.state.worldX - viewW / 2);
const ty = -(spread + this.state.worldY - viewH / 2);
if (inner) inner.style.transform = `translate(${tx}px,${ty}px)`; if (inner) inner.style.transform = `translate(${tx}px,${ty}px)`;
this._positionNPCOnScreen(); this._positionNPCOnScreen();
} }
_positionNPCOnScreen() { _positionNPCOnScreen() {
const {viewW, viewH} = this._getViewport(); const {viewW, viewH} = this._getViewport();
const {dx, dy} = this._legVector();
const prog = this.state.legProgress;
const legLen = this.state.legLength;
const npcWrap = document.getElementById('map-npc-wrap'); const npcWrap = document.getElementById('map-npc-wrap');
if (npcWrap) { if (npcWrap) {
const screenX = viewW / 2 + (legLen - prog) * dx - 24; const screenX = viewW / 2 + (this.state.npcWorldX - this.state.worldX) - 24;
const screenY = viewH / 2 + (legLen - prog) * dy - 24; const screenY = viewH / 2 + (this.state.npcWorldY - this.state.worldY) - 24;
npcWrap.style.left = screenX + 'px'; npcWrap.style.left = screenX + 'px';
npcWrap.style.bottom = (viewH - screenY - 48) + 'px'; npcWrap.style.bottom = (viewH - screenY - 48) + 'px';
} }
} }
_placePlayer(cls) {
const {viewW, viewH} = this._getViewport();
const p = document.getElementById('map-player');
const bub = document.getElementById('player-bubble');
if (p) {
const cx = viewW / 2 - 16;
const cy = viewH / 2 - 32;
const bot = viewH - cy - 64;
p.style.left = cx + 'px';
p.style.bottom = bot + 'px';
p.className = 'map-player ' + cls;
if (bub) { bub.style.left = (cx - 4) + 'px'; bub.style.bottom = (bot + 66) + 'px'; }
}
}
_checkNPCProximity() { _checkNPCProximity() {
const {viewW, viewH} = this._getViewport(); const {viewW, viewH} = this._getViewport();
const remaining = this.state.legLength - this.state.legProgress; const dx = this.state.npcWorldX - this.state.worldX;
const near = this.state.legLength > 0 && remaining < 60; const dy = this.state.npcWorldY - this.state.worldY;
const dist = Math.sqrt(dx * dx + dy * dy);
const near = this.state.npcWorldX !== 0 && dist < 60;
const hint = document.getElementById('map-talk-hint'); const hint = document.getElementById('map-talk-hint');
const bub = document.getElementById('npc-bubble'); const bub = document.getElementById('npc-bubble');
@@ -469,12 +448,18 @@ class Game {
if (!arrow) return; if (!arrow) return;
if (nearNPC) { arrow.style.display = 'none'; arrow.style.animation = 'none'; return; } if (nearNPC) { arrow.style.display = 'none'; arrow.style.animation = 'none'; return; }
const {viewW, viewH} = this._getViewport(); const {viewW, viewH} = this._getViewport();
const pd = this.state.pathDir; const dx = this.state.npcWorldX - this.state.worldX;
const dy = this.state.npcWorldY - this.state.worldY;
let pd;
if (Math.abs(dx) >= Math.abs(dy)) {
pd = dx >= 0 ? 'right' : 'left';
} else {
pd = dy >= 0 ? 'down' : 'up';
}
const glyphs = { right:'▶', left:'◀', up:'▲', down:'▼' }; const glyphs = { right:'▶', left:'◀', up:'▲', down:'▼' };
arrow.textContent = glyphs[pd] || '▶'; arrow.textContent = glyphs[pd];
arrow.style.display = 'block'; arrow.style.display = 'block';
arrow.style.animation = 'arrowPulse .7s ease-in-out infinite'; arrow.style.animation = 'arrowPulse .7s ease-in-out infinite';
if (pd === 'right') { if (pd === 'right') {
arrow.style.removeProperty('left'); arrow.style.removeProperty('left');
arrow.style.right = '12px'; arrow.style.right = '12px';
@@ -487,7 +472,7 @@ class Game {
arrow.style.removeProperty('right'); arrow.style.removeProperty('right');
arrow.style.left = (viewW / 2 - 16) + 'px'; arrow.style.left = (viewW / 2 - 16) + 'px';
arrow.style.bottom = (viewH - 48) + 'px'; arrow.style.bottom = (viewH - 48) + 'px';
} else if (pd === 'down') { } else {
arrow.style.removeProperty('right'); arrow.style.removeProperty('right');
arrow.style.left = (viewW / 2 - 16) + 'px'; arrow.style.left = (viewW / 2 - 16) + 'px';
arrow.style.bottom = '12px'; arrow.style.bottom = '12px';
@@ -495,9 +480,10 @@ class Game {
} }
_nearNPC() { _nearNPC() {
if (!this.state.legLength) return false; if (!this.state.npcWorldX && !this.state.npcWorldY) return false;
const remaining = this.state.legLength - this.state.legProgress; const dx = this.state.npcWorldX - this.state.worldX;
return remaining < 60; const dy = this.state.npcWorldY - this.state.worldY;
return Math.sqrt(dx * dx + dy * dy) < 60;
} }
_talkToNPC() { _talkToNPC() {
@@ -521,13 +507,19 @@ class Game {
} }
_placeMapSprites() { _placeMapSprites() {
const {viewW, viewH} = this._getViewport();
const idleFrames = { right:'-32px', down:'-32px', left:'-128px', up:'-224px' }; const idleFrames = { right:'-32px', down:'-32px', left:'-128px', up:'-224px' };
const p = document.getElementById('map-player'); const p = document.getElementById('map-player');
const bub = document.getElementById('player-bubble');
if (p) { if (p) {
const cx = viewW / 2 - 16;
const bot = viewH * 0.35;
p.style.left = cx + 'px';
p.style.bottom = bot + 'px';
p.className = 'map-player idle'; p.className = 'map-player idle';
p.style.backgroundPositionX = idleFrames[this.state.pathDir] || '-32px'; p.style.backgroundPositionX = idleFrames[this.state.pathDir] || '-32px';
if (bub) { bub.style.left = (cx - 4) + 'px'; bub.style.bottom = (bot + 66) + 'px'; }
} }
this._placePlayer('map-player idle');
this._applyCamera(); this._applyCamera();
const hint = document.getElementById('map-talk-hint'); const hint = document.getElementById('map-talk-hint');
if (hint) hint.style.display = 'none'; if (hint) hint.style.display = 'none';
@@ -1017,23 +1009,23 @@ class Game {
if (!container) return; if (!container) return;
container.innerHTML = ''; container.innerHTML = '';
const {viewW, viewH} = this._getViewport(); const {viewW, viewH} = this._getViewport();
const legLen = this.state.legLength || viewW * 3; const spread = Math.max(viewW, viewH) * 5;
const pd = this.state.pathDir;
const isHoriz = pd === 'right' || pd === 'left';
const worldW = isHoriz ? legLen + viewW : viewW * 2;
const worldH = isHoriz ? viewH * 2 : legLen + viewH;
const inner = document.getElementById('map-inner'); const inner = document.getElementById('map-inner');
if (inner) { inner.style.width = worldW + 'px'; inner.style.height = worldH + 'px'; } if (inner) { inner.style.width = spread * 2 + 'px'; inner.style.height = spread * 2 + 'px'; }
const COUNT = Math.max(8, Math.round(legLen / 100)); const cx = spread;
for (let i = 0; i < COUNT; i++) { const cy = spread;
const npcX = cx + this.state.npcWorldX;
const npcY = cy + this.state.npcWorldY;
for (let i = 0; i < 60; i++) {
const span = document.createElement('span'); const span = document.createElement('span');
span.className = 'tree'; span.className = 'tree';
const size = 28 + Math.random() * 16; const size = 28 + Math.random() * 16;
const t = (i + Math.random()) / COUNT; let x, y, tries = 0;
const band = 60 + Math.random() * 80; do {
const side = Math.random() < 0.5 ? 1 : -1; x = cx + (Math.random() - 0.5) * spread * 1.8;
const x = isHoriz ? t * (legLen + viewW * 0.5) : viewW / 2 - 16 + side * band; y = cy + (Math.random() - 0.5) * spread * 1.8;
const y = isHoriz ? viewH / 2 - 32 + side * band : t * (legLen + viewH * 0.5); tries++;
} while (tries < 10 && Math.abs(x - npcX) < 80 && Math.abs(y - npcY) < 80);
span.textContent = '🌳'; span.textContent = '🌳';
span.style.fontSize = size + 'px'; span.style.fontSize = size + 'px';
span.style.left = x + 'px'; span.style.left = x + 'px';
@@ -1045,20 +1037,18 @@ class Game {
} }
_preGenerateNextLeg() { _preGenerateNextLeg() {
const {viewW, viewH} = this._getViewport(); this._nextLegDir = this._pickNextDir(this.state.pathDir);
const nextDir = this._pickNextDir(this.state.pathDir); this._nextLegLen = null;
const isHoriz = nextDir === 'right' || nextDir === 'left'; }
const range = isHoriz ? viewW : viewH;
const nextLen = Math.round(range * 3.0 + Math.random() * range * 0.8); _npcOffsetForDir(dir, viewW, viewH) {
const savedDir = this.state.pathDir; const dist = dir === 'right' || dir === 'left'
const savedLen = this.state.legLength; ? Math.round(viewW * (3.0 + Math.random() * 0.8))
this.state.pathDir = nextDir; : Math.round(viewH * (3.0 + Math.random() * 0.8));
this.state.legLength = nextLen; return {
this._generateTrees(); nx: dir === 'right' ? dist : dir === 'left' ? -dist : 0,
this.state.pathDir = savedDir; ny: dir === 'down' ? dist : dir === 'up' ? -dist : 0,
this.state.legLength = savedLen; };
this._nextLegDir = nextDir;
this._nextLegLen = nextLen;
} }
showMap() { showMap() {
@@ -1070,23 +1060,22 @@ class Game {
if (this.state.currentQ === 0) { if (this.state.currentQ === 0) {
this.state.pathDir = 'right'; this.state.pathDir = 'right';
this.state.legLength = Math.round(viewW * 3.5);
this.state.legProgress = 0;
} else if (this._nextLegDir) { } else if (this._nextLegDir) {
this.state.pathDir = this._nextLegDir; this.state.pathDir = this._nextLegDir;
this.state.legLength = this._nextLegLen;
this.state.legProgress = 0;
this._nextLegDir = null; this._nextLegDir = null;
this._nextLegLen = null; this._nextLegLen = null;
} else { } else {
const dir = this._pickNextDir(this.state.pathDir); this.state.pathDir = this._pickNextDir(this.state.pathDir);
const isH = dir === 'right' || dir === 'left';
this.state.pathDir = dir;
this.state.legLength = Math.round((isH ? viewW : viewH) * 3.0 + Math.random() * (isH ? viewW : viewH) * 0.8);
this.state.legProgress = 0;
} }
this.state.worldX = 0;
this.state.worldY = 0;
this.state.lastDir = this.state.pathDir; this.state.lastDir = this.state.pathDir;
const {nx, ny} = this._npcOffsetForDir(this.state.pathDir, viewW, viewH);
this.state.npcWorldX = nx;
this.state.npcWorldY = ny;
this._generateTrees(); this._generateTrees();
document.getElementById('hud-name').textContent = this.state.playerName||'ASH'; document.getElementById('hud-name').textContent = this.state.playerName||'ASH';
@@ -1098,7 +1087,6 @@ class Game {
this._placeMapSprites(); this._placeMapSprites();
this._updateDirArrow(false); this._updateDirArrow(false);
this._drawPath();
Music.play(); Music.play();
saveGame(this.state); saveGame(this.state);
this.flashSaveDot(); this.flashSaveDot();
@@ -1111,83 +1099,6 @@ class Game {
}); });
} }
_drawPath() {
const canvas = document.getElementById('map-path-canvas');
if (!canvas) return;
const {viewW, viewH} = this._getViewport();
canvas.width = viewW;
canvas.height = viewH;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, viewW, viewH);
const pd = this.state.pathDir;
const prog = this.state.legProgress;
const len = this.state.legLength;
const cx = viewW / 2;
const cy = viewH / 2;
const pathW = 80;
const R = 20;
ctx.save();
const ahead = len - prog;
let x1, y1, x2, y2;
if (pd === 'right') {
x1 = 0; y1 = cy - pathW / 2;
x2 = cx + Math.min(ahead, viewW); y2 = cy + pathW / 2;
} else if (pd === 'left') {
x1 = cx - Math.min(ahead, viewW); y1 = cy - pathW / 2;
x2 = viewW; y2 = cy + pathW / 2;
} else if (pd === 'down') {
x1 = cx - pathW / 2; y1 = 0;
x2 = cx + pathW / 2; y2 = cy + Math.min(ahead, viewH);
} else {
x1 = cx - pathW / 2; y1 = cy - Math.min(ahead, viewH);
x2 = cx + pathW / 2; y2 = viewH;
}
const rr = (x, y, w, h, r) => {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
};
const bx = Math.min(x1, x2), by = Math.min(y1, y2);
const bw = Math.abs(x2 - x1), bh = Math.abs(y2 - y1);
ctx.shadowColor = 'rgba(0,0,0,0.25)';
ctx.shadowBlur = 6;
ctx.fillStyle = '#b89858';
rr(bx, by, bw, bh, R);
ctx.fill();
ctx.shadowBlur = 0;
ctx.strokeStyle = '#2d6e1a';
ctx.lineWidth = 3;
rr(bx, by, bw, bh, R);
ctx.stroke();
const dashes = pd === 'right' || pd === 'left' ? bh * 0.1 : bw * 0.1;
ctx.setLineDash([12, 10]);
ctx.strokeStyle = 'rgba(168,136,72,0.6)';
ctx.lineWidth = 2;
if (pd === 'right' || pd === 'left') {
ctx.beginPath(); ctx.moveTo(bx, cy); ctx.lineTo(bx + bw, cy); ctx.stroke();
} else {
ctx.beginPath(); ctx.moveTo(cx, by); ctx.lineTo(cx, by + bh); ctx.stroke();
}
ctx.setLineDash([]);
ctx.restore();
}
updateHUD() { updateHUD() {
const tot=this.state.questions.length||100, done=this.state.currentQ, pct=(done/tot)*100; const tot=this.state.questions.length||100, done=this.state.currentQ, pct=(done/tot)*100;
index.html
-1
View File
@@ -99,7 +99,6 @@
</div> </div>
</div> </div>
<div class="overworld-bg map-world" id="map-world"> <div class="overworld-bg map-world" id="map-world">
<canvas id="map-path-canvas" style="position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;"></canvas>
<div class="map-inner" id="map-inner"> <div class="map-inner" id="map-inner">
<div class="map-trees" id="map-trees"></div> <div class="map-trees" id="map-trees"></div>
</div> </div>