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

Fix player hat facing direction on walk and preserve facing after key release

Browse Source
This commit is contained in:
Justin Oros
2026-05-14 09:58:00 -07:00
parent deb0dcba92
commit d49ead84c8
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game.js
+8 -3
View File
@@ -60,9 +60,9 @@ class Game {
score:0, streak:0, maxStreak:0, correct:0, wrong:0, score:0, streak:0, maxStreak:0, correct:0, wrong:0,
answering:false, introStep:0, twTimer:null, answering:false, introStep:0, twTimer:null,
/* map movement */ /* map movement */
playerX:15, playerY:42, /* % of map-world */ playerX:15, playerY:42,
npcX:72, npcY:38, npcX:72, npcY:38,
moving:false, walkDir:'', moving:false, walkDir:'', lastDir:'right',
/* battle cursor */ /* battle cursor */
cursor:0, cursor:0,
}; };
@@ -164,7 +164,11 @@ class Game {
this._walkLoop = null; this._walkLoop = null;
if (this.state.screen === 'map') { if (this.state.screen === 'map') {
const p = document.getElementById('map-player'); const p = document.getElementById('map-player');
if (p) { p.className = 'map-player idle'; } if (p) {
p.className = 'map-player idle';
/* keep facing the last direction moved */
p.style.transform = this.state.lastDir === 'right' ? 'scaleX(-1)' : 'scaleX(1)';
}
} }
} }
@@ -183,6 +187,7 @@ class Game {
this.state.playerX = nx; this.state.playerX = nx;
this.state.playerY = ny; this.state.playerY = ny;
this.state.lastDir = dir;
const p = document.getElementById('map-player'); const p = document.getElementById('map-player');
if (p) { if (p) {
style.css
+2 -2
View File
@@ -90,8 +90,8 @@ html, body {
@keyframes wrongShake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)} } @keyframes wrongShake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)} }
@keyframes npcFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} } @keyframes npcFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes treeSway { 0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)} } @keyframes treeSway { 0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)} }
@keyframes walkLeft { 0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-4px)} } @keyframes walkLeft { 0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(1) translateY(-4px)} }
@keyframes walkRight { 0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(1) translateY(-4px)} } @keyframes walkRight { 0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-4px)} }
@keyframes walkUp { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} } @keyframes walkUp { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }
@keyframes walkDown { 0%,100%{transform:translateY(0)}50%{transform:translateY(4px)} } @keyframes walkDown { 0%,100%{transform:translateY(0)}50%{transform:translateY(4px)} }
@keyframes dpadPress { 0%{transform:scale(1)}50%{transform:scale(.88)}100%{transform:scale(1)} } @keyframes dpadPress { 0%{transform:scale(1)}50%{transform:scale(.88)}100%{transform:scale(1)} }