feat(SS) 添加地图

scenes/storeScenes/BreatheLife.js

@@ -5,17 +5,34 @@
  * 当创建的角色超过3个时，点击已存在的角色会为其设置纹理
  * 当设置纹理的角色超过3个时，自动切换到 MenuScene 场景
  */
-export default class BreatheLife extends Phaser.Scene {
+import WorldLand from './WorldLand.js'
+export default class BreatheLife extends WorldLand {
     /**
      * 构造函数
-     * 初始化场景并设置场景键名为 'BreatheLife'
+     * 初始化场景并设置场景键名
+     * @param {string} sceneKey - 场景键名，默认值为 'BreatheLife'
      */
-    constructor() {
-        super('BreatheLife')
+    constructor(sceneKey = 'BreatheLife') {
+        super(sceneKey)
         this.nextScene = 'MenuScene'
+
+        this.UIDepth = 100  // UI层级深度，确保在其他元素之上
+        this.maskDepth = 99  // 黑夜遮罩层级，低于UI层级
+        this.SpriteDepth = 98  // 角色层级，确保在地图层级之上
+        this.mapDepth = 97  // 地图层级，确保在UI层级之下
+
+        
+        this.tileCount = 234  // 瓦片总数，从tile_0000到tile_0233
+        this.tileSize = 16  // 瓦片大小
+        this.mapWidth = 18; // 瓦片图行数
+        this.mapHeight = 13; // 瓦片图列数
     }
     
     preload() {
+        // 加载草地瓦片图
+        this.load.image(`grass`, `assets/PNG/Tiles/Tiles/tile_0024.png`)
+        this.load.image(`smallGrass`, `assets/PNG/Tiles/Tiles/tile_0044.png`)
+
         // 加载角色动画和图片资源
         this.load.image(`player0-0`, `assets/PNG/Players/Tiles/tile_${String(0).padStart(4, '0')}.png`)
         this.load.image(`player1-0`, `assets/PNG/Players/Tiles/tile_${String(8).padStart(4, '0')}.png`)
@@ -47,6 +64,10 @@ export default class BreatheLife extends Phaser.Scene {
         this.spriteAnimCount = 0
         this.targetCount = 3  // 目标角色数量
         
+        this.createTilemap()  // 创建瓦片地图
+        this.initFrameRateText()  // 初始化帧率显示文本
+        this.initDayNight(this.toGameTime('2000-01-01 12:00:00'))  // 初始化时间，白天黑夜状态
+
         // 监听鼠标点击事件，点击后创建一个新的角色
         this.input.on('pointerdown', () => {
             // 获取点击位置的坐标
@@ -84,6 +105,7 @@ export default class BreatheLife extends Phaser.Scene {
         }else if (this.spriteCount < 3) {
             // 创建一个新的角色 sprite，缩放为1倍，并设置原点为中心底部
             const sprite = this.physics.add.sprite(x, y, 'player').setScale(1).setOrigin(0.5, 1)
+            sprite.setDepth(this.SpriteDepth)  // 设置角色层级
             
             // 设置角色碰撞世界边界
             sprite.setCollideWorldBounds(true)

scenes/storeScenes/WorldLand.js

@@ -4,44 +4,71 @@
  * 初始引导场景，显示空白背景并在用户交互或自动延迟后
  * 执行过渡动画切换到下一个场景
  */
-import GameTimeManager from '../../systems/GameTimeManager.js'
+import WorldTime from './WorldTime.js'
 
-export default class WorldLand extends Phaser.Scene {
+export default class WorldLand extends WorldTime {
     /**
      * 构造函数
-     * 初始化场景并设置场景键名为 'WorldLand'
+     * 初始化场景并设置场景键名
+     * @param {string} sceneKey - 场景键名
      */
-    constructor() {
-        super('WorldLand')
+    constructor(sceneKey = 'WorldLand') {
+        super(sceneKey)
         this.nextScene = 'BreatheLife'
 
-        this.timeManager = new GameTimeManager()  // 创建游戏时间管理器实例
-
         this.UIDepth = 100  // UI层级深度，确保在其他元素之上
         this.maskDepth = 99  // 黑夜遮罩层级，低于UI层级
+        this.mapDepth = 98  // 地图层级，确保在UI层级之下
         
+        this.tileCount = 234  // 瓦片总数，从tile_0000到tile_0233
+        this.tileSize = 16  // 瓦片大小
+        this.mapWidth = 18; // 瓦片图行数
+        this.mapHeight = 13; // 瓦片图列数
+    }
+    preload() {
+        // 加载草地瓦片图
+        this.load.image(`grass`, `assets/PNG/Tiles/Tiles/tile_0024.png`)
+        this.load.image(`smallGrass`, `assets/PNG/Tiles/Tiles/tile_0044.png`)
     }
     create() {
         // 设置场景背景颜色为深灰色
         this.cameras.main.setBackgroundColor('#999999')
+        // 初始化计数器，用于跟踪创建的小草数量
+        this.smallGrassCount = 0
 
-        // 监听鼠标点击事件，点击后执行场景过渡动画
-        this.input.on('pointerdown', () => {
-            this.scene.start(this.nextScene);
-        })
+        this.initInput()  // 初始化输入事件
+        this.initDayNight(this.toGameTime('2000-01-01 17:57:00'))  // 初始化时间，白天黑夜状态
+        
+        this.createTilemap()  // 创建瓦片地图
         
-        // 监听键盘按键事件，按键后执行场景过渡动画
-        this.input.keyboard.on('keydown', () => {
-            this.scene.start(this.nextScene);
-        })
-
-        this.initDayNight(this.toGameTime('1999-12-30 23:57:00'))  // 初始化时间，白天黑夜状态
         this.initFrameRateText()  // 初始化帧率显示文本
     }
-    /**
-     * 更新游戏时间
-     * 每帧调用，刷新游戏时间
-     */
+    
+    createTilemap() {
+        // 获取当前屏幕大小
+        const screenWidth = this.cameras.main.width;
+        const screenHeight = this.cameras.main.height;
+        
+        // 计算需要的瓦片数量
+        const tilesX = Math.ceil(screenWidth / this.tileSize);
+        const tilesY = Math.ceil(screenHeight / this.tileSize);
+        
+        // 草地铺满屏幕
+        for (let y = 0; y < tilesY; y++) {
+            for (let x = 0; x < tilesX; x++) {
+                // 使用草地瓦片
+                const tile = this.add.image(
+                    x * this.tileSize + this.tileSize / 2,
+                    y * this.tileSize + this.tileSize / 2,
+                    'grass'
+                );
+                tile.setDepth(this.mapDepth); // 设置深度，确保在UI层级之下
+            }
+        }
+        
+        console.log(`草地铺满屏幕完成，使用了 ${tilesX}x${tilesY} 个瓦片`)
+    }
+
     update() {
         this.showFrameRate()  // 显示当前帧率
         this.updateGameTime()  // 更新游戏时间
@@ -49,7 +76,31 @@ export default class WorldLand extends Phaser.Scene {
         this.updateDayNight()  // 更新昼夜状态
     }
 
+    initInput() {
+        // 监听鼠标点击事件，点击后创建一个新的小草
+        this.input.on('pointerdown', () => {
+            // 获取点击位置的坐标
+            const { x, y } = this.input.activePointer
+            this.createTile(x, y)
+        })
+        
+        // 监听键盘按键事件，按键后执行场景过渡动画
+        this.input.keyboard.on('keydown', () => {
+            this.scene.start(this.nextScene);
+        })
+    }
 
+    createTile(x, y) {
+        if (this.smallGrassCount >= 10) {
+            this.scene.start(this.nextScene);
+        }
+        // 创建瓦片图实例
+        const tile = this.add.image(x, y, 'smallGrass');
+        tile.setDepth(this.mapDepth); // 设置深度，确保在UI层级之下
+        tile.setScrollFactor(0); // 固定瓦片，不随相机移动
+        // 增加小草计数器
+        this.smallGrassCount++;
+    }
     initFrameRateText() {
         // 创建帧率显示文本
         this.frameRateText = this.add.text(
@@ -61,74 +112,7 @@ export default class WorldLand extends Phaser.Scene {
         ).setScrollFactor(0).setDepth(this.UIDepth) // 固定文本，不随相机移动，UI层级
     }
     showFrameRate() {
-        // 获取当前帧率
-        const frameRate = this.game.loop.actualFps
-        // 更新帧率显示文本
-        this.frameRateText.setText(`Frame Rate: ${frameRate.toFixed(2)}`)
-    }
-    /**
-     * 初始化昼夜状态
-     * 设置初始为白天，添加事件监听切换状态
-     */
-    initDayNight(gameTime) {
-        this.timeManager.init(gameTime)  // 初始化时间管理器
-        // 创建时间显示文本
-        this.timeText = this.add.text(
-            20, 20, '', {
-                fontSize: '20px',
-                fill: '#ffffff',
-                fontFamily: 'Arial'
-            }
-        ).setScrollFactor(0).setDepth(this.UIDepth) // 固定文本，不随相机移动，UI层级
-        // 添加黑夜遮罩
-        this.nightMask = this.add.rectangle(
-            0, 0, 
-            this.cameras.main.width, 
-            this.cameras.main.height, 
-            0x000000
-        ).setOrigin(0, 0).setScrollFactor(0).setDepth(this.maskDepth) // 固定遮罩，不随相机移动，遮罩层级
-        this.nightMask.alpha = 0 // 初始设置为透明
-    }
-    /**
-     * 更新游戏时间
-     * 每帧调用，基于现实时间流逝更新游戏时间
-     */
-    updateGameTime() {
-        this.timeManager.updateGameTime()  // 使用时间管理器更新游戏时间
-    }
-    /**
-     * 获取游戏中的日期
-     * 根据游戏时间戳计算游戏年月日时分秒，格式为YYYY-MM-DD HH:mm:ss
-     */
-    getGameDate() {
-        return this.timeManager.getGameDate()  // 使用时间管理器获取游戏日期
-    }
-    /**
-     * 转换游戏时间字符串为游戏时间戳
-     * 接收时间字符串，格式为YYYY-MM-DD HH:mm:ss，返回游戏时间戳（单位：秒）
-     */
-    toGameTime(gameTimeString) {
-        return this.timeManager.toGameTime(gameTimeString)  // 使用时间管理器转换游戏时间
-    }
-    /**
-     * 显示当前时间
-     * 每帧调用，更新显示时间
-     */
-    displayTime() {
-        const timeString = this.getGameDate().dateString
-        const day = this.timeManager.getDayNightState() ? '白天' : '黑夜'
-        // 更新显示时间
-        this.timeText.setText(`${day} ${timeString}`)
-    }
-    /**
-     * 更新昼夜状态
-     * 每帧调用，根据游戏时间切换白天黑夜状态
-     */
-    updateDayNight() {
-        const isDay = this.timeManager.updateDayNight()
-        // 根据昼夜状态更新遮罩
-        if (this.nightMask) {
-            this.nightMask.alpha = isDay ? 0 : 0.5
-        }
+        const frameRate = this.game.loop.actualFps  // 获取当前帧率
+        this.frameRateText.setText(`Frame Rate: ${frameRate.toFixed(2)}`)  // 更新帧率显示文本
     }
 }

scenes/storeScenes/WorldTime.js

@@ -7,10 +7,11 @@
 export default class WorldTime extends Phaser.Scene {
     /**
      * 构造函数
-     * 初始化场景并设置场景键名为 'WorldTime'
+     * 初始化场景并设置场景键名
+     * @param {string} sceneKey - 场景键名
      */
-    constructor() {
-        super('WorldTime')
+    constructor(sceneKey = 'WorldTime') {
+        super(sceneKey)
         this.nextScene = 'WorldLand'
 
         this.gameTime = 0  // 游戏中的时间戳（单位：秒）
@@ -34,6 +35,15 @@ export default class WorldTime extends Phaser.Scene {
         // 设置场景背景颜色为深灰色
         this.cameras.main.setBackgroundColor('#999999')
 
+        this.initInput()  // 初始化输入事件
+      
+        this.initDayNight(this.toGameTime('1999-12-30 23:57:00'))  // 初始化时间，白天黑夜状态
+    }
+    /**
+     * 初始化输入事件
+     * 监听鼠标点击和键盘按键，触发场景过渡
+     */
+    initInput() {
         // 监听鼠标点击事件，点击后执行场景过渡动画
         this.input.on('pointerdown', () => {
             this.scene.start(this.nextScene);
@@ -43,8 +53,6 @@ export default class WorldTime extends Phaser.Scene {
         this.input.keyboard.on('keydown', () => {
             this.scene.start(this.nextScene);
         })
-      
-        this.initDayNight(this.toGameTime('2000-01-01 17:57:00'))  // 初始化时间，白天黑夜状态
     }
     /**
      * 更新游戏时间