CINC/scenes/testScenes/FogOfWarTestScene.js

// 测试场景：迷雾测试
import Unit from '../../objects/Unit.js';
import { InputSystem } from '../../systems/InputSystem.js';
import { SelectionSystem } from '../../systems/SelectionSystem.js';
import { CommandSystem } from '../../systems/CommandSystem.js';

export default class FogOfWarTestScene extends Phaser.Scene {
  constructor() {
    super({ key: 'FogOfWarTestScene' });
  }

  create() {
    // 创建玩家纹理
    if (!this.textures.exists('player')) {
      const canvas = document.createElement('canvas');
      canvas.width = 32;
      canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#000000ff';
      ctx.beginPath();
      ctx.arc(16, 16, 14, 0, Math.PI * 2);
      ctx.fill();
      this.textures.addCanvas('player', canvas);
    }

    // 创建敌人纹理
    if (!this.textures.exists('enemy')) {
      const canvas = document.createElement('canvas');
      canvas.width = 32;
      canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#ff0000ff';
      ctx.beginPath();
      ctx.arc(16, 16, 14, 0, Math.PI * 2);
      ctx.fill();
      this.textures.addCanvas('enemy', canvas);
    }

    // 物理世界和相机边界
    const worldSize = 2000;
    this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
    this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
    this.cameras.main.centerOn(0, 0);

    // 初始化系统 - 开启鼠标移动和框选
    this.inputSystem = new InputSystem(this, {
      keyboard: true,
      mouse: true,
      joystick: false,
      selection: true
    });
    this.selectionSystem = new SelectionSystem(this);
    this.commandSystem = new CommandSystem(this);

    // 创建单位组
    this.unitGroup = this.add.group();

    // 创建玩家单位
    this.playerUnit = new Unit(this, 0, 0, 'player');
    this.playerUnit.setDepth(2); // 确保玩家在迷雾之上
    this.unitGroup.add(this.playerUnit);

    // 自动选中玩家单位
    this.events.emit('select-unit', this.playerUnit);

    // 创建多个敌人单位，分布在不同位置
    for (let i = 0; i < 10; i++) {
      const x = Math.random() * 1600 - 800;
      const y = Math.random() * 1600 - 800;
      const enemyUnit = new Unit(this, x, y, 'enemy');
      enemyUnit.setDepth(2); // 确保敌人在迷雾之上
      this.unitGroup.add(enemyUnit);
    }

    // 添加碰撞检测
    this.physics.add.collider(this.unitGroup, this.unitGroup);

    // 创建迷雾系统
    this.createFogOfWar(worldSize);

    // 添加场景说明文本
    const titleText = this.add.text(10, 10, '测试场景：迷雾测试', {
      fontSize: '20px',
      fill: '#ffffff'
    });
    titleText.setScrollFactor(0, 0); // 固定在屏幕上，不随相机移动
    titleText.setDepth(10); // 设置深度，确保显示在游戏元素上方
    
    const fogText = this.add.text(10, 40, '玩家周围会显示视野，迷雾会随玩家移动而变化', {
      fontSize: '16px',
      fill: '#ffffff'
    });
    fogText.setScrollFactor(0, 0); // 固定在屏幕上，不随相机移动
    fogText.setDepth(10); // 设置深度，确保显示在游戏元素上方
    
    const controlsText = this.add.text(10, 70, 'WASD或方向键移动视角，鼠标右键移动单位', {
      fontSize: '16px',
      fill: '#ffffff'
    });
    controlsText.setScrollFactor(0, 0); // 固定在屏幕上，不随相机移动
    controlsText.setDepth(10); // 设置深度，确保显示在游戏元素上方
    
    const spaceText = this.add.text(10, 100, '按空格键返回菜单', {
      fontSize: '16px',
      fill: '#ffffff'
    });
    spaceText.setScrollFactor(0, 0); // 固定在屏幕上，不随相机移动
    spaceText.setDepth(10); // 设置深度，确保显示在游戏元素上方

    // 空格键切换场景
    this.input.keyboard.on('keydown-SPACE', () => {
      this.scene.start('BootScene');
    });
    
    // 添加返回菜单按钮
    this.createReturnButton();

    // 添加相机移动控制
    this.cameraSpeed = 2;
    this.cameraKeys = this.input.keyboard.addKeys({
      up: Phaser.Input.Keyboard.KeyCodes.W,
      down: Phaser.Input.Keyboard.KeyCodes.S,
      left: Phaser.Input.Keyboard.KeyCodes.A,
      right: Phaser.Input.Keyboard.KeyCodes.D
    });
  }
  
  /**
   * 创建返回菜单按钮
   */
  createReturnButton() {
    // 创建按钮背景
    const button = this.add.rectangle(10, 130, 150, 40, 0x333333);
    button.setOrigin(0, 0);
    button.setScrollFactor(0, 0);
    button.setDepth(10);
    button.setInteractive({ useHandCursor: true });
    
    // 按钮文本
    const buttonText = this.add.text(25, 140, '返回菜单', {
      fontSize: '16px',
      fill: '#ffffff',
      fontFamily: 'Arial'
    });
    buttonText.setScrollFactor(0, 0);
    buttonText.setDepth(11);
    
    // 按钮事件
    button.on('pointerdown', () => {
      this.scene.start('BootScene');
    });
    
    button.on('pointerover', () => {
      button.setFillStyle(0x555555);
    });
    
    button.on('pointerout', () => {
      button.setFillStyle(0x333333);
    });
  }

  /**
   * 创建迷雾系统
   * @param {number} worldSize - 世界大小
   */
  createFogOfWar(worldSize) {
    // 创建迷雾纹理
    if (!this.textures.exists('fogTexture')) {
      const canvas = document.createElement('canvas');
      canvas.width = 64;
      canvas.height = 64;
      const ctx = canvas.getContext('2d');
      
      // 创建渐变效果
      const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
      gradient.addColorStop(0, 'rgba(0, 0, 0, 0)'); // 中心透明
      gradient.addColorStop(0.7, 'rgba(0, 0, 0, 0.8)'); // 边缘不透明
      
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 64, 64);
      
      this.textures.addCanvas('fogTexture', canvas);
    }

    // 创建迷雾图层
    this.fogLayer = this.add.graphics();
    this.fogLayer.setDepth(1); // 迷雾在单位之下

    // 视野范围
    this.viewRange = 300;

    // 更新迷雾
    this.updateFogOfWar();
  }

  /**
   * 更新迷雾
   */
  updateFogOfWar() {
    if (!this.playerUnit) return;

    // 清除当前迷雾
    this.fogLayer.clear();

    // 获取玩家位置
    const playerX = this.playerUnit.x;
    const playerY = this.playerUnit.y;

    // 创建迷雾遮罩
    this.fogLayer.fillStyle(0x000000, 0.8);
    this.fogLayer.fillRect(-2000, -2000, 4000, 4000);

    // 创建视野区域（圆形）
    this.fogLayer.fillStyle(0x000000, 0);
    this.fogLayer.setBlendMode(Phaser.BlendModes.ERASE);
    
    // 绘制视野圆
    this.fogLayer.beginPath();
    this.fogLayer.arc(playerX, playerY, this.viewRange, 0, Math.PI * 2);
    this.fogLayer.fillPath();

    // 重置混合模式
    this.fogLayer.setBlendMode(Phaser.BlendModes.NORMAL);
  }

  update() {
    this.inputSystem.update();
    
    // 更新相机移动
    if (this.cameraKeys.left.isDown) {
      this.cameras.main.scrollX -= this.cameraSpeed;
    }
    if (this.cameraKeys.right.isDown) {
      this.cameras.main.scrollX += this.cameraSpeed;
    }
    if (this.cameraKeys.up.isDown) {
      this.cameras.main.scrollY -= this.cameraSpeed;
    }
    if (this.cameraKeys.down.isDown) {
      this.cameras.main.scrollY += this.cameraSpeed;
    }
    
    this.unitGroup.getChildren().forEach(unit => {
      if (unit.update) {
        unit.update();
      }
      unit.updateMovement();
    });
    
    // 更新迷雾
    this.updateFogOfWar();
  }
}