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)