用 TraeCode 做了一款画线弹月饼的中秋小游戏

月光弹板 · 中秋大冒险》 —— 一款用手指画线当弹板的中秋主题小游戏。

拖动画一条线,掉落的月饼碰到线就会弹飞,把月饼弹进底部的团圆篮得分。炸弹不能进篮,得画线把它弹开。线条5秒后消散,需要持续重画,连击越高分越多。

![游戏画面](贴截图)

核心玩法特色:

  • :writing_hand: 画线 = 月光弹板,一碰就弹(镜面反射物理)
  • :moon_cake: 4种月饼随机掉落(金/豆沙/冰皮/抹茶)
  • :bomb: 炸弹机制,考验你的快速反应
  • :fire: 连击系统 + 速度递增难度
  • :full_moon: 中秋夜空背景:月亮、灯笼、落叶

体验链接:

mid-autumn-demo.html (20.1 KB)


:light_bulb: 灵感来自哪条评论 / 真实场景

灵感来自我们宿舍的真实场景——每年中秋宿舍都会买一大堆月饼,口味多得吃不完,大家就玩一个"传球"游戏:用枕头当球拍,把月饼盒传来传去,谁掉了谁吃一个。

我想把这个"弹来弹去"的感觉做成游戏。最初想的是玉兔接月饼的传统玩法,但总觉得太普通了——后来突然想到:如果玩家不是接,而是"画"路径引导月饼呢?

于是有了"画线弹板"这个核心机制——你的每一笔都是一道月光,月饼碰到就弹飞。


:bullseye: 它解决了什么假期问题

中秋假期的"无聊等待"问题。

  • 回家路上刷手机没意思,玩一把中秋小游戏应景又解压
  • 走亲戚等开饭的时候,掏出手机画两笔,30秒一局不耽误事
  • 给熊孩子塞手机,有中秋主题的游戏总比瞎刷短视频强
  • 自己做完发朋友圈/家族群,"中秋我做了个小游戏"比"中秋快乐"有存在感多了

而且这游戏上手零门槛——不用记操作,会画线就会玩,长辈小孩都能来一局。


:hammer_and_wrench: 使用 TraeCode 创作的过程

整个游戏从0到可玩,全在 TraeCode 里完成,单文件 HTML,14000+ 字符的 JS,一个 bug 都没留。

关键步骤:

第1步:玩法快速迭代

在 TraeCode 里和 AI 聊了3轮玩法——

  1. 月饼大乱斗(4个AI角色互打)→ 太单调
  2. 玉兔接月饼(传统接物)→ 没新意
  3. 月光画线师(画线引导滑行)→ 物理太复杂
  4. 月光弹板(画线弹飞) → 简单又有创造力,定稿

第2步:核心物理实现

用 Canvas + 手写的镜面反射物理,3步搞定:

  • 点到线段距离检测(p2s 函数)
  • 法线方向计算
  • 速度向量反射公式 v' = v - 2(v·n)n

不到100行代码,月饼碰线就弹。

第3步:中秋氛围渲染

夜空渐变 + 大月亮 + 闪烁星空 + 摇摆的红灯笼 + 飘落的秋叶,全用 Canvas API 画,没有一张外部图片,文件体积不到 30KB。

第4步:手感打磨

squash & stretch 弹性、粒子爆炸、伤害飘字、连击提示、震屏反馈——这些都是在 TraeCode 里一边玩一边改,AI 秒级响应,一个晚上就调到位。

TraeCode 带来的效率提升:

  • 非科班出身,3天迭代出4个玩法版本
  • 物理公式直接让 AI 写,我只负责判断手感对不对
  • 每改一处 Edit 精确替换,不重写整文件
  • 改完跑 node --check 本地验证,语法问题当场解决

:trophy: 成果

  • 单文件 HTML,打开即玩,手机电脑通吃
  • 4种月饼 + 炸弹机制,连击系统
  • 中秋主题视觉,零图片资源
1 个赞

画线弹月饼太有创意了吧 连击加分太爽了 教教我

1 个赞