糖饼描摹挑战

它适合想把糖饼描摹挑战网页小游戏｜完整开发提示词 请使用纯前端HTML+CSS+JavaScript开发轻量化网页小游戏，适配电脑、平板，支持鼠标操作，平板/触屏设备可以手指描摹。整体风格软萌可爱，暖米色柔和背景，没有刺眼特效，适合课堂互动、聚会团建休闲小游戏。游戏原型参考抠糖饼玩法：沿着模板轮廓线条描摹，一旦画线脱离规定路径，判定糖饼破碎触发随机小惩罚；完整沿路径描摹闭合图形即为挑战成功。 页面布局 1.页面顶部标题：「糖饼描摹挑战 · 手别抖！」，搭配小羊简约小图标；标题下方放置图形切换选项卡按钮：圆形、三角形、五角星、雨伞，点击按钮切换对应糖饼轮廓模板。 2.页面中间区域：正方形游戏画布，画布内显示双层糖饼轮廓，内层深棕色为允许描摹的行走路径，外层浅黄色糖饼底色边框；画布上方小字提示：「请沿着深色线条滑动描摹」。 3.画布正下方绿色按钮：【开始挑战】；未点击此按钮时，鼠标可以预览图形，不能进行绘画描摹。 4.页面右侧固定面板：「惩罚预设」列表框，内置多条趣味轻松小惩罚项目，底部红色按钮【随机选一个】。惩罚全部为轻松娱乐，无羞辱、无高强度运动，适合学生群体。 5.弹窗组件：挑战失败弹出弹窗，标题“哎呀！糖饼碎了！”，展示本次随机抽到的惩罚内容，弹窗内放置按钮【再试一次】；挑战成功弹出弹窗“太棒啦！糖饼完好无损！”，提供【下一个图形】、【重新挑战】按钮。 核心游戏逻辑规则（重点） 1.初始状态：仅展示糖饼轮廓模板，画笔绘画功能锁定；点击「开始挑战」之后，才开启描摹绘画。 2.玩家操作：鼠标按住不放，沿着深色内侧轮廓路径绘制轨迹；触屏设备手指按压滑动绘制绿色笔迹，实时显示自己画出来的线条。 3.路径判定规则： ①玩家绘制的笔迹，持续脱离允许的深色路径范围超过阈值，立刻判定挑战失败；只要笔触离开轨道，不用画完直接触发糖饼破碎。 ②完整沿着路径描摹一圈，线条首尾闭合，轨迹偏差在允许范围之内 → 判断挑战通关成功。 ③绘画中途松开鼠标，没有完成闭合轮廓，不算失败，再次按住可以继续描摹；只有线条越界跑出路径才触发失败惩罚。 4.图形素材：4套内置轮廓模板：正圆形、等边三角形、五角星、雨伞轮廓；切换图形之后重置画布，清空之前绘画笔迹，回到待挑战状态。 5.惩罚池内容：学猫叫三声、做一个鬼脸、单脚原地跳一圈、大声说一句鼓励自己的话、模仿大猩猩动作；点击随机选一个，从惩罚池随机抽取一条。 6.失败弹窗触发后，自动锁定画布绘画，点击【再试一次】清空笔迹，回到当前图形重新挑战。 UI视觉与动画要求 1.整体配色：暖米黄底色，糖饼轮廓深棕色，糖饼外围浅米黄色，玩家绘画笔迹清新浅绿色；按钮圆角大弧度，柔和阴影，卡通简约UI。 2.动画：失败弹窗弹出搭配简易爆炸星光小动画；成功弹窗搭配星星闪烁效果；所有过渡动画缓慢柔和，禁止闪烁频闪特效。 3.画布层级：UI按钮、弹窗永远在画布图层上方，不会被绘画内容遮挡，避免按钮点不动卡死。 4.重置逻辑：切换图形、重新挑战的时候，必须清空用户绘画笔迹，只保留糖饼模板轮廓。 禁止项 1.不要接入AI绘图，全程前端本地几何路径判定，不需要调用大模型；游戏靠JS计算轨迹和路径距离，不是AI识别图片。 2.惩罚项目不能出现羞辱、恶意恶搞内容，全部偏向轻松娱乐，适配校园课堂场景。 3.不要增加倒计时压力，游戏不限时间，慢慢描摹也可以，只约束绘画轨迹，没有时间限制。 4.不要增加复杂登录、注册功能，打开网页直接就可以玩。 完整游戏流程 1.进入网页，默认选中圆形糖饼模板，展示画布图形，可自由切换三角形、五角星、雨伞。 2.点击【开始挑战】，解锁绘画功能，按住鼠标沿着深色线条描摹。 3.情况A：笔迹跑出路径范围 → 弹出失败弹窗，展示随机惩罚，点击再试一次重新游玩。 4.情况B：完整描摹闭合走完一圈路径 → 弹出成功弹窗，可以选择换图形或者重玩当前关卡。 5.右侧惩罚面板可以随时点击随机选一个，提前预览惩罚内容。 验收标准 1.切换图形正常清空笔迹；没有点击开始挑战时画不出线条。 2.越界立刻判定破碎，完整闭合描摹判定成功；松开鼠标可以接续绘画，不会直接失败。 3.弹窗可以正常关闭，按钮不会被画布遮挡，网页打开直接运行，无需后端服务。 4.触屏手机、平板可以手指滑动描摹，鼠标电脑端操作流畅。理顺的同学，减少反复翻找和来回切换。 公开版会先保留最核心的使用场景，方便别人快速理解这件作品能做什么。 这一版还补充了调整了作品设定与行为规则，更适合直接拿来体验。