# 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`。