feat(TOS) 添加对象测试场景，拆分语言问价

lang/default.js

@@ -0,0 +1,9 @@
+// 默认语言翻译模块
+export default {
+  "title": "#*^#",
+  "start": "@%!$%",
+  "exit": "#@*%",
+  "rain": "$!*^",
+  "on": "(^",
+  "off": "($$"
+};

lang/en.js

@@ -0,0 +1,9 @@
+// 英文翻译模块
+export default {
+  "title": "CINC",
+  "start": "start",
+  "exit": "exit",
+  "rain": "rain",
+  "on": "on",
+  "off": "off"
+};

lang/translations.js

@@ -1,27 +1,11 @@
 
+// 导入各个语言的翻译文件
+import defaultTranslations from './default.js';
+import enTranslations from './en.js';
+import zhTranslations from './zh.js';
+
 export default {
-  "#^": {
+  "#^": defaultTranslations,
-    "title": "#*^#",
+  "en": enTranslations,
-    'start': "@%!$%",
+  "中文": zhTranslations
-    "exit": "#@*%",
-    "rain": "$!*^",
-    "on": "(^",
-    "off": "($$"
-  },
-  "en": {
-    "title": "CINC",
-    "start": "start",
-    "exit": "exit",
-    "rain": "rain",
-    "on": "on",
-    "off": "off"
-  },
-  "中文": {
-    "title": "游戏",
-    "start": "开始",
-    "exit": "退出",
-    "rain": "雨天",
-    "on": "开启",
-    "off": "关闭"
-  }
 }

lang/zh.js

@@ -0,0 +1,9 @@
+// 中文翻译模块
+export default {
+  "title": "游戏",
+  "start": "开始",
+  "exit": "退出",
+  "rain": "雨天",
+  "on": "开启",
+  "off": "关闭"
+};

main.js

@@ -38,6 +38,8 @@ import FogOfWarTestScene from './scenes/testScenes/FogOfWarTestScene.js';
 import MenuScene from './scenes/MenuScene.js';
 // 导入临时场景
 import TmpScene from './scenes/TmpScene.js';
+// 导入测试对象场景
+import TestObjectsScene from './scenes/testScenes/TestObjectsScene.js';
 // 创建游戏的最终配置对象
 const config = {
   // 使用扩展运算符(...)将gameConfig中的所有配置项复制到当前对象中
@@ -46,8 +48,9 @@ const config = {
   // 指定游戏使用的场景列表，包括主场景和所有测试场景
   scene: [
     MenuScene,
-    BootScene,
     TmpScene,
+    TestObjectsScene,
+    BootScene,
     GameScene,
     KeyboardMovementTestScene,
     TargetMovementTestScene,

scenes/BootScene.js

@@ -17,6 +17,7 @@ export default class BootScene extends Phaser.Scene {
 
     // 测试场景列表
     const testScenes = [
+      { key: 'TestObjectsScene', name: '测试场景19：测试对象场景' },
       { key: 'TmpScene', name: '测试场景18：临时场景' },
       { key: 'FogOfWarTestScene', name: '测试场景17：迷雾系统测试' },
       { key: 'AttackSkillTestScene', name: '测试场景16：攻击技能测试' },

scenes/testScenes/TestObjectsScene.js

@@ -0,0 +1,757 @@
+/**
+ * TestObjectsScene - 测试场景，展示Phaser中的各种对象类型
+ */
+export default class TestObjectsScene extends Phaser.Scene {
+    constructor() {
+        super('TestObjectsScene');
+    }
+
+    preload() {
+        // 注意：实际项目中需要先加载纹理
+        // 本示例使用内置图形，不需要加载外部资源
+    }
+
+    create() {
+        // 设置背景色
+        this.cameras.main.setBackgroundColor('#222222');
+        
+        // 获取屏幕宽度，用于响应式布局
+        const screenWidth = this.cameras.main.width;
+        const screenHeight = this.cameras.main.height;
+        const centerX = screenWidth / 2;
+        
+        // 设置世界边界，允许滚动
+        this.cameras.main.setBounds(0, 0, screenWidth, 3000);
+        
+        // 滚动相关变量
+        this.scrollVelocity = 0;
+        this.scrollAcceleration = 0.98;
+        
+        // 启用鼠标/触摸滚动
+        this.input.on('pointermove', (pointer) => {
+            if (pointer.isDown) {
+                // 调整滚动速度和方向：向上拖动时内容向上滚动，速度更快
+                this.scrollVelocity = -pointer.velocity.y * 0.15;
+                this.cameras.main.scrollY += this.scrollVelocity;
+                // 限制滚动范围
+                this.cameras.main.scrollY = Phaser.Math.Clamp(this.cameras.main.scrollY, 0, 2400);
+            }
+        });
+        
+        // 停止触摸时应用惯性滚动
+        this.input.on('pointerup', () => {
+            // 创建惯性滚动
+            this.tweens.add({
+                targets: this,
+                scrollVelocity: 0,
+                duration: 500,
+                ease: 'Power2',
+                onUpdate: (tween) => {
+                    this.cameras.main.scrollY += this.scrollVelocity;
+                    // 限制滚动范围
+                    this.cameras.main.scrollY = Phaser.Math.Clamp(this.cameras.main.scrollY, 0, 2400);
+                }
+            });
+        });
+        
+        // 1. 文本对象
+        this.createTextObjects(centerX);
+        
+        // 2. 图像和精灵
+        this.createImageObjects(centerX);
+        
+        // 3. 图形对象
+        this.createGraphicsObjects(centerX);
+        
+        // 4. 容器对象
+        this.createContainerObjects(centerX);
+        
+        // 5. 粒子系统
+        this.createParticles(centerX);
+        
+        // 6. 物理对象（简单示例）
+        this.createPhysicsObjects(centerX);
+        
+        // 7. 精灵对象
+        this.createSpriteObjects(centerX);
+        
+        // 8. 瓦片地图
+        this.createTilemapObjects(centerX);
+        
+        // 9. 点阵文字
+        this.createBitmapTextObjects(centerX);
+        
+        // 10. 渲染纹理
+        this.createRenderTextureObjects(centerX);
+        
+        // 11. 形状对象
+        this.createShapeObjects(centerX);
+        
+        // 12. 多相机系统
+        this.createCameraObjects(centerX);
+        
+        // 13. 灯光系统
+        this.createLightObjects(centerX);
+        
+        // 14. 路径系统
+        this.createPathObjects(centerX);
+        
+        // 15. 网格系统
+        this.createGridObjects(centerX);
+        
+        // 16. 时间线
+        this.createTimelineObjects(centerX);
+        
+        // 添加滚动指示器
+        this.add.text(centerX, 2850, '↓ 向下滚动查看更多 ↓', { 
+            fontSize: '14px', 
+            fill: '#aaaaaa',
+            backgroundColor: '#333333',
+            padding: { x: 15, y: 8 }
+        })
+        .setOrigin(0.5)
+        .setScrollFactor(0); // 固定在屏幕底部
+        
+        // 添加顶部指示器
+        this.add.text(centerX, 10, '↑ 向上滚动返回顶部 ↑', { 
+            fontSize: '14px', 
+            fill: '#aaaaaa',
+            backgroundColor: '#333333',
+            padding: { x: 15, y: 8 }
+        })
+        .setOrigin(0.5)
+        .setScrollFactor(0); // 固定在屏幕顶部
+        
+        // 添加返回按钮
+        this.add.text(20, 20, '按 ESC 返回', { fontSize: '16px', fill: '#ffffff' })
+            .setInteractive()
+            .on('pointerdown', () => {
+                this.scene.start('TmpScene');
+            });
+    }
+
+    // 创建文本对象
+    createTextObjects(centerX) {
+        // 基本文本
+        this.add.text(centerX, 50, '1. 文本对象示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 带样式的文本
+        this.add.text(centerX, 90, '普通文本', { 
+            fontSize: '16px', 
+            fill: '#cccccc' 
+        }).setOrigin(0.5);
+        
+        // 彩色文本
+        this.add.text(centerX, 120, '彩色文本', { 
+            fontSize: '16px', 
+            fill: '#ff0000' 
+        }).setOrigin(0.5);
+        
+        // 带背景的文本
+        this.add.text(centerX, 150, '带背景的文本', { 
+            fontSize: '16px', 
+            fill: '#ffffff',
+            backgroundColor: '#444444',
+            padding: { x: 10, y: 5 }
+        }).setOrigin(0.5);
+    }
+
+    // 创建图像和精灵
+    createImageObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 200, '2. 图像和精灵示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 使用图形替代图像
+        const logo = this.add.graphics()
+            .fillStyle(0x3498db, 1)
+            .fillRect(0, 0, 100, 50)
+            .setPosition(centerX - 50, 255)
+            .setInteractive(new Phaser.Geom.Rectangle(0, 0, 100, 50), Phaser.Geom.Rectangle.Contains)
+            .on('pointerdown', function() {
+                this.scaleX *= 1.1;
+                this.scaleY *= 1.1;
+            });
+        
+        // 添加文本标签
+        this.add.text(centerX, 270, 'Phaser Logo', { 
+            fontSize: '12px', 
+            fill: '#ffffff' 
+        }).setOrigin(0.5);
+        
+        // 精灵（使用圆形替代纹理）
+        const redDot = this.add.circle(centerX, 320, 10, 0xff0000, 1)
+            .setInteractive()
+            .on('pointerdown', function() {
+                this.angle += 45;
+            });
+    }
+
+    // 创建图形对象
+    createGraphicsObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 350, '3. 图形对象示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 矩形
+        this.add.rectangle(centerX - 80, 420, 100, 60, 0xff0000, 0.5)
+            .setInteractive()
+            .on('pointerdown', function() {
+                this.fillColor = Phaser.Math.Between(0x000000, 0xffffff);
+            });
+        
+        // 圆形
+        this.add.circle(centerX, 420, 30, 0x00ff00, 0.5)
+            .setInteractive()
+            .on('pointerdown', function() {
+                this.radius = Phaser.Math.Between(20, 40);
+            });
+        
+        // 线段
+        this.add.line(centerX + 80, 420, 0, -30, 0, 30, 0xffff00, 1)
+            .setInteractive()
+            .on('pointerdown', function() {
+                this.angle += 15;
+            });
+    }
+
+    // 创建容器对象
+    createContainerObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 480, '4. 容器对象示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 创建容器
+        const container = this.add.container(centerX, 550);
+        
+        // 容器背景
+        const bg = this.add.rectangle(0, 0, 200, 100, 0x444444, 0.8);
+        container.add(bg);
+        
+        // 容器内的文本
+        const text = this.add.text(0, 0, '容器示例', { 
+            fontSize: '16px', 
+            fill: '#ffffff' 
+        }).setOrigin(0.5);
+        container.add(text);
+        
+        // 容器内的圆形
+        const circle = this.add.circle(0, 30, 10, 0x00ffff, 1);
+        container.add(circle);
+        
+        // 使容器可交互
+        container.setInteractive(new Phaser.Geom.Rectangle(-100, -50, 200, 100), Phaser.Geom.Rectangle.Contains)
+            .on('pointerdown', () => {
+                container.angle += 10;
+            });
+    }
+
+    // 创建粒子系统
+    createParticles(centerX) {
+        // 标题
+        this.add.text(centerX, 650, '5. 粒子系统示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 注意：粒子系统需要纹理，实际项目中需要先加载
+        // 本示例使用图形替代粒子效果
+        const particles = this.add.graphics()
+            .fillStyle(0x3498db, 1)
+            .fillCircle(0, 0, 5)
+            .setPosition(centerX, 720)
+            .setVisible(false);
+        
+        // 添加交互，点击时显示粒子效果
+        this.add.text(centerX, 750, '点击显示粒子效果', { 
+            fontSize: '14px', 
+            fill: '#ffffff',
+            backgroundColor: '#444444',
+            padding: { x: 10, y: 5 }
+        })
+        .setOrigin(0.5)
+        .setInteractive()
+        .on('pointerdown', () => {
+            // 创建多个圆形模拟粒子效果
+            for (let i = 0; i < 20; i++) {
+                const particle = this.add.circle(centerX, 720, 3, 0x3498db, 1);
+                this.tweens.add({
+                    targets: particle,
+                    x: centerX + Phaser.Math.Between(-100, 100),
+                    y: 720 + Phaser.Math.Between(-100, -50),
+                    alpha: 0,
+                    scale: 0,
+                    duration: 1000,
+                    onComplete: function() {
+                        particle.destroy();
+                    }
+                });
+            }
+        });
+    }
+
+    // 创建物理对象（简单示例）
+    createPhysicsObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 800, '6. 物理对象示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 注意：物理系统需要在游戏配置中启用
+        // 本示例使用图形替代物理对象
+        const ground = this.add.rectangle(centerX, 880, 300, 20, 0x666666, 1);
+        
+        // 创建圆形图形
+        const ball = this.add.circle(centerX, 820, 10, 0xe74c3c, 1)
+            .setInteractive()
+            .on('pointerdown', function() {
+                // 模拟物理效果
+                this.setY(this.y - 50);
+                this.scene.tweens.add({
+                    targets: this,
+                    y: 820,
+                    duration: 500,
+                    ease: 'Bounce.easeOut'
+                });
+            });
+        
+        // 添加交互，点击时给球一个向上的力
+        this.add.text(centerX, 880, '点击小球', { 
+            fontSize: '14px', 
+            fill: '#ffffff'
+        })
+        .setOrigin(0.5);
+    }
+
+    update() {
+        // 可以在这里添加对象的更新逻辑
+    }
+
+    // 7. 精灵对象
+    createSpriteObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 950, '7. 精灵对象示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 注意：精灵需要纹理，实际项目中需要先加载
+        // 本示例使用图形替代精灵
+        const sprite = this.add.graphics()
+            .fillStyle(0x9b59b6, 1)
+            .fillCircle(0, 0, 20)
+            .setPosition(centerX, 1020)
+            .setInteractive(new Phaser.Geom.Circle(0, 0, 20), Phaser.Geom.Circle.Contains)
+            .on('pointerdown', function() {
+                this.angle += 30;
+            });
+        
+        // 添加文本标签
+        this.add.text(centerX, 1060, '精灵示例', { 
+            fontSize: '14px', 
+            fill: '#ffffff' 
+        }).setOrigin(0.5);
+    }
+
+    // 8. 瓦片地图
+    createTilemapObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 1100, '8. 瓦片地图示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 注意：瓦片地图需要纹理，实际项目中需要先加载
+        // 本示例使用图形替代瓦片地图
+        const tilemap = this.add.graphics()
+            .fillStyle(0x27ae60, 0.8)
+            .fillRect(0, 0, 200, 100)
+            .setPosition(centerX - 100, 1140);
+        
+        // 添加模拟瓦片
+        for (let i = 0; i < 5; i++) {
+            for (let j = 0; j < 10; j++) {
+                this.add.rectangle(
+                    centerX - 90 + j * 20, 
+                    1150 + i * 20, 
+                    18, 
+                    18, 
+                    0x2ecc71, 
+                    0.6
+                );
+            }
+        }
+        
+        // 添加文本标签
+        this.add.text(centerX, 1260, '瓦片地图示例', { 
+            fontSize: '14px', 
+            fill: '#ffffff' 
+        }).setOrigin(0.5);
+    }
+
+    // 9. 点阵文字
+    createBitmapTextObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 1300, '9. 点阵文字示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 注意：点阵文字需要字体纹理，实际项目中需要先加载
+        // 本示例使用普通文本替代
+        this.add.text(centerX, 1340, '点阵文字示例', { 
+            fontSize: '16px', 
+            fill: '#f1c40f',
+            fontFamily: 'monospace' 
+        }).setOrigin(0.5);
+        
+        // 添加文本标签
+        this.add.text(centerX, 1380, '（使用普通文本模拟）', { 
+            fontSize: '12px', 
+            fill: '#cccccc' 
+        }).setOrigin(0.5);
+    }
+
+    // 10. 渲染纹理
+    createRenderTextureObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 1420, '10. 渲染纹理示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 创建渲染纹理
+        const rt = this.add.renderTexture(centerX - 100, 1460, 200, 100);
+        
+        // 绘制一些内容到渲染纹理
+        const graphics = this.add.graphics().setVisible(false);
+        graphics.fillStyle(0xe74c3c, 1);
+        graphics.fillCircle(100, 50, 30);
+        graphics.lineStyle(2, 0xffffff, 1);
+        graphics.lineBetween(50, 50, 150, 50);
+        
+        // 将图形绘制到渲染纹理
+        rt.draw(graphics, 0, 0);
+        
+        // 添加交互，点击时清除并重新绘制
+        rt.setInteractive(new Phaser.Geom.Rectangle(0, 0, 200, 100), Phaser.Geom.Rectangle.Contains)
+            .on('pointerdown', function() {
+                this.clear();
+                this.draw(graphics, Phaser.Math.Between(0, 100), Phaser.Math.Between(0, 50));
+            });
+    }
+
+    // 11. 形状对象
+    createShapeObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 1550, '11. 形状对象示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 创建三角形（使用graphics）
+        const triangle = this.add.graphics()
+            .fillStyle(0x3498db, 0.8)
+            .beginPath()
+            .moveTo(0, -40)
+            .lineTo(-30, 40)
+            .lineTo(30, 40)
+            .closePath()
+            .fillPath()
+            .setPosition(centerX - 40, 1620)
+            .setInteractive(new Phaser.Geom.Triangle(-30, 40, 30, 40, 0, -40), Phaser.Geom.Triangle.Contains)
+            .on('pointerdown', function() {
+                this.angle += 30;
+            });
+        
+        // 创建圆角矩形
+        this.add.rectangle(centerX + 40, 1620, 80, 60, 0xe74c3c, 0.8)
+            .setInteractive()
+            .on('pointerdown', function() {
+                this.setScale(this.scaleX * 1.1);
+            });
+    }
+
+    // 12. 多相机系统
+    createCameraObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 1750, '12. 多相机系统示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 添加说明文本
+        this.add.text(centerX, 1790, '多相机系统可以同时显示不同视角的内容', { 
+            fontSize: '14px', 
+            fill: '#aaaaaa' 
+        }).setOrigin(0.5);
+        
+        // 创建第二个相机（左侧）
+        const camera2 = this.cameras.add(centerX - 110, 1830, 180, 120);
+        camera2.setBackgroundColor(0x2c3e50);
+        
+        // 创建第三个相机（右侧）
+        const camera3 = this.cameras.add(centerX + 10, 1830, 180, 120);
+        camera3.setBackgroundColor(0x34495e);
+        
+        // 在第二个相机中创建对象
+        const leftText = this.add.text(camera2.x + camera2.width / 2, camera2.y + camera2.height / 2 - 20, '左侧相机', { 
+            fontSize: '14px', 
+            fill: '#ffffff' 
+        }).setOrigin(0.5);
+        
+        const leftCircle = this.add.circle(camera2.x + camera2.width / 2, camera2.y + camera2.height / 2 + 20, 15, 0x3498db, 1);
+        
+        // 在第三个相机中创建对象
+        const rightText = this.add.text(camera3.x + camera3.width / 2, camera3.y + camera3.height / 2 - 20, '右侧相机', { 
+            fontSize: '14px', 
+            fill: '#ffffff' 
+        }).setOrigin(0.5);
+        
+        const rightSquare = this.add.rectangle(camera3.x + camera3.width / 2, camera3.y + camera3.height / 2 + 20, 30, 30, 0xe74c3c, 1);
+        
+        // 添加交互，点击时控制相机
+        this.add.text(centerX, 1970, '点击切换相机视角', { 
+            fontSize: '14px', 
+            fill: '#ffffff',
+            backgroundColor: '#444444',
+            padding: { x: 15, y: 8 }
+        })
+        .setOrigin(0.5)
+        .setInteractive()
+        .on('pointerdown', () => {
+            // 移动左侧相机中的圆形
+            this.tweens.add({
+                targets: leftCircle,
+                x: leftCircle.x + 50,
+                duration: 800,
+                yoyo: true,
+                repeat: 1
+            });
+            
+            // 旋转右侧相机中的正方形
+            this.tweens.add({
+                targets: rightSquare,
+                angle: 360,
+                duration: 1600,
+                ease: 'Linear'
+            });
+            
+            // 改变相机背景色
+            camera2.setBackgroundColor(Phaser.Display.Color.RandomRGB(50, 100).color);
+            camera3.setBackgroundColor(Phaser.Display.Color.RandomRGB(50, 100).color);
+        });
+        
+        // 添加相机功能说明
+        this.add.text(centerX, 2010, '相机1: 主视角 | 相机2: 左侧视角 | 相机3: 右侧视角', { 
+            fontSize: '12px', 
+            fill: '#aaaaaa' 
+        }).setOrigin(0.5);
+    }
+
+    // 13. 灯光系统
+    createLightObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 2050, '13. 灯光系统示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 注意：实际灯光系统需要特殊配置
+        // 本示例使用图形模拟灯光效果
+        
+        // 创建灯光图形
+        const light = this.add.graphics()
+            .fillStyle(0xffffff, 0.3)
+            .fillCircle(0, 0, 100)
+            .setPosition(centerX, 2130);
+        
+        // 创建一些对象来展示灯光效果
+        this.add.rectangle(centerX - 50, 2110, 30, 30, 0x666666, 1);
+        this.add.rectangle(centerX + 50, 2110, 30, 30, 0x666666, 1);
+        this.add.rectangle(centerX, 2150, 30, 30, 0x666666, 1);
+        
+        // 添加交互，点击时移动灯光
+        this.add.text(centerX, 2200, '点击移动灯光', { 
+            fontSize: '14px', 
+            fill: '#ffffff' 
+        })
+        .setOrigin(0.5)
+        .setInteractive()
+        .on('pointerdown', () => {
+            const x = centerX + Phaser.Math.Between(-50, 50);
+            const y = 2100 + Phaser.Math.Between(-30, 30);
+            light.setPosition(x, y);
+        });
+    }
+
+    // 14. 路径系统
+    createPathObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 2250, '14. 路径系统示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 绘制路径
+        const graphics = this.add.graphics();
+        graphics.lineStyle(2, 0xffffff, 0.5);
+        graphics.strokeRect(centerX - 100, 2300, 200, 100);
+        
+        // 创建一个对象沿着路径移动
+        const follower = this.add.circle(centerX - 100, 2300, 10, 0xff0000, 1);
+        
+        // 创建路径动画
+        this.tweens.add({
+            targets: { pos: 0 },
+            pos: 1,
+            duration: 4000,
+            repeat: -1,
+            ease: 'Linear',
+            onUpdate: (tween) => {
+                const progress = tween.targets[0].pos;
+                
+                // 矩形路径：右 -> 下 -> 左 -> 上
+                if (progress < 0.25) {
+                    // 右
+                    follower.x = centerX - 100 + (progress * 4) * 200;
+                    follower.y = 2300;
+                } else if (progress < 0.5) {
+                    // 下
+                    follower.x = centerX + 100;
+                    follower.y = 2300 + ((progress - 0.25) * 4) * 100;
+                } else if (progress < 0.75) {
+                    // 左
+                    follower.x = centerX + 100 - ((progress - 0.5) * 4) * 200;
+                    follower.y = 2400;
+                } else {
+                    // 上
+                    follower.x = centerX - 100;
+                    follower.y = 2400 - ((progress - 0.75) * 4) * 100;
+                }
+            }
+        });
+    }
+
+    // 15. 网格系统
+    createGridObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 2450, '15. 网格系统示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 创建网格
+        const grid = this.add.grid(centerX, 2520, 200, 100, 20, 20, 0x444444, 0, 0x666666, 0.3);
+        
+        // 在网格上添加一些对象
+        for (let i = 0; i < 5; i++) {
+            const x = centerX - 90 + i * 40;
+            for (let j = 0; j < 2; j++) {
+                const y = 2490 + j * 40;
+                this.add.circle(x, y, 5, 0x2ecc71, 1);
+            }
+        }
+    }
+
+    // 16. 时间线
+    createTimelineObjects(centerX) {
+        // 标题
+        this.add.text(centerX, 2600, '16. 时间线示例', { 
+            fontSize: '20px', 
+            fill: '#ffffff',
+            fontWeight: 'bold' 
+        }).setOrigin(0.5);
+        
+        // 创建对象
+        const obj1 = this.add.rectangle(centerX - 40, 2670, 40, 40, 0x3498db, 1);
+        const obj2 = this.add.circle(centerX, 2670, 20, 0xe74c3c, 1);
+        const obj3 = this.add.graphics()
+            .fillStyle(0xf1c40f, 1)
+            .beginPath()
+            .moveTo(0, -20)
+            .lineTo(-20, 20)
+            .lineTo(20, 20)
+            .closePath()
+            .fillPath()
+            .setPosition(centerX + 40, 2670);
+        
+        // 添加交互，点击时播放动画序列
+        this.add.text(centerX, 2750, '点击播放动画', { 
+            fontSize: '14px', 
+            fill: '#ffffff'
+        })
+        .setOrigin(0.5)
+        .setInteractive()
+        .on('pointerdown', () => {
+            // 动画序列
+            this.tweens.add({
+                targets: obj1,
+                y: 2620,
+                duration: 500,
+                ease: 'Power2',
+                onComplete: () => {
+                    this.tweens.add({
+                        targets: obj2,
+                        scale: 1.5,
+                        duration: 500,
+                        ease: 'Power2',
+                        onComplete: () => {
+                            this.tweens.add({
+                                targets: obj3,
+                                angle: 360,
+                                duration: 1000,
+                                ease: 'Linear',
+                                onComplete: () => {
+                                    this.tweens.add({
+                                        targets: obj1,
+                                        y: 950,
+                                        duration: 500,
+                                        ease: 'Power2'
+                                    });
+                                    this.tweens.add({
+                                        targets: obj2,
+                                        scale: 1,
+                                        duration: 500,
+                                        ease: 'Power2'
+                                    });
+                                    this.tweens.add({
+                                        targets: obj3,
+                                        angle: 0,
+                                        duration: 500,
+                                        ease: 'Power2'
+                                    });
+                                }
+                            });
+                        }
+                    });
+                }
+            });
+        });
+    }
+}