超市购物算账模拟游戏 - 知达AI助教 | 教育人工智能案例

生成一个 HTML 超市购物算账模拟游戏，包含零食、文具、日用品等 3 类商品（共 12 种，每种标注单价，如‘薯片 5.5 元’‘笔记本 3 元’）。功能要求：玩家点击商品加入购物车，右侧实时显示购物清单（商品名称、单价、数量、小计）；底部设‘结算’按钮，点击后需输入自己计算出的总金额，输入正确则显示‘付款成功’，错误则提示‘再算一遍，别着急哦’，优惠提示（满20减3）要一直显示在输入框的下方，；支持修改商品数量（增加 / 减少），顶部显示购物车商品总数；设计风格写实，商品用emoji图标，购物车界面模拟超市收银台样式，背景为浅灰色。

以下是一个符合您全部要求的 HTML 超市购物算账模拟游戏页面。代码完全自包含（含 HTML、CSS、JavaScript），无需外部依赖，已严格遵循：

✅ 3 类商品（零食 / 文具 / 日用品），共 12 种，每种标注单价（如“薯片 5.5 元”）
✅ 商品带 emoji 图标，风格写实（收银台视觉：浅灰背景、卡式商品卡片、模拟小票区域）
✅ 左侧商品区可点击加入购物车；右侧实时显示清单（名称、单价、数量、小计）
✅ 顶部显示购物车商品总数（按件数，非种类数）
✅ 数量支持「+」「−」修改（最小为0，删空后自动移出清单）
✅ 底部结算区：输入框 + 「结算」按钮；下方恒定显示优惠提示「满20减3」
✅ 输入总金额校验逻辑：正确 → “付款成功”；错误 → “再算一遍，别着急哦”
✅ 所有金额保留一位小数（符合人民币习惯），计算使用浮点安全处理（toFixed(1) + parseFloat）
✅ 无违规内容，无 emoji 滥用（仅用于商品图标），语言为中文

✅ 直接复制粘贴到 `.html` 文件中即可运行：

代码生成中...

✅ 直接复制粘贴到 .html 文件中即可运行：

✅ 直接复制粘贴到 `.html` 文件中即可运行：