143 lines
3.9 KiB
JavaScript
143 lines
3.9 KiB
JavaScript
import { fontSize } from '../utils/responsive.js';
|
|
import { createFullscreenButton } from '../utils/fullscreen.js';
|
|
|
|
export default class IntroScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'IntroScene' });
|
|
}
|
|
|
|
init(data) {
|
|
// No data needed - this is the entry point
|
|
}
|
|
|
|
create() {
|
|
// Ocean blue background
|
|
this.add.rectangle(400, 300, 800, 600, 0x1e5a8e);
|
|
|
|
// Draw decorative waves
|
|
this.drawWaves();
|
|
|
|
// Ship silhouette (decorative element)
|
|
this.drawShip();
|
|
|
|
// Game title
|
|
const title = this.add.text(400, 150, 'WHALE HUNTING', {
|
|
fontSize: fontSize(56),
|
|
fill: '#ffffff',
|
|
fontStyle: 'bold'
|
|
}).setOrigin(0.5);
|
|
title.setStroke('#000000', 3);
|
|
|
|
// Subtitle
|
|
this.add.text(400, 210, 'A Whaling Adventure on the High Seas', {
|
|
fontSize: fontSize(22),
|
|
fill: '#cccccc',
|
|
fontStyle: 'italic'
|
|
}).setOrigin(0.5);
|
|
|
|
// Decorative separator line
|
|
const line = this.add.graphics();
|
|
line.lineStyle(3, 0xcccccc, 0.6);
|
|
line.lineBetween(200, 240, 600, 240);
|
|
|
|
// Start button
|
|
const buttonBg = this.add.rectangle(400, 400, 200, 60, 0x2d5f8e);
|
|
buttonBg.setStrokeStyle(3, 0xffffff);
|
|
buttonBg.setInteractive({ useHandCursor: true });
|
|
|
|
const buttonText = this.add.text(400, 400, 'SET SAIL', {
|
|
fontSize: fontSize(28),
|
|
fill: '#ffffff',
|
|
fontStyle: 'bold'
|
|
}).setOrigin(0.5);
|
|
|
|
// Button hover effects (desktop)
|
|
buttonBg.on('pointerover', () => {
|
|
buttonBg.setFillStyle(0x4a90c4);
|
|
});
|
|
|
|
buttonBg.on('pointerout', () => {
|
|
buttonBg.setFillStyle(0x2d5f8e);
|
|
});
|
|
|
|
// 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();
|
|
});
|
|
|
|
// Instructions text
|
|
this.add.text(400, 530, 'Click to cast off and seek yer fortune!', {
|
|
fontSize: fontSize(16),
|
|
fill: '#ffff99'
|
|
}).setOrigin(0.5);
|
|
|
|
// Fullscreen button
|
|
createFullscreenButton(this);
|
|
|
|
// Version display
|
|
this.add.text(790, 590, 'v1.2.0', {
|
|
fontSize: fontSize(12),
|
|
fill: '#ffffff',
|
|
alpha: 0.5
|
|
}).setOrigin(1, 1);
|
|
}
|
|
|
|
drawWaves() {
|
|
const waves = this.add.graphics();
|
|
waves.lineStyle(2, 0x4a90c4, 0.5);
|
|
|
|
// Draw 8 wavy horizontal lines
|
|
for (let i = 0; i < 8; i++) {
|
|
const y = 80 + (i * 60);
|
|
waves.beginPath();
|
|
waves.moveTo(0, y);
|
|
|
|
// Create wave pattern
|
|
for (let x = 0; x <= 800; x += 20) {
|
|
const waveY = y + Math.sin((x + i * 50) * 0.02) * 8;
|
|
waves.lineTo(x, waveY);
|
|
}
|
|
|
|
waves.strokePath();
|
|
}
|
|
}
|
|
|
|
drawShip() {
|
|
const ship = this.add.graphics();
|
|
|
|
// Hull
|
|
ship.fillStyle(0x654321);
|
|
ship.fillRect(655, 427, 90, 45);
|
|
|
|
// Sail (triangle)
|
|
ship.fillStyle(0x8B4513);
|
|
ship.beginPath();
|
|
ship.moveTo(700, 380); // Top of sail
|
|
ship.lineTo(680, 430); // Bottom left
|
|
ship.lineTo(720, 430); // Bottom right
|
|
ship.closePath();
|
|
ship.fillPath();
|
|
}
|
|
|
|
startGame() {
|
|
// Initialize inventory with starting values
|
|
const inventory = {
|
|
whaleOil: 0,
|
|
fuel: 100,
|
|
penguins: 0
|
|
};
|
|
|
|
// Transition to ship deck
|
|
this.scene.start('ShipDeckScene', { inventory: inventory });
|
|
}
|
|
}
|