春节福袋连连看
简单介绍
春节福袋连连看 是一个充满春节氛围的休闲益智类网页游戏。游戏以传统连连看玩法为基础，融入了春节文化元素、福袋奖励系统、成就收集系统和多种游戏模式。
本项目使用 iFlow CLI 的 glm-4.7 模型完成基础功能开发，后续使用 kimi-k2-thing 模型进行问题修复。
技术栈
- HTML5 + CSS3 + Vanilla JavaScript
- Web Audio API：游戏音效
- LocalStorage：数据持久化
- CSS3 动画：交互效果
- Canvas API：绘制连接线
实现过程
开发流程
本项目采用多轮对话迭代的开发方式，通过不同模型的协作完成。
第一阶段：生成项目提示词（glm-4.7）
-
与 glm-4.7 对话，描述项目需求：
- 春节主题连连看游戏
- 包含福袋奖励系统
- 成就收集系统
- 多种游戏模式
-
获取详细的项目提示词（Prompt），包含：
- 项目架构建议
- 文件结构规划
- 核心功能实现思路
- 技术选型建议
第二阶段：创建项目（glm-4.7）
- 开启新的对话会话
- 将第一阶段获得的提示词输入
- 指示模型根据提示词生成完整项目代码
- 生成内容包括：
index.html主页面css/style.css样式文件js/目录下的所有功能模块- 游戏数据、音效、存储、成就、福袋等系统
第三阶段：测试与问题收集
-
在浏览器中打开生成的页面
-
进行全面测试：
- 游戏核心玩法测试
- 成就系统测试
- 响应式布局测试
- 不同浏览器兼容性测试
-
记录发现的问题：
- 成就解锁后状态未正确保存
- 部分成就触发条件判断有误
- 页面在特定屏幕宽度下元素错位
- 右侧福袋进度区域与游戏面板重叠
第四阶段：问题修复（kimi-k2-thing）
- 将测试遇到的问题直接复制到 iFlow
- 切换至 kimi-k2-thing 模型
- 提供问题描述和相关代码片段
- 模型分析并修复：
- 修复
achievements.js中的成就判断逻辑 - 修正
style.css中的响应式布局 CSS - 调整
ui.js中的界面渲染逻辑
- 修复
第五阶段：验证修复
- 重新测试修复后的功能
- 确认成就系统正常工作
- 验证页面在各尺寸屏幕下显示正确
- 进行最终验收测试
