血糖战士：使用AI构建真实游戏的设计师实践

游戏机制：快速点击，更快思考

游戏循环

• 每轮游戏时长一分钟
• 食物从空中落下，玩家点击收集
• 血糖仪根据食物选择产生反应
• 健康食物降低血糖值并得分
• 垃圾食物使血糖飙升，扣分并打断连击
• 提供两种能量道具：运动（降低50点）和糖分冲击（提升25点）

评分系统

游戏结束时计算得分和血糖平均值，包括在"健康"范围内的时间百分比。要获得良好评价，需要同时兼顾高分和稳定的血糖控制。

技术架构与开发流程

AI平台选择与初始设置

使用Lovable.dev平台构建应用，技术栈基于React、Tailwind和Framer Motion。初始提示词要求开发类似水果忍者的移动触摸游戏，但主题改为2型糖尿病教育。

美术设计与像素艺术

• 使用Aseprite创建和编辑美术资源
• 采用8位和16位风格像素艺术
• 整合79个食物资源用于游戏玩法
• 使用ChiKareGo2和Lo-Res位图字体保持主题一致性

音频系统实现

1
2
3

// 移动浏览器音频池系统
// 重复逻辑防止快速点击造成声音混乱
// Web Audio不可用时的回退机制

音频文件需要特定格式（WAV用于某些场景，OGG用于其他场景），标准化音量，并添加尾部静音防止剪辑。

游戏逻辑与平衡设计

1
2
3
4
5
6
7

const BASE_DIFFICULTY = {
  PHYSICS_TICK_MS: 20,
  CLOUD_TO_APPEAR_MS: 300,
  APPEAR_TO_VISIBLE_MS: 500,
  GRAVITY_PER_TICK: 0.5,
  TERMINAL_VY: 12,
} as const;

食物影响系统

每个食物物品在foodLibrary中存储bloodSugarImpact值：

• 非淀粉类蔬菜：-3到+1
• 健康脂肪：-2到0
• 精益蛋白质：-1到0
• 低糖水果：+2到+5
• 精制碳水化合物/加工食品：+16到+40

评分算法

1
2
3
4
5
6

// 状态加权平均配置
export const BLOOD_SUGAR_AVG_WEIGHTS = {
  normal: 1.0,
  warning: 1.8,
  critical: 2.5,
} as const;

技术挑战与解决方案

性能优化

• 早期未规划精灵图，导致同时加载79个独立资源
• 解决方案：添加样式化即时加载器，在开始屏幕后分层预热资源
• 关键UI优先加载，效果和较少看到的精灵稍后加载

移动端适配

• 使用动态视口单位适应iOS和Android地址栏
• 安全区域填充和紧凑HUD设计
• 设置为PWA，但优先确保浏览器体验

开发工具集成

• 使用GitHub进行版本控制和资源管理
• Figma到React插件导出代码
• 使用Cursor和Copilot清理和优化代码

AI协作经验总结

工作流程

1. 在Figma和Aseprite中设计
2. 用通俗语言解释需求
3. 要求AI输出符合意图的代码
4. 调试和优化

技术洞察

• AI擅长搭建脚手架，但难以实现具体创意愿景
• 需要明确的指令文件定义编码方法和技术栈
• 结合使用ChatGPT或Copilot进行调试，避免消耗过多信用额

开发建议

• 早期规划HTTP请求瓶颈
• 为移动浏览器音频准备池系统和双重编码
• 在开始构建前锁定动画引擎以匹配艺术策略
• 重视跨平台测试，特别是iOS音频问题

通过三个月的开发过程，作者成功将AI作为技术协作工具，实现了作为设计师独立完成完整游戏开发的目标，同时深入掌握了游戏机制设计、性能优化和跨平台适配等关键技术要点。