项目简介
马年烟花设计师是一个基于 HTML5 Canvas 的互动式春节主题网页游戏。玩家可以通过左侧的"工匠工具箱"自由调整烟花的类型、颜色、爆炸高度、范围、尾迹效果等参数，设计出独一无二的春节烟花，然后在夜空中燃放欣赏。游戏还支持汉字图案功能，烟花爆炸后可以形成"福"、“春”、“马”、“喜”、"吉"等充满年味的汉字。
整个项目采用纯原生前端技术栈实现，不依赖任何第三方库，加载速度快，兼容性好。视觉设计融合了中国传统元素，深蓝色夜空背景配以闪烁星星和远处城市灯光，烟花粒子使用朱红、明黄、靛青、金橙等中国传统颜色，控制面板设计成古代工匠工具箱样式，营造出浓郁的新年氛围。
使用到的 iFlow CLI 功能
在开发这个马年烟花设计师项目的过程中，我主要使用了以下 iFlow CLI 核心功能：
write_file 工具是最主要的代码编写手段，用于创建完整的 HTML 文件。由于这是一个单页面应用，所有 HTML 结构、CSS 样式和 JavaScript 逻辑都整合在一个文件中，通过 write_file 工具一次性写入完成。工具支持绝对路径的文件操作，确保文件准确保存到指定位置。
task 任务工具中的 frontend-tester 子功能用于验证页面功能。在完成代码编写后，我调用了前端测试代理对页面进行全面验证，检查 Canvas 渲染是否正常、控制面板是否可见、JavaScript 是否有错误等。测试代理会模拟浏览器环境并返回详细的验证报告，确保项目质量。
todo_write/todo_read 任务管理工具帮助我规划和追踪开发进度。虽然这个项目相对简单，但我仍然使用待办列表记录了主要步骤，包括代码编写和前端验证两个关键任务，确保开发流程有序进行。
实现过程
整个开发过程分为构思、设计和实现三个阶段。
构思阶段我首先分析了用户需求，明确了核心功能：烟花粒子效果、物理模拟算法、参数控制面板、截图保存功能等。考虑到春节主题，确立了朱红、明黄等传统配色方案，以及"福"、"春"等汉字图案功能。技术选型上决定采用原生 HTML5 Canvas API 来实现粒子系统，这样既不需要引入外部库，又能保证良好的渲染性能。
设计阶段我规划了页面的整体布局：画布占满全屏作为夜空背景，控制面板悬浮在左侧，标题和装饰元素放置在右上角。星空背景使用随机生成的星星数组，每个星星都有独立的闪烁相位参数。城市灯光则通过分层渲染的方式，模拟出远近不一的建筑剪影效果。控制面板采用深褐色木质纹理配色，边框使用金色，模仿古代工匠工具箱的视觉风格。
实现阶段我首先搭建了 Canvas 渲染框架，包括背景绘制函数和主循环动画系统。然后编写了粒子系统核心代码，实现 Rocket（火箭）和 Particle（粒子）两个类，火箭负责将烟花从地面输送到目标高度，粒子负责爆炸后的视觉效果。粒子系统加入了重力模拟、空气阻力、透明度衰减等物理参数，使运动轨迹更加自然真实。针对不同烟花类型（球形、柳条形、菊花形、牡丹形），我调整了粒子的速度向量计算方式和数量分布参数。汉字图案功能则通过离屏 Canvas 绘制文字并提取像素点坐标来生成粒子位置。颜色选择器支持多选，但限制最多三种颜色混合。截图功能通过临时隐藏 UI 元素、调用 Canvas toDataURL API 实现。
体验链接
技术亮点总结
这个项目虽然代码量不大，但包含了多个值得学习的前端技术点。Canvas 粒子系统是核心，通过面向对象的方式封装了 Rocket 和 Particle 类，实现了良好的代码组织和扩展性。物理模拟方面加入了重力加速度和空气阻力系数，使粒子运动轨迹符合真实物理规律。汉字图案功能利用离屏 Canvas 进行像素提取和坐标映射，是 Canvas API 的高级应用。闪烁星星和动态装饰元素增加了页面的视觉层次感和节日氛围。
整个项目展示了如何使用原生前端技术快速构建一个视觉效果出色、交互丰富的互动网页应用，为春节主题项目开发提供了参考范例。
