src/scenes/BootScene.js - master - runemal/Bomberman_Web

src/scenes/BootScene.js
527 строк17 KB
runemal
Create: GameScene.js, LoginScene.js, GameOverScene.js, StatsScene.js, MenuScene.js, BootScene.js, AboutScene.js, Explosion.js, Player.js, PowerUp.js, Enemy.js, Bomb.js, config.js, api.js, MapGenerator.js, main.js, db.js, docker-compose.yml, Dockerfile, index.html, package.json, package-lock.json, presentation.html, README.md, server.js, vite.config.js, .dockerignore, .gitignore
07 июл 2026, 19:13
Верифицирован
07 июл 2026, 19:139cfa4c9
import Phaser from 'phaser';
import { TILE_SIZE, PLAYER_COLORS, ENEMY_TYPES } from '../config.js';

export default class BootScene extends Phaser.Scene {
  constructor() {
    super('BootScene');
  }

  create() {
    this._generateSprites();
    this.scene.start('LoginScene');
  }

  _generateSprites() {
    const s = TILE_SIZE;
    const cx = s / 2;
    const cy = s / 2;

    // ── Floor ──
    const floorG = this.make.graphics({ add: false });
    floorG.fillStyle(0x2d5a27);
    floorG.fillRect(0, 0, s, s);
    floorG.lineStyle(1, 0x275222, 0.3);
    floorG.strokeRect(0, 0, s, s);
    // subtle grass texture
    floorG.fillStyle(0x336b2b, 0.3);
    for (let i = 0; i < 6; i++) {
      const gx = 8 + (i * 7) % (s - 12);
      const gy = 6 + (i * 11) % (s - 12);
      floorG.fillRect(gx, gy, 2, 4);
    }
    floorG.generateTexture('floor', s, s);
    floorG.destroy();

    // ── Wall (indestructible stone) ──
    const wallG = this.make.graphics({ add: false });
    wallG.fillStyle(0x555566);
    wallG.fillRect(0, 0, s, s);
    // Brick pattern
    wallG.fillStyle(0x666677);
    wallG.fillRect(2, 2, s / 2 - 3, 12);
    wallG.fillRect(s / 2 + 1, 2, s / 2 - 3, 12);
    wallG.fillRect(2, 16, s / 2 - 3, 12);
    wallG.fillRect(s / 2 + 1, 16, s / 2 - 3, 12);
    wallG.fillStyle(0x444455);
    wallG.fillRect(2, 30, s - 4, 14);
    wallG.lineStyle(2, 0x333344);
    wallG.strokeRect(0, 0, s, s);
    wallG.generateTexture('wall', s, s);
    wallG.destroy();

    // ── Block (destructible wood) ──
    const blockG = this.make.graphics({ add: false });
    blockG.fillStyle(0x996633);
    blockG.fillRect(0, 0, s, s);
    // Wood grain
    blockG.fillStyle(0xaa7744);
    blockG.fillRect(2, 2, s - 4, 8);
    blockG.fillRect(2, 14, s - 4, 8);
    blockG.fillRect(2, 26, s - 4, 8);
    blockG.fillRect(2, 38, s - 4, 6);
    // Knot
    blockG.fillStyle(0x885522);
    blockG.fillCircle(s / 2, s / 2, 4);
    blockG.lineStyle(2, 0x664422);
    blockG.strokeRect(0, 0, s, s);
    blockG.generateTexture('block', s, s);
    blockG.destroy();

    // ── Players (5 distinct styles) ──
    this._drawPlayer(0, 0x00aaff, 'helmet');   // Blue — bomber jacket + helmet
    this._drawPlayer(1, 0xff4444, 'cap');      // Red — hoodie + cap
    this._drawPlayer(2, 0x44cc44, 'visor');    // Green — vest + visor
    this._drawPlayer(3, 0xffaa00, 'crown');    // Orange — robe + crown
    this._drawPlayer(4, 0xaa44ff, 'armor');    // Purple — armor + shield

    // ── Enemies (6 distinct shapes) ──
    Object.entries(ENEMY_TYPES).forEach(([key, cfg]) => {
      this._drawEnemy(cfg);
    });

    // ── Bomb ──
    const bombG = this.make.graphics({ add: false });
    // Shadow
    bombG.fillStyle(0x111111, 0.3);
    bombG.fillCircle(cx + 2, cy + 4, s / 2 - 6);
    // Body
    bombG.fillStyle(0x222222);
    bombG.fillCircle(cx, cy + 2, s / 2 - 6);
    // Highlight
    bombG.fillStyle(0x444444);
    bombG.fillCircle(cx - 4, cy - 4, 4);
    // Fuse
    bombG.fillStyle(0x886644);
    bombG.fillRect(cx - 2, 6, 4, 10);
    // Spark
    bombG.fillStyle(0xff6600);
    bombG.fillCircle(cx, 6, 4);
    bombG.fillStyle(0xffcc00);
    bombG.fillCircle(cx, 5, 2);
    bombG.generateTexture('bomb', s, s);
    bombG.destroy();

    // ── Explosions ──
    this._drawExplosion(s, cx, cy);

    // ── Power-ups ──
    this._drawPowerUps(s, cx, cy);

    // ── Door (closed) ──
    const doorClosed = this.make.graphics({ add: false });
    doorClosed.fillStyle(0x553311);
    doorClosed.fillRoundedRect(8, 4, s - 16, s - 8, 4);
    doorClosed.fillStyle(0x774422);
    doorClosed.fillRoundedRect(10, 6, s - 20, s - 12, 3);
    doorClosed.fillStyle(0x332200);
    doorClosed.fillRect(cx - 1, 6, 2, s - 12);
    doorClosed.fillRect(10, cy - 1, s - 20, 2);
    // Handle
    doorClosed.fillStyle(0xffcc00);
    doorClosed.fillCircle(cx + 8, cy, 3);
    // Lock icon
    doorClosed.fillStyle(0xff4444);
    doorClosed.fillRect(cx - 4, cy - 10, 8, 8);
    doorClosed.fillStyle(0x222222);
    doorClosed.fillCircle(cx, cy - 6, 2);
    doorClosed.generateTexture('door-closed', s, s);
    doorClosed.destroy();

    // ── Door (open) ──
    const doorOpen = this.make.graphics({ add: false });
    doorOpen.fillStyle(0x553311);
    doorOpen.fillRoundedRect(8, 4, s - 16, s - 8, 4);
    doorOpen.fillStyle(0x224400);
    doorOpen.fillRoundedRect(12, 8, s - 24, s - 16, 3);
    // Glow
    doorOpen.fillStyle(0x44ff44, 0.3);
    doorOpen.fillCircle(cx, cy, 14);
    // Arrow in
    doorOpen.fillStyle(0x44ff44);
    doorOpen.fillTriangle(cx, cy - 8, cx - 6, cy, cx + 6, cy);
    doorOpen.fillRect(cx - 2, cy, 4, 8);
    doorOpen.generateTexture('door-open', s, s);
    doorOpen.destroy();
  }

  // ── Player sprite generator ──
  _drawPlayer(index, color, style) {
    const s = TILE_SIZE;
    const g = this.make.graphics({ add: false });
    const cx = s / 2;
    const skinColor = 0xffddbb;

    // Head (common)
    g.fillStyle(skinColor);
    g.fillCircle(cx, 12, 8);

    // Eyes (common)
    g.fillStyle(0xffffff);
    g.fillCircle(cx - 3, 11, 3);
    g.fillCircle(cx + 3, 11, 3);
    g.fillStyle(0x222222);
    g.fillCircle(cx - 2, 11, 1.5);
    g.fillCircle(cx + 4, 11, 1.5);

    // Body style
    switch (style) {
      case 'helmet': // Blue — bomber jacket
        g.fillStyle(color);
        g.fillRoundedRect(10, 18, s - 20, 14, 3);
        g.fillStyle(0x333333);
        g.fillRect(cx - 1, 18, 2, 14); // zipper
        g.fillStyle(color);
        g.fillRoundedRect(10, 4, s - 20, 10, 4); // helmet
        g.fillStyle(0xffffff, 0.3);
        g.fillRect(14, 6, s - 28, 2);
        // Arms
        g.fillStyle(skinColor);
        g.fillRect(6, 20, 4, 8);
        g.fillRect(s - 10, 20, 4, 8);
        // Legs
        g.fillStyle(0x333355);
        g.fillRect(12, 32, 6, 10);
        g.fillRect(s - 18, 32, 6, 10);
        // Boots
        g.fillStyle(0x222222);
        g.fillRect(11, 38, 7, 4);
        g.fillRect(s - 18, 38, 7, 4);
        break;
      case 'cap': // Red — cap + hoodie
        g.fillStyle(color);
        g.fillRoundedRect(10, 18, s - 20, 14, 3);
        g.fillStyle(color);
        g.fillRoundedRect(8, 2, s - 18, 10, 3);
        g.fillRect(6, 10, 14, 3); // visor
        g.fillStyle(skinColor);
        g.fillRect(6, 20, 4, 8);
        g.fillRect(s - 10, 20, 4, 8);
        g.fillStyle(0x444444);
        g.fillRect(12, 32, 6, 10);
        g.fillRect(s - 18, 32, 6, 10);
        g.fillStyle(0x222222);
        g.fillRect(11, 38, 7, 4);
        g.fillRect(s - 18, 38, 7, 4);
        break;
      case 'visor': // Green — visor + vest
        g.fillStyle(color);
        g.fillRoundedRect(10, 18, s - 20, 14, 3);
        g.fillStyle(0x222222);
        g.fillRoundedRect(10, 6, s - 20, 8, 3);
        g.fillStyle(0x88ccff, 0.6);
        g.fillRoundedRect(12, 8, s - 24, 4, 2);
        g.fillStyle(skinColor);
        g.fillRect(6, 20, 4, 8);
        g.fillRect(s - 10, 20, 4, 8);
        g.fillStyle(0x555555);
        g.fillRect(12, 32, 6, 10);
        g.fillRect(s - 18, 32, 6, 10);
        g.fillStyle(0x222222);
        g.fillRect(11, 38, 7, 4);
        g.fillRect(s - 18, 38, 7, 4);
        break;
      case 'crown': // Orange — crown + robe
        g.fillStyle(color);
        g.fillRoundedRect(8, 18, s - 16, 16, 3);
        g.fillStyle(0xffcc00);
        g.fillRect(12, 2, s - 24, 6);
        g.fillTriangle(14, 2, 18, 0, 22, 2);
        g.fillTriangle(cx - 2, 2, cx, 0, cx + 2, 2);
        g.fillTriangle(s - 22, 2, s - 18, 0, s - 14, 2);
        g.fillStyle(skinColor);
        g.fillRect(6, 22, 4, 8);
        g.fillRect(s - 10, 22, 4, 8);
        g.fillStyle(0x886633);
        g.fillRect(12, 34, 6, 8);
        g.fillRect(s - 18, 34, 6, 8);
        g.fillStyle(0x664422);
        g.fillRect(11, 38, 7, 4);
        g.fillRect(s - 18, 38, 7, 4);
        break;
      case 'armor': // Purple — armor + shield
        g.fillStyle(0x666688);
        g.fillRoundedRect(8, 18, s - 16, 14, 3);
        g.fillStyle(color);
        g.fillRoundedRect(10, 19, s - 20, 6, 2);
        g.fillStyle(0x444466);
        g.fillRect(cx - 1, 18, 2, 14);
        g.fillStyle(skinColor);
        g.fillRect(6, 20, 4, 8);
        g.fillRect(s - 10, 20, 4, 8);
        g.fillStyle(0x666688);
        g.fillRect(12, 32, 6, 10);
        g.fillRect(s - 18, 32, 6, 10);
        g.fillStyle(0x444466);
        g.fillRect(11, 38, 7, 4);
        g.fillRect(s - 18, 38, 7, 4);
        break;
    }

    g.generateTexture(`player${index}`, s, s);
    g.destroy();
  }

  // ── Enemy sprite generator ──
  _drawEnemy(cfg) {
    const s = TILE_SIZE;
    const g = this.make.graphics({ add: false });
    const cx = s / 2;
    const cy = s / 2;
    const color = cfg.color;

    if (cfg.canPassWalls) {
      // Ghost — translucent wavy body
      g.fillStyle(color, 0.5);
      g.fillCircle(cx, cy - 4, 12);
      g.fillRect(8, cy - 4, s - 16, 14);
      // Wavy bottom
      g.fillCircle(12, s - 10, 5);
      g.fillCircle(cx - 4, s - 8, 5);
      g.fillCircle(cx + 4, s - 8, 5);
      g.fillCircle(s - 12, s - 10, 5);
    } else if (cfg.chasesPlayer && cfg.speed > 100) {
      // Hunter — spiky, aggressive
      g.fillStyle(color);
      g.fillCircle(cx, cy, 12);
      // Spikes
      g.fillTriangle(cx, 2, cx - 5, 10, cx + 5, 10);
      g.fillTriangle(s - 6, cy, s - 14, cy - 5, s - 14, cy + 5);
      g.fillTriangle(6, cy, 14, cy - 5, 14, cy + 5);
      g.fillTriangle(cx, s - 6, cx - 5, s - 14, cx + 5, s - 14);
    } else if (cfg.chasesPlayer) {
      // Smart — square body with antenna
      g.fillStyle(color);
      g.fillRoundedRect(8, 10, s - 16, s - 18, 4);
      // Antenna
      g.fillRect(cx - 2, 2, 4, 10);
      g.fillStyle(0xff4444);
      g.fillCircle(cx, 2, 3);
    } else if (cfg.runsFromBombs) {
      // Coward — round, teardrop eyes
      g.fillStyle(color);
      g.fillCircle(cx, cy + 2, 14);
      // Sweat drop
      g.fillStyle(0x88ddff);
      g.fillTriangle(s - 10, 8, s - 12, 14, s - 8, 14);
    } else if (cfg.speed > 100) {
      // Fast — elongated, streamlined
      g.fillStyle(color);
      g.fillTriangle(s - 4, cx, 6, 8, 6, s - 8);
      g.fillRect(6, 12, 8, s - 24);
    } else {
      // Normal — round blob with horns
      g.fillStyle(color);
      g.fillCircle(cx, cy, 13);
      // Horns
      g.fillStyle(Phaser.Display.Color.IntegerToColor(color).brighten(20).color);
      g.fillTriangle(10, 8, 14, 2, 18, 10);
      g.fillTriangle(s - 18, 8, s - 14, 2, s - 10, 10);
    }

    // Eyes (all types)
    g.fillStyle(0xffffff);
    g.fillCircle(cx - 6, cy - 2, 4);
    g.fillCircle(cx + 6, cy - 2, 4);
    g.fillStyle(0x111111);
    g.fillCircle(cx - 5, cy - 1, 2);
    g.fillCircle(cx + 7, cy - 1, 2);

    // Mouth
    g.lineStyle(1, 0x111111);
    if (cfg.chasesPlayer) {
      // Angry mouth
      g.beginPath();
      g.moveTo(cx - 5, cy + 6);
      g.lineTo(cx, cy + 4);
      g.lineTo(cx + 5, cy + 6);
      g.strokePath();
    } else if (cfg.runsFromBombs) {
      // Worried mouth
      g.fillStyle(0x111111);
      g.fillCircle(cx, cy + 8, 3);
    } else {
      // Normal mouth
      g.beginPath();
      g.arc(cx, cy + 4, 5, 0, Math.PI);
      g.strokePath();
    }

    g.generateTexture(`enemy-${cfg.label}`, s, s);
    g.destroy();
  }

  // ── Explosion sprites ──
  _drawExplosion(s, cx, cy) {
    // Center
    const expG = this.make.graphics({ add: false });
    expG.fillStyle(0xff4400);
    expG.fillCircle(cx, cy, s / 2 - 2);
    expG.fillStyle(0xff8800);
    expG.fillCircle(cx, cy, s / 2 - 8);
    expG.fillStyle(0xffcc00);
    expG.fillCircle(cx, cy, 8);
    expG.fillStyle(0xffffff);
    expG.fillCircle(cx, cy, 3);
    expG.generateTexture('explosion', s, s);
    expG.destroy();

    // Horizontal
    const hG = this.make.graphics({ add: false });
    hG.fillStyle(0xff4400);
    hG.fillRect(0, cy - 8, s, 16);
    hG.fillStyle(0xff8800);
    hG.fillRect(0, cy - 5, s, 10);
    hG.fillStyle(0xffcc00);
    hG.fillRect(0, cy - 2, s, 4);
    hG.generateTexture('explosion-h', s, s);
    hG.destroy();

    // Vertical
    const vG = this.make.graphics({ add: false });
    vG.fillStyle(0xff4400);
    vG.fillRect(cx - 8, 0, 16, s);
    vG.fillStyle(0xff8800);
    vG.fillRect(cx - 5, 0, 10, s);
    vG.fillStyle(0xffcc00);
    vG.fillRect(cx - 2, 0, 4, s);
    vG.generateTexture('explosion-v', s, s);
    vG.destroy();

    // End pieces
    const ends = [
      { key: 'explosion-end-up', draw: (g) => {
        g.fillStyle(0xff4400); g.fillTriangle(cx, 0, 0, cy, s, cy);
        g.fillStyle(0xff8800); g.fillTriangle(cx, 4, 6, cy - 2, s - 6, cy - 2);
        g.fillStyle(0xffcc00); g.fillTriangle(cx, 8, 12, cy - 4, s - 12, cy - 4);
      }},
      { key: 'explosion-end-down', draw: (g) => {
        g.fillStyle(0xff4400); g.fillTriangle(cx, s, 0, cy, s, cy);
        g.fillStyle(0xff8800); g.fillTriangle(cx, s - 4, 6, cy + 2, s - 6, cy + 2);
        g.fillStyle(0xffcc00); g.fillTriangle(cx, s - 8, 12, cy + 4, s - 12, cy + 4);
      }},
      { key: 'explosion-end-left', draw: (g) => {
        g.fillStyle(0xff4400); g.fillTriangle(0, cy, cx, 0, cx, s);
        g.fillStyle(0xff8800); g.fillTriangle(4, cy, cx - 2, 6, cx - 2, s - 6);
        g.fillStyle(0xffcc00); g.fillTriangle(8, cy, cx - 4, 12, cx - 4, s - 12);
      }},
      { key: 'explosion-end-right', draw: (g) => {
        g.fillStyle(0xff4400); g.fillTriangle(s, cy, cx, 0, cx, s);
        g.fillStyle(0xff8800); g.fillTriangle(s - 4, cy, cx + 2, 6, cx + 2, s - 6);
        g.fillStyle(0xffcc00); g.fillTriangle(s - 8, cy, cx + 4, 12, cx + 4, s - 12);
      }},
    ];
    ends.forEach(({ key, draw }) => {
      const g = this.make.graphics({ add: false });
      draw(g);
      g.generateTexture(key, s, s);
      g.destroy();
    });
  }

  // ── Power-up sprites ──
  _drawPowerUps(s, cx, cy) {
    // BOMB — red pill with bomb icon
    this._drawPU('powerup-bomb', s, 0xcc2222, (g) => {
      g.fillStyle(0x222222);
      g.fillCircle(cx, cy + 2, 7);
      g.fillStyle(0xff6600);
      g.fillRect(cx - 1, cy - 8, 2, 6);
      g.fillStyle(0xffcc00);
      g.fillCircle(cx, cy - 8, 3);
    });

    // FIRE — orange with flame
    this._drawPU('powerup-fire', s, 0xdd6600, (g) => {
      g.fillStyle(0xffcc00);
      g.fillTriangle(cx, cy - 10, cx - 8, cy + 6, cx + 8, cy + 6);
      g.fillStyle(0xff6600);
      g.fillTriangle(cx, cy - 2, cx - 5, cy + 6, cx + 5, cy + 6);
      g.fillStyle(0xff3300);
      g.fillTriangle(cx, cy + 2, cx - 3, cy + 6, cx + 3, cy + 6);
    });

    // SPEED — blue with lightning bolt
    this._drawPU('powerup-speed', s, 0x2277dd, (g) => {
      g.fillStyle(0xffffff);
      g.fillTriangle(cx + 2, cy - 10, cx - 6, cy + 1, cx + 1, cy - 1);
      g.fillTriangle(cx - 2, cy + 1, cx + 6, cy, cx - 1, cy + 2);
    });

    // KICK — yellow with boot
    this._drawPU('powerup-kick', s, 0xccaa00, (g) => {
      g.fillStyle(0xffffff);
      g.fillRect(cx - 3, cy - 8, 6, 10);
      g.fillRect(cx - 1, cy, 10, 5);
      g.fillRect(cx + 4, cy + 3, 6, 3);
    });

    // DETONATE — purple with red button
    this._drawPU('powerup-detonate', s, 0x8833cc, (g) => {
      g.fillStyle(0xffffff);
      g.fillRoundedRect(cx - 8, cy - 6, 16, 12, 3);
      g.fillStyle(0xff0000);
      g.fillCircle(cx, cy, 5);
      g.fillStyle(0xff4444);
      g.fillCircle(cx - 1, cy - 1, 2);
    });

    // SHIELD — cyan with shield shape
    this._drawPU('powerup-shield', s, 0x00aaaa, (g) => {
      g.fillStyle(0xffffff);
      g.beginPath();
      g.moveTo(cx, cy - 10);
      g.lineTo(cx + 10, cy - 4);
      g.lineTo(cx + 8, cy + 6);
      g.lineTo(cx, cy + 10);
      g.lineTo(cx - 8, cy + 6);
      g.lineTo(cx - 10, cy - 4);
      g.closePath();
      g.fillPath();
      g.fillStyle(0x00aaaa);
      g.beginPath();
      g.moveTo(cx, cy - 6);
      g.lineTo(cx + 6, cy - 2);
      g.lineTo(cx + 4, cy + 4);
      g.lineTo(cx, cy + 6);
      g.lineTo(cx - 4, cy + 4);
      g.lineTo(cx - 6, cy - 2);
      g.closePath();
      g.fillPath();
    });

    // WALL PASS — pink with ghost
    this._drawPU('powerup-wall_pass', s, 0xbb44bb, (g) => {
      // Wall lines
      g.fillStyle(0xffffff, 0.4);
      g.fillRect(cx + 4, cy - 10, 3, 20);
      g.fillRect(cx + 9, cy - 10, 3, 20);
      // Ghost body
      g.fillStyle(0xffffff);
      g.fillCircle(cx - 2, cy - 3, 7);
      g.fillRect(cx - 9, cy - 3, 14, 10);
      g.fillCircle(cx - 6, cy + 7, 3);
      g.fillCircle(cx + 2, cy + 7, 3);
      // Ghost eyes
      g.fillStyle(0x111111);
      g.fillCircle(cx - 5, cy - 4, 2);
      g.fillCircle(cx + 1, cy - 4, 2);
    });
  }

  _drawPU(key, s, bgColor, iconFn) {
    const g = this.make.graphics({ add: false });
    // Background
    g.fillStyle(bgColor);
    g.fillRoundedRect(4, 4, s - 8, s - 8, 8);
    // Shine
    g.fillStyle(0xffffff, 0.15);
    g.fillRoundedRect(6, 6, s - 16, (s - 8) / 2, 6);
    // Border
    g.lineStyle(2, 0xffffff, 0.8);
    g.strokeRoundedRect(4, 4, s - 8, s - 8, 8);
    // Icon
    iconFn(g);
    g.generateTexture(key, s, s);
    g.destroy();
  }
}