brianfertig/fertig-classic-games
brianfertig
/
fertig-classic-games
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: correct tile hitbox alignment in ForbiddenIslandGame 

Switch tile interaction from a manual container hit area to an invisible
centered child rectangle. This resolves a hitbox offset issue where the
previous implementation caused the hit area to be misaligned up and left.

Update game-icons assets.
This commit is contained in:
Brian Fertig 2026-06-01 21:33:57 -06:00
parent 7eaf0183e2
commit 4c6fd9166c
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/src/games/forbiddenisland/ForbiddenIslandGame.js
View File

@ -120,14 +120,16 @@ export default class ForbiddenIslandGame extends Phaser.Scene {
gem.fillStyle(TREASURES[t.treasure].color, 1); gem.fillCircle(gx, gy, 11); gem.fillStyle(TREASURES[t.treasure].color, 1); gem.fillCircle(gx, gy, 11);
gem.lineStyle(2, 0xffffff, 0.85); gem.strokeCircle(gx, gy, 11); gem.lineStyle(2, 0xffffff, 0.85); gem.strokeCircle(gx, gy, 11);
} }
// Input goes on an invisible, centered Rectangle child rather than a manual
// hitArea on the Container — the latter mis-aligns the hitbox (offset up/left).
const hit = this.add.rectangle(0, 0, TILE, TILE, 0x000000, 0).setInteractive({ useHandCursor: true });
const layers = img ? [img, bg, label] : [bg, label]; const layers = img ? [img, bg, label] : [bg, label];
container.add(layers); if (gem) container.add(gem); container.add(layers); if (gem) container.add(gem);
container.setSize(TILE, TILE).setInteractive( container.add(hit);
new Phaser.Geom.Rectangle(-TILE / 2, -TILE / 2, TILE, TILE), Phaser.Geom.Rectangle.Contains); hit.on('pointerup', () => this.onTileClick(t.id));
container.on('pointerup', () => this.onTileClick(t.id)); hit.on('pointerover', () => { if (!this.busy) container.setScale(1.03); });
container.on('pointerover', () => { if (!this.busy) container.setScale(1.03); }); hit.on('pointerout', () => container.setScale(1));
container.on('pointerout', () => container.setScale(1)); this.tileViews[t.id] = { container, img, bg, label, gem, row, hit };
this.tileViews[t.id] = { container, img, bg, label, gem, row };
} }
} }