《Chloe’s Café｜我的迷你咖啡店》

请直接帮我制作一个真正可以玩的网页小游戏：

《Chloe’s Café｜我的迷你咖啡店》

我要用它拍 Instagram Reels，并分享给朋友试玩。请完成整个游戏，包括视觉素材、界面、游戏逻辑和手机适配。

【一、游戏概念】

玩家经营一家温柔粉色的迷你咖啡店，在 60 秒内根据顾客订单，按照配方顺序加入原料，制作并送出咖啡，挑战更高分数。

打开就是游戏开始画面，点击“开始营业”即可玩。

【二、整体视觉】

配色：柔和粉色、奶油白、焦糖色、咖啡棕，少量香槟金点缀。

风格：精致可爱的立体迷你咖啡馆，有温暖阳光、细腻材质和空间感。

店内需要：
• 粉色咖啡机。
• 放着牛角包和草莓蛋糕的甜品柜。
• 拱形窗户与洒进来的阳光。
• 奶油色操作台。
• 精致咖啡杯、托盘和原料容器。

如果我上传了封面图，请参考它的配色、材质和氛围，让游戏与封面属于同一个系列。

请生成原创咖啡馆背景素材。背景不要包含文字、按钮或分数，所有可交互界面另外实现。

让操作台、咖啡杯和按钮自然融入场景。不要只是把一张背景图放在普通网页后面。

【三、开始画面】

清楚显示：
Chloe’s Café
我的迷你咖啡店

一句说明：
“60 秒，你能完成几杯咖啡？”

按钮：
“开始营业”

附上简单玩法：
看订单 → 按顺序加原料 → 点击出杯。

开始前可以查看配方；进入游戏后仍能随时查看。

【四、完整玩法】

每局 60 秒，同时接待一位顾客。

每位顾客有 15 秒耐心时间，以清晰的进度条显示。

第一局的前三张订单依次为：

1. 美式咖啡。
2. 拿铁。
3. 摩卡。

之后随机出现订单，尽量避免连续重复同一种。

提供六个可点击的原料按钮：

1. 浓缩咖啡。
2. 热水。
3. 牛奶。
4. 巧克力酱。
5. 焦糖酱。
6. 冰块。

每个按钮都有清楚的图标和中文名称。

点击原料后：
• 原料进入当前咖啡杯。
• 杯中出现对应的颜色、液体层次或冰块。
• 显示已经加入的原料及顺序。
• 有简短、轻快的加入动画。

提供两个操作按钮：
“清空重做”
“出杯”

清空只重置杯子，不重置顾客耐心或整局时间。

【五、配方】

请严格按下面的原料顺序判断：

美式咖啡：
浓缩咖啡 → 热水。

拿铁：
浓缩咖啡 → 牛奶。

摩卡：
浓缩咖啡 → 巧克力酱 → 牛奶。

焦糖拿铁：
浓缩咖啡 → 焦糖酱 → 牛奶。

冰拿铁：
冰块 → 浓缩咖啡 → 牛奶。

顺序不对、少加或多加都算制作错误。

配方提示必须使用同一份配方数据，确保显示和判定一致。

【六、出杯与计分】

制作正确：
• 加 10 分。
• 显示“出杯成功！+10”。
• 顾客出现开心反馈。
• 杯子送到取餐区。
• 自动清空操作杯，并出现下一位顾客。

制作错误：
• 扣 5 分，最低为 0 分。
• 显示“配方不对，再试一次”。
• 当前顾客保留，耐心继续减少。
• 自动清空杯子，允许重新制作。

顾客耐心耗尽：
• 顾客离开，漏单数加 1。
• 显示“顾客等太久啦”。
• 清空杯子，出现下一位顾客。

空杯不能出杯。

出杯动画期间暂时锁定原料和出杯按钮，防止重复计分。

【七、游戏界面】

顶部简洁显示：
• 剩余时间。
• 当前分数。
• 已完成杯数。

中间显示：
• 顾客及订单。
• 顾客耐心进度条。
• 咖啡店场景。
• 正在制作的咖啡杯。

底部显示：
• 六种原料按钮。
• 清空重做。
• 出杯。

另外提供：
• 配方查看。
• 暂停／继续。
• 音效开关。

界面文字以中文为主，店名保留 Chloe’s Café。

文字必须清晰，不能因为粉色背景而看不清楚。重要按钮要一眼能找到。

【八、动画和声音】

加入适度的细节：
• 热咖啡轻轻冒蒸汽。
• 点击原料时有倒入动画。
• 出杯成功时有小星星或爱心反馈。
• 顾客离开时有简短过渡。
• 最后 10 秒，倒计时有明显提醒。

音效轻柔，提供开关。不要在用户尚未操作时强行播放声音。

动画不能阻碍操作，也不能遮住订单。

【九、结束画面】

60 秒结束时立即停止接单、操作和计分。

显示：
“今日营业结束！”

成绩包括：
• 总分。
• 成功完成的咖啡杯数。
• 制作错误次数。
• 漏单数。

根据成绩给一句鼓励，例如：
“第一天开店，也很不错！”
“今天的咖啡师状态在线！”
“你就是这家店的招牌咖啡师！”

提供明显按钮：
“再营业一次”

重新开始必须完整重置时间、分数、订单、杯子、顾客耐心和所有统计，不能沿用上一局状态。

【十、手机与电脑】

手机竖屏优先，电脑也能玩。

手机上：
• 主要操作区尽量在一屏内。
• 原料按钮足够大，适合手指点击。
• 订单、咖啡杯和操作按钮不能互相遮挡。
• 不要横向滚动。
• 不要因为连续点击而误触页面缩放。

电脑上：
• 鼠标即可操作。
• 场景适应横屏，保持合理比例。
• 不要把手机布局直接拉宽变形。

【十一、运行要求】

不需要登录、付款、排行榜或后台。

游戏状态可以在浏览器本地运行。

暂停时，整局倒计时和顾客耐心必须同时停止；继续时恢复。切换标签页或离开页面时自动暂停。

使用真实时间计算倒计时，避免设备变慢导致一局超过 60 秒。

如果素材生成不可用，请用完整的程序绘制素材完成游戏，不能出现空白区域、损坏图片或占位框。

【十二、完成与检查】

请直接完成游戏，不要只提供设计说明或部分代码。

完成后检查：
• 开始营业是否能进入游戏。
• 五种饮品是否能按配方正确出杯。
• 顺序错误、多加和少加是否被正确判断。
• 清空是否不会重置顾客耐心。
• 出杯是否会重复计分。
• 顾客超时是否正确换人。
• 暂停与继续是否正常。
• 60 秒结束后是否停止操作。
• 再玩一次是否彻底重置。
• 手机尺寸下文字与按钮是否清晰可用。

如果环境支持浏览器测试，请实际试玩，并如实说明验证结果。

如果环境支持部署，请提供可打开的试玩链接；否则交付完整可运行的 HTML 文件，尽量将 CSS、JavaScript 和素材内嵌，并说明如何打开。

请现在开始制作。