🎆 烟花模拟器 Fireworks Simulator
一个美丽的交互式烟花模拟器，支持多种烟花效果、自定义文字显示和音效播放。
任务：创建一个星空烟花模拟器的HTML代码要求：1. 使用HTML5 Canvas绘制烟花效果。2. 使用Web Audio API播放烟花升起和爆炸的声音。3. 由于声音文件可能较大，使用base64编码嵌入音频文件，避免跨域问题和外部依赖。4. 提供两个简短的base64编码音频示例：一个为升空声音，一个为爆炸声音。5. 考虑到代码长度限制，使用非常短的示例声音（例如正弦波生成的音效）来模拟真实音效。6. 所有代码应包含在一个HTML文件中。7. 提供用户界面元素，如按钮（开始表演、停止表演、清除烟花）和滑动条（调整烟花强度和爆炸高度）。
✨ 功能特性
🎯 核心功能
- 鼠标点击烟花：点击画布任意位置创建烟花
- 自动烟花表演：可调节强度的连续烟花表演
- 全屏模式：沉浸式观看体验
- 音效控制：可调节音量的爆炸和发射音效
💖 特色烟花
- 520爱心烟花：浪漫的爱心形状烟花，带有"520"文字显示
- 自定义文字烟花：输入任意文字，以150px超大字体居中显示5秒
- 彩色粒子效果：丰富的色彩和粒子轨迹
🎮 控制面板
- 烟花强度调节：1-10级强度控制
- 爆炸高度设置：0.1-0.8范围调节
- 音量控制：0-100%音量调节
- 截图保存：一键保存当前烟花画面
🚀 快速开始
在线体验
访问：GitHub Pages
本地运行
bash
# 克隆项目
git clone https://github.com/xiaoweiruby/fireworks-simulator.git
# 进入项目目录
cd fireworks-simulator
# 启动本地服务器
python3 -m http.server 8000
# 访问 http://localhost:8000/fireworks_simulator.html🎯 使用说明
基本操作
- 开始体验：点击"开始体验"按钮进入主界面
- 创建烟花 ：
- 鼠标点击画布任意位置
- 使用控制面板按钮
- 自定义文字：在输入框中输入文字，点击"文字烟花"或按回车键
- 调节设置：使用滑块调节强度、高度和音量
- 保存截图：点击"保存烟花"按钮下载当前画面
快捷键
- Enter：创建文字烟花（需先在输入框中输入文字）
- F11：全屏切换（部分浏览器支持）
🛠️ 技术实现
核心技术
- HTML5 Canvas：图形渲染和动画
- JavaScript ES6+：面向对象编程和动画控制
- CSS3：现代UI设计和动画效果
- Web Audio API：音效播放
主要特性
- 粒子系统：基于物理的粒子运动模拟
- 色彩系统：HSL色彩空间实现丰富渐变
- 音效系统：Base64编码的内嵌音效
- 响应式设计：适配不同屏幕尺寸
📁 项目结构
bash
fireworks-simulator/
├── fireworks_simulator.html # 主页面文件
├── vercel.json # Vercel部署配置
├── .vercelignore # Vercel忽略文件
├── .vercel/ # Vercel项目配置
└── README.md # 项目说明文档🎨 设计特色
视觉效果
- 玻璃态设计：半透明背景和模糊效果
- 渐变色彩：丰富的色彩搭配
- 粒子轨迹：真实的物理运动效果
- 发光效果：文字和粒子的光晕效果
用户体验
- 直观操作：简单易懂的交互方式
- 即时反馈：实时的视觉和听觉反馈
- 流畅动画：60FPS的流畅动画效果
- 沉浸体验：全屏模式和音效支持
🌟 更新日志
v1.0.0 (2025-08-29)
- ✅ 初始版本发布
- ✅ 基础烟花效果
- ✅ 520爱心烟花功能
- ✅ 自定义文字烟花
- ✅ 音效系统
- ✅ 控制面板优化
- ✅ 截图保存功能
🤝 贡献指南
欢迎提交Issue和Pull Request！
开发规范
- 遵循 Conventional Commits 提交规范
- 使用中文注释
- 保持代码简洁和可读性
📄 许可证
MIT License - 详见 LICENSE 文件
🙏 致谢
感谢所有为这个项目贡献代码和建议的开发者！
🎆 享受美丽的烟花表演吧！