初始化提交

2025-10-03 16:49:53 +08:00
parent 157ca32e2d
commit bdd67a65fa
1066 changed files with 373311 additions and 261 deletions
--- a/IFLOW.md
+++ b/IFLOW.md
@@ -0,0 +1,169 @@
+# Pandona Engine (PE) - IFLOW 上下文
+
+## 项目概述
+Pandona Engine (PE) 是一个功能完整的 JavaScript 2D 游戏引擎，基于 DOM 实现，用于创建各种类型的 2D 游戏和动画。现在支持现代编译时架构，使用 Vite 作为构建工具。
+
+## 核心特性
+1. **完整的游戏开发功能**：支持创建各种类型的2D游戏
+2. **模块化架构**：核心功能拆分为独立模块，易于扩展和维护
+3. **插件系统**：支持自定义插件扩展引擎功能
+4. **多种元素类型**：支持精灵、容器、文本、HTML 和 SVG 元素
+5. **高级动画系统**：内置补间动画、帧动画、动画序列和时间轴
+6. **音频管理**：支持音效和背景音乐播放
+7. **场景管理**：支持多场景切换和过渡效果
+8. **事件系统**：增强的事件总线，支持全局和局部事件
+9. **内存管理**：完善的资源清理机制
+10. **碰撞检测**：矩形碰撞检测系统
+11. **输入处理**：键盘和鼠标输入处理
+12. **UI系统**：按钮、标签、图像、滑块等UI组件
+13. **摄像机系统**：支持跟随、缩放、旋转和震动效果
+14. **粒子系统**：创建各种视觉效果
+15. **组件系统**：基于组件的游戏对象系统
+16. **游戏循环**：固定时间步长的游戏循环
+17. **编译时架构**：使用 Vite 构建工具，支持热重载和代码优化
+
+## 项目结构
+```
+cssEngine/
+├── index.html            # 主页面
+├── main.js               # 应用入口文件
+├── vite.config.js        # Vite配置文件
+├── package.json          # 项目配置
+├── README.md             # 项目说明文档
+├── IFLOW.md              # IFLOW上下文文件
+├── public/               # 静态资源
+│   └── sprite.css        # 精灵样式文件
+├── style/                # 全局样式
+│   └── base.less         # 基础样式
+├── examples/             # 示例项目
+│   ├── spaceShooter.js   # 太空射击游戏示例
+│   └── spaceShooter.html # 示例游戏HTML文件
+├── src/
+│   ├── core/             # 核心模块
+│   │   └── Engine.js     # 引擎主类
+│   ├── elements/         # 元素类
+│   │   ├── BaseElement.js
+│   │   ├── Sprite.js
+│   │   ├── Box.js
+│   │   ├── TextElement.js
+│   │   ├── HtmlElement.js
+│   │   ├── SvgElement.js
+│   │   ├── GameObject.js
+│   │   └── Component.js
+│   ├── managers/         # 管理器
+│   │   ├── ResourceManager.js
+│   │   ├── SceneManager.js
+│   │   ├── AudioManager.js
+│   │   ├── TransitionManager.js
+│   │   └── Camera.js
+│   ├── animation/        # 动画系统
+│   │   ├── Tween.js
+│   │   ├── AnimationSystem.js
+│   │   └── AnimationController.js
+│   ├── effects/          # 特效系统
+│   │   └── ParticleSystem.js
+│   ├── ui/               # UI系统
+│   │   └── UI.js
+│   ├── utils/            # 工具类
+│   │   └── EventBus.js   # 事件总线
+│   └── scenes/           # 场景目录
+│       └── index/        # 主场景
+│           ├── index.js  # 场景结构和逻辑
+│           └── index.less # 场景样式
+└── test/                 # 测试文件
+    └── ...               # 各模块测试
+```
+
+## 核心类和API
+
+### Engine 引擎主类
+- `constructor(element, options)` - 创建引擎实例
+- `use(plugin, options)` - 安装插件
+- `load(src)` - 加载资源
+- `loadSound(name, src, options)` - 加载音效
+- `loadMusic(name, src, options)` - 加载音乐
+- `playSound(name, options)` - 播放音效
+- `playMusic(name, options)` - 播放音乐
+- `createScene(name)` - 创建场景
+- `switchScene(name)` - 切换场景
+- `tween(target, duration, easing)` - 创建补间动画
+- `createFrameAnimation(name, frames, frameRate)` - 创建帧动画
+- `playFrameAnimation(sprite, animationName, loop)` - 播放帧动画
+- `addGameObject(obj)` - 添加游戏对象
+- `removeGameObject(obj)` - 移除游戏对象
+- `checkCollision(obj1, obj2)` - 碰撞检测
+- `setCameraPosition(x, y)` - 设置摄像机位置
+- `follow(target, offset)` - 跟随目标
+- `setCameraZoom(zoom)` - 设置摄像机缩放
+- `shakeCamera(intensity, duration)` - 屏幕震动
+- `addUIElement(element)` - 添加UI元素
+- `removeUIElement(element)` - 移除UI元素
+
+### GameObject 游戏对象基类
+- `setPosition(x, y)` - 设置位置
+- `setSize(width, height)` - 设置尺寸
+- `setRotation(rotation)` - 设置旋转角度
+- `setScale(scaleX, scaleY)` - 设置缩放
+- `setVisible(visible)` - 显示/隐藏
+- `addChild(child)` - 添加子对象
+- `removeChild(child)` - 移除子对象
+- `addComponent(name, component)` - 添加组件
+- `getComponent(name)` - 获取组件
+- `removeComponent(name)` - 移除组件
+
+### Component 组件基类
+- `onAdd(gameObject)` - 当组件被添加到游戏对象时调用
+- `onRemove(gameObject)` - 当组件从游戏对象中移除时调用
+- `update(deltaTime)` - 更新方法
+- `onDestroy(gameObject)` - 销毁方法
+
+### 预定义组件
+- `PhysicsComponent` - 物理组件
+- `ColliderComponent` - 碰撞组件
+- `AnimationComponent` - 动画组件
+- `InputComponent` - 输入组件
+- `LifecycleComponent` - 生命周期组件
+
+### UI组件
+- `UIButton` - 按钮
+- `UILabel` - 标签
+- `UIImage` - 图像
+- `UISlider` - 滑块
+
+## 编译时架构
+
+### 构建工具
+- 使用 Vite 作为构建工具
+- 支持 ES6 模块系统
+- 支持 Less CSS 预处理器
+- 支持代码压缩和优化
+- 支持开发服务器热重载
+
+### 开发命令
+```bash
+# 启动开发服务器（热重载）
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# 预览构建结果
+npm run preview
+```
+
+### 场景化开发
+- 使用 `src/scenes/` 目录组织不同场景
+- 每个场景包含 `index.js`（场景逻辑）和 `index.less`（场景样式）
+- 支持类似HTML的标签语法定义场景结构
+
+## 开发约定
+1. 使用ES6模块系统
+2. 遵循面向对象编程原则
+3. 使用JSDoc注释重要函数和类
+4. 保持代码简洁和可读性
+5. 遵循现有的代码风格和命名约定
+6. 使用 Less 作为 CSS 预处理器
+7. 遵循场景化组织结构
+
+## 示例项目
+项目包含一个完整的太空射击游戏示例，展示了引擎的各种功能，位于 `examples/spaceShooter.js` 和 `examples/spaceShooter.html`。