春节简笔画挑战小游戏
项目预览
项目过程
全程使用iflow-CLi智能模式进行编写，首先编写了设计文档和开发文档两个文件，让iflow-cli获取并理解这两份文件。通过几轮对话大致实现了我想要的效果，总体就花了大概半个小时左右，接下来我也会把代码放到我的GitHub仓库中，大家也可以尝试来复刻或改进！
全程主要使用GLM-4.7来进行编写，优点上下文比较多，生成的速度也很快理解的也很到位，缺点也很明显，简笔画做的很偏离实际，希望官方早点开放KIMI-V2.5，真的很需要图片的理解能力
以下内容由IFlow CLI总结
项目简介
春节简笔画挑战游戏是一款以春节为主题的Web端简笔画描摹游戏。用户通过鼠标描摹随机生成的春节元素简笔画模板，系统根据描摹准确度进行评分，并赠送个性化马年春节祝福语。
核心功能
-
模板系统
- 10个春节元素：福字、灯笼、金元宝、舞狮、龙、祥云、春联、鞭炮、鲤鱼、马
- 三个难度等级：简单（3-5笔）、中等（6-10笔）、困难（11-20笔）
- 随机生成算法，每次游戏随机选择元素和变体
-
游戏画布
- 分层画布设计：底层模板（半透明灰色）、用户绘制层（红色画笔）
- 绘制工具：画笔粗细调节（3档）、撤销功能、清空功能
- 支持鼠标和触控操作
-
评分系统
- 位置匹配度（40%）：用户轨迹与模板关键点的位置偏差
- 形状相似度（30%）：整体轮廓的相似性
- 笔画顺序度（20%）：笔画方向和顺序的合理性
- 完成度（10%）：是否完整描绘所有部分
- 星级评价（1-5星）
-
祝福系统
根据评分提供个性化马年春节祝福：- 90-100分：“马到功成！您画的龙马精神，新年必定一马当先！”
- 80-89分：“龙马精神！您笔下生辉，马年定能马到成功！”
- 70-79分：“一马当先！您的画作充满年味，新春快乐！”
- 60-69分：“马年吉祥！勤加练习，必能画龙点睛！”
- 60分以下：“新年新起点！多画多福，马年更上一层楼！”
-
游戏模式
- 自由练习：自选春节元素，无限制练习
- 每日挑战：每日解锁新主题元素，记录最佳成绩
- 随机挑战：随机匹配难度，挑战最高分
-
挑战记录
- 本地存储游戏记录（最多100条）
- 统计数据：总游戏数、最高分、平均分、最佳作品等
- 绘画轨迹缩略图：支持查看历史作品的绘画轨迹
- 点击缩略图可查看完整绘画
技术栈
- 前端框架：Vue 3 + TypeScript
- 构建工具：Vite
- 路由：Vue Router 4
- 绘图技术：HTML5 Canvas
- 数据存储：localStorage（纯前端方案）
- 样式方案：CSS3 + 毛玻璃效果
实现过程
第一阶段：项目初始化
-
初始化项目
npm create vite@latest . -- --template vue-ts使用Vite创建Vue 3 + TypeScript项目
-
配置文件
vite.config.ts：Vite配置，设置开发服务器端口tsconfig.json：TypeScript配置，启用严格模式package.json：项目依赖和脚本配置
-
基础结构
src/ ├── components/ # 组件 ├── views/ # 页面 ├── data/ # 数据 ├── types/ # 类型定义 ├── utils/ # 工具函数 ├── router/ # 路由 ├── App.vue # 根组件 └── main.ts # 入口文件
第二阶段：数据结构设计
-
类型定义 (
src/types/game.ts)export interface Point { x: number; y: number; } export interface Stroke { points: Point[]; order: number; } export interface Template { id: string; name: string; difficulty: 'easy' | 'medium' | 'hard'; strokes: Stroke[]; keyPoints: Point[]; thumbnail: string; } -
模板数据 (
src/data/templates.ts)- 创建10个春节元素的简笔画模板
- 使用相对坐标系统（0-100）确保响应式适配
- 每个模板包含笔画顺序、关键点等信息
-
祝福语数据 (
src/data/blessings.ts)- 根据分数段配置不同的祝福语
第三阶段：核心组件开发
-
游戏画布组件 (
src/components/GameCanvas.vue)- 双层Canvas设计：模板层和绘制层
- 实现鼠标和触控绘制功能
- 支持撤销和清空操作
- 实时计算绘制进度
-
工具面板组件 (
src/components/ToolPanel.vue)- 画笔粗细选择（3档：细、中、粗）
- 撤销按钮
- 清空按钮
-
模板预览组件 (
src/components/TemplatePreview.vue)- 显示当前模板的小型预览
- 展示笔画数和关键点数
-
评分展示组件 (
src/components/ScoreDisplay.vue)- 显示总分和星级
- 展示四个维度的详细评分
- 使用进度条可视化展示
-
结果弹窗组件 (
src/components/ResultModal.vue)- 弹窗展示游戏结果
- 显示祝福语
- 提供"再玩一次"和"下一个"按钮
第四阶段：页面开发
-
首页 (
src/views/HomeView.vue)- 游戏标题和副标题
- 难度选择（简单/中等/困难）
- 游戏模式选择（自由练习/每日挑战/随机挑战）
- 春节元素库展示（10个元素）
- 查看记录入口
-
游戏页 (
src/views/GameView.vue)- 游戏画布区域
- 工具面板
- 模板预览
- 绘制进度显示
- 完成绘制按钮
- 结果弹窗
-
记录页 (
src/views/RecordsView.vue)- 统计数据面板
- 历史记录列表
- 绘画轨迹缩略图
- 完整绘画查看弹窗
第五阶段：评分算法实现
-
位置匹配算法 (
src/utils/scoring.ts)function calculatePositionMatch(template, userStrokes) { // 计算用户轨迹与模板关键点的平均距离 // 距离越小，得分越高 } -
形状相似算法
function compareStrokeShapes(stroke1, stroke2) { // 比较笔画长度、宽高比等特征 // 综合评估形状相似度 } -
笔画顺序算法
function calculateOrderMatch(template, userStrokes) { // 检查用户绘制的笔画顺序是否正确 // 计算正确笔画的比例 } -
完成度算法
function calculateCompletion(template, userStrokes) { // 计算用户完成的笔画数占总笔画数的比例 }
第六阶段：记录系统实现
-
类型定义 (
src/types/record.ts)export interface GameRecord { id: string; templateId: string; templateName: string; difficulty: Difficulty; mode: GameMode; score: number; stars: number; positionMatch: number; shapeMatch: number; orderMatch: number; completion: number; blessing: string; timestamp: number; date: string; strokes?: Stroke[]; // 绘画轨迹数据 } -
存储工具 (
src/utils/storage.ts)export function saveRecord(record: GameRecord) { // 保存记录到localStorage // 最多保存100条记录 } export function getRecords(): GameRecord[] { // 从localStorage读取记录 } export function getRecordStats(): RecordStats { // 计算统计数据 } -
绘画轨迹组件
DrawingThumbnail.vue：缩略图组件DrawingModal.vue：完整绘画查看弹窗
第七阶段：UI/UX优化
-
春节主题设计
- 红色渐变背景：
linear-gradient(135deg, #c41e3a 0%, #8b0000 100%) - 金色点缀：
#ffd700 - 毛玻璃效果：
backdrop-filter: blur(10px)
- 红色渐变背景：
-
动画效果
- 悬停动画：元素放大、阴影增强
- 弹窗动画：滑入效果
- 浮动动画：装饰元素上下浮动
-
响应式设计
- 使用CSS Grid和Flexbox
- 适配不同屏幕尺寸
- 移动端友好的触摸操作
第八阶段：功能完善
-
难度选择优化
- 默认难度改为简单
- 调整页面布局顺序：难度选择 → 游戏模式 → 元素库
- 确保选择的难度能实际生效
-
元素库完整展示
- 显示所有10个春节元素
- 按难度分类标识
- 支持点击选择具体元素
-
Footer添加
- 在页面底部添加footer信息
- 显示"本页面由iFlow制作"
-
Favicon更新
- 创建符合春节主题的SVG图标
- 包含红色渐变背景、金色星星等元素
项目结构
newyear-game/
├── public/
│ └── favicon.svg # 网站图标
├── src/
│ ├── components/ # 组件
│ │ ├── GameCanvas.vue # 游戏画布
│ │ ├── ToolPanel.vue # 工具面板
│ │ ├── TemplatePreview.vue # 模板预览
│ │ ├── ScoreDisplay.vue # 评分展示
│ │ ├── ResultModal.vue # 结果弹窗
│ │ ├── DrawingThumbnail.vue # 绘画缩略图
│ │ └── DrawingModal.vue # 绘画查看弹窗
│ ├── views/ # 页面
│ │ ├── HomeView.vue # 首页
│ │ ├── GameView.vue # 游戏页
│ │ └── RecordsView.vue # 记录页
│ ├── data/ # 数据
│ │ ├── templates.ts # 模板数据
│ │ └── blessings.ts # 祝福语数据
│ ├── types/ # 类型定义
│ │ ├── game.ts # 游戏相关类型
│ │ └── record.ts # 记录相关类型
│ ├── utils/ # 工具函数
│ │ ├── scoring.ts # 评分算法
│ │ └── storage.ts # 存储工具
│ ├── router/ # 路由
│ │ └── index.ts # 路由配置
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── style.css # 全局样式
├── index.html # HTML入口
├── vite.config.ts # Vite配置
├── tsconfig.json # TypeScript配置
└── package.json # 项目配置
开发命令
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run preview
技术亮点
-
Canvas绘图
- 双层Canvas设计，模板与用户绘制分离
- 支持鼠标和触控，兼容移动端
- 实时绘制进度反馈
-
评分算法
- 多维度评分：位置、形状、顺序、完成度
- 动态时间规整（DTW）思想应用于轨迹匹配
- 加权计算综合得分
-
数据持久化
- 使用localStorage本地存储
- 自动限制记录数量（100条）
- 支持记录的增删查统计
-
组件化设计
- 高度模块化的组件结构
- 组件间通过props和events通信
- 可复用的缩略图和弹窗组件
-
TypeScript支持
- 完整的类型定义
- 编译时类型检查
- 提高代码可维护性
浏览器兼容性
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- 移动端浏览器（iOS Safari, Chrome Mobile）
后续扩展计划
-
社交功能
- 分享成绩到社交媒体
- 生成带成绩的海报图片
- 好友排行榜
-
音效系统
- 绘制音效
- 完成庆祝音效
- 背景音乐开关
-
成就系统
- 连续绘制成就
- 完美绘制成就
- 收集所有元素成就
-
主题扩展
- 更多节日主题（中秋、端午等）
- 自定义主题颜色
- 夜间模式
开发工具：iFlow CLI
开发时间：2026年2月
版本：1.0.0