diff --git a/index.html b/index.html index 1b8064a..8c23edd 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,19 @@ - + + + + Whale Hunting - A Point & Click Adventure diff --git a/src/main.js b/src/main.js index 95acc92..3733e60 100644 --- a/src/main.js +++ b/src/main.js @@ -21,7 +21,19 @@ const config = { }, scale: { mode: Phaser.Scale.FIT, - autoCenter: Phaser.Scale.CENTER_BOTH + autoCenter: Phaser.Scale.CENTER_BOTH, + width: 800, + height: 600, + min: { + width: 320, + height: 240 + }, + max: { + width: 1920, + height: 1080 + }, + fullscreenTarget: 'game-container', + expandParent: false } }; diff --git a/src/scenes/HuntingScene.js b/src/scenes/HuntingScene.js index 409f470..d3b7616 100644 --- a/src/scenes/HuntingScene.js +++ b/src/scenes/HuntingScene.js @@ -19,6 +19,12 @@ export default class HuntingScene extends Phaser.Scene { } create() { + // Detect mobile device + this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + + // Default to touch on mobile, keyboard on desktop + this.useKeyboard = !this.isMobile; + // Ocean background this.add.rectangle(400, 300, 800, 600, 0x1e5a8e); this.createOceanWaves(); @@ -38,7 +44,8 @@ export default class HuntingScene extends Phaser.Scene { this.setupOceanMovement(); // Message display - this.showMessage('Hunt whales! Click or press SPACE to shoot harpoon.'); + const shootMessage = this.isMobile ? 'Hunt whales! Tap to shoot harpoon.' : 'Hunt whales! Click or press SPACE to shoot harpoon.'; + this.showMessage(shootMessage); } update() { @@ -89,19 +96,23 @@ export default class HuntingScene extends Phaser.Scene { this.shootHarpoon(); }); - // Tab to toggle control mode - this.tabKey.on('down', () => { - this.useKeyboard = !this.useKeyboard; - this.controlModeText.setText(`Controls: ${this.useKeyboard ? 'KEYBOARD' : 'MOUSE'} (TAB to switch)`); - if (this.useKeyboard) { - this.input.setDefaultCursor('default'); - } else { - this.input.setDefaultCursor('none'); - } - }); + // Tab to toggle control mode (desktop only) + if (!this.isMobile) { + this.tabKey.on('down', () => { + this.useKeyboard = !this.useKeyboard; + this.controlModeText.setText(`Controls: ${this.useKeyboard ? 'KEYBOARD' : 'MOUSE'} (TAB to switch)`); + if (this.useKeyboard) { + this.input.setDefaultCursor('default'); + } else { + this.input.setDefaultCursor('none'); + } + }); + } - // Start with mouse control (hide cursor) - this.input.setDefaultCursor('none'); + // Start with mouse control (hide cursor on desktop only) + if (!this.isMobile) { + this.input.setDefaultCursor(this.useKeyboard ? 'default' : 'none'); + } } updateCrosshairMouse() { @@ -190,12 +201,14 @@ export default class HuntingScene extends Phaser.Scene { }); this.statsText.setScrollFactor(0); - // Control mode indicator (fixed to screen) - this.controlModeText = this.add.text(400, 15, 'Controls: MOUSE (TAB to switch)', { - fontSize: '16px', - fill: '#ffff00' - }).setOrigin(0.5, 0); - this.controlModeText.setScrollFactor(0); + // Control mode indicator (fixed to screen, desktop only) + if (!this.isMobile) { + this.controlModeText = this.add.text(400, 15, 'Controls: MOUSE (TAB to switch)', { + fontSize: '16px', + fill: '#ffff00' + }).setOrigin(0.5, 0); + this.controlModeText.setScrollFactor(0); + } // Return button (fixed to screen) const returnBtn = this.add.rectangle(750, 30, 80, 35, 0x8B0000); diff --git a/src/scenes/IntroScene.js b/src/scenes/IntroScene.js index 6236b8e..ce3c66f 100644 --- a/src/scenes/IntroScene.js +++ b/src/scenes/IntroScene.js @@ -48,7 +48,7 @@ export default class IntroScene extends Phaser.Scene { fontStyle: 'bold' }).setOrigin(0.5); - // Button hover effects + // Button hover effects (desktop) buttonBg.on('pointerover', () => { buttonBg.setFillStyle(0x4a90c4); }); @@ -57,8 +57,17 @@ export default class IntroScene extends Phaser.Scene { buttonBg.setFillStyle(0x2d5f8e); }); - // Button click handler + // Touch feedback (works on both touch and mouse) buttonBg.on('pointerdown', () => { + buttonBg.setFillStyle(0x4a90c4); + buttonBg.setScale(0.95); + buttonText.setScale(0.95); + }); + + buttonBg.on('pointerup', () => { + buttonBg.setFillStyle(0x2d5f8e); + buttonBg.setScale(1.0); + buttonText.setScale(1.0); this.startGame(); }); diff --git a/src/scenes/MapScene.js b/src/scenes/MapScene.js index c04f9e3..5b6e4c6 100644 --- a/src/scenes/MapScene.js +++ b/src/scenes/MapScene.js @@ -56,12 +56,20 @@ export default class MapScene extends Phaser.Scene { closeButton.setInteractive({ useHandCursor: true }); closeButton.setStrokeStyle(2, 0xffffff); - this.add.text(750, 50, 'CLOSE', { + const closeText = this.add.text(750, 50, 'CLOSE', { fontSize: '16px', fill: '#fff' }).setOrigin(0.5); + // Touch feedback (works on both touch and mouse) closeButton.on('pointerdown', () => { + closeButton.setScale(0.95); + closeText.setScale(0.95); + }); + + closeButton.on('pointerup', () => { + closeButton.setScale(1.0); + closeText.setScale(1.0); this.returnToShip(); }); } @@ -100,7 +108,7 @@ export default class MapScene extends Phaser.Scene { align: 'center' }).setOrigin(0.5); - // Hover effect + // Hover effect (desktop) marker.on('pointerover', () => { marker.setScale(1.1); this.showMessage(description); @@ -110,7 +118,17 @@ export default class MapScene extends Phaser.Scene { marker.setScale(1); }); - marker.on('pointerdown', onClick); + // Touch feedback (works on both touch and mouse) + marker.on('pointerdown', () => { + marker.setScale(0.9); + text.setScale(0.9); + }); + + marker.on('pointerup', () => { + marker.setScale(1); + text.setScale(1); + onClick(); + }); } createInventoryDisplay() { diff --git a/src/scenes/TransitionScene.js b/src/scenes/TransitionScene.js index 0217996..5737a59 100644 --- a/src/scenes/TransitionScene.js +++ b/src/scenes/TransitionScene.js @@ -70,7 +70,7 @@ export default class TransitionScene extends Phaser.Scene { fontStyle: 'bold' }).setOrigin(0.5); - // Hover effect + // Hover effect (desktop) continueBtn.on('pointerover', () => { continueBtn.setFillStyle(0x4a90c4); }); @@ -79,7 +79,18 @@ export default class TransitionScene extends Phaser.Scene { continueBtn.setFillStyle(0x2d5f8e); }); + // Touch feedback (works on both touch and mouse) continueBtn.on('pointerdown', () => { + continueBtn.setFillStyle(0x4a90c4); + continueBtn.setScale(0.95); + btnText.setScale(0.95); + }); + + continueBtn.on('pointerup', () => { + continueBtn.setFillStyle(0x2d5f8e); + continueBtn.setScale(1.0); + btnText.setScale(1.0); + // Deduct fuel (if any cost) if (this.fuelCost > 0) { this.inventory.fuel -= this.fuelCost;