broadfield-dev/stack-overflow-game

1import Phaser from 'phaser';2import { MAX_LEVEL, GAME_WIDTH, GAME_HEIGHT, BORDER_OFFSET } from '../constants.js';3 4export default class PreloadScene extends Phaser.Scene {5  constructor() {6    super({ key: 'PreloadScene' });7  }8 9  preload() {10    // Create loading screen11    const loadingText = this.add.text(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2 - 20, 'LOADING...', {12      fontSize: '16px',13      color: '#ffffff',14      fontFamily: 'monospace'15    }).setOrigin(0.5);16 17    const progressText = this.add.text(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2 + 10, '0%', {18      fontSize: '14px',19      color: '#ffffff',20      fontFamily: 'monospace'21    }).setOrigin(0.5);22 23    // Progress bar24    const progressBar = this.add.graphics();25    const progressBox = this.add.graphics();26    progressBox.fillStyle(0x222222, 0.8);27    progressBox.fillRect(GAME_WIDTH / 2 + BORDER_OFFSET - 80, GAME_HEIGHT / 2 + 30, 160, 20);28 29    // Update progress30    this.load.on('progress', (value) => {31      progressText.setText(Math.floor(value * 100) + '%');32      progressBar.clear();33      progressBar.fillStyle(0xffffff, 1);34      progressBar.fillRect(GAME_WIDTH / 2 + BORDER_OFFSET - 78, GAME_HEIGHT / 2 + 32, 156 * value, 16);35    });36 37    this.load.on('complete', () => {38      progressBar.destroy();39      progressBox.destroy();40      loadingText.destroy();41      progressText.destroy();42    });43 44    // Load title screen45    this.load.image('title', 'assets/title.png');46 47    // Load game over screen48    this.load.image('game-over', 'assets/game-over.png');49 50    // Load block sprite sheet (grayscale with depth)51    this.load.image('blocks-spritesheet', 'assets/blocks-sprite.png');52 53    // Load crush animation sprite (40x8px = 5 frames of 8x8px)54    this.load.image('crush-spritesheet', 'assets/crush.png');55 56    // Load bitmap font (Thick 8x8 from frostyfreeze)57    this.load.bitmapFont('pixel-font', 'assets/fonts/thick_8x8.png', 'assets/fonts/thick_8x8.xml');58 59    // Load backdrops for all levels60    for (let i = 1; i <= MAX_LEVEL; i++) {61      this.load.image(`backdrop-${i}`, `assets/backdrops/level-${i}/backdrop.png`);62    }63 64    // Load music for all levels65    for (let i = 1; i <= MAX_LEVEL; i++) {66      this.load.audio(`music-${i}`, `assets/music/level-${i}/track.mp3`);67    }68  }69 70  create() {71    // Title image fills entire screen (256x224), offset by border72    const titleImage = this.add.image(BORDER_OFFSET, 0, 'title');73    titleImage.setOrigin(0, 0);74    titleImage.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);75 76    // "Press space to start" text - positioned in bottom third77    const startText = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT * 0.7 + 20, 'pixel-font', 'PRESS SPACE TO START', 10).setOrigin(0.5);78    startText.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);79    startText.setDepth(10);80 81    // Demo mode timer - start demo after 10 seconds of inactivity82    this.demoTimer = this.time.delayedCall(10000, () => {83      this.startDemoMode();84    });85 86    // Blinking effect for start text87    this.tweens.add({88      targets: startText,89      alpha: 0.3,90      duration: 600,91      yoyo: true,92      repeat: -193    });94 95    // Credits text - positioned below start text in bottom third96    const creditsText = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT * 0.8 + 20, 'pixel-font', 'BY MARCO VAN HYLCKAMA VLIEG', 10).setOrigin(0.5);97    creditsText.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);98    creditsText.setDepth(10);99 100    // Wait for space key to start101    this.input.keyboard.once('keydown-SPACE', () => {102      this.scene.start('ModeSelectScene');103    });104  }105}106 107