30 Days of Vibe Coding - Day 12 - Wordle

第12天。每个人都玩过Wordle。来看看AI能把它还原到什么程度。

提示词

#

“做一个Wordle克隆，要有合适的单词列表、方块动画、键盘、统计追踪和分享功能。”

怎么做的

#

这次经历了7个Watchfire任务，看着整个推进过程挺有意思的，因为它就像你在拥有无限耐心的情况下打磨一个精致游戏的真实过程。

1. 游戏引擎和单词列表。 基础部分：大约2,300个答案词、大约10,000个有效猜测词，以及核心的猜测评估逻辑。绿色、黄色、灰色。最基本的东西。
2. 精致的UI、方块动画和键盘。 揭示时的方块翻转、输入时的弹出、无效单词时的抖动。一个随着你的游戏进程更新字母颜色的屏幕键盘。
3. 统计和分享。 胜率、猜测分布柱状图、当前连胜和最高连胜追踪。分享按钮把你的emoji网格复制到剪贴板，跟真正的Wordle一模一样。
4. 帮助弹窗、深色/浅色主题、困难模式。 带有可视示例的游戏说明覆盖层。平滑过渡的主题切换。困难模式会强制你在后续猜测中使用已揭示的提示。
5. 色盲模式、无障碍功能、React refs bug修复。 为色盲玩家提供的高对比度颜色。这个任务还发现并修复了一个导致方块动画出问题的React refs bug。
6. Web Audio API音效。 按键、方块揭示、胜利和错误时的音频反馈。全部用Web Audio API生成，所以不需要加载任何音频文件。
7. 胜利时的彩纸庆祝。 一个基于canvas的粒子系统，在你解开谜题时触发。因为你值得。

整个游戏逻辑都在一个自定义React hook（useWordle.ts）里，UI是一个Next.js页面。干净的分离。

watchfire-io/watchfire

Better context. Better code.

Go

32

1

成果

#

感觉就像Wordle。 这就是标准，而且达到了。揭示时的方块翻转动画、打字时轻微的弹出、输入无效单词时的抖动。这些微交互正是真正的Wordle玩起来让人满足的原因，它们全都在这里。

深色和浅色主题。 两个都很好看。深色模式是默认的（理应如此），但浅色模式也很不错。切换按钮在顶栏，过渡很流畅。

持久化的统计数据。 游戏次数、胜率、当前连胜、最高连胜，还有猜测分布图表。全部存在localStorage里，所以你的统计数据在不同会话间都会保留。分享按钮把你的结果格式化为emoji网格，可以粘贴到任何地方。

有意义的设置。 困难模式是真正的约束，不只是一个标签。如果你发现单词的第3个位置有A，那之后每次猜测都必须在第3个位置放A。游戏会强制执行，并告诉你为什么你的猜测被拒绝了。色盲模式把绿色和黄色换成了橙色和蓝色，这是一个小改动，但让更多人能够玩这个游戏。

没有音频文件的音效。 Web Audio API的方案很聪明。不用加载mp3，不用音频精灵图，不用预加载。声音是实时合成的。按键时的轻柔点击声、方块揭示时令人满意的音调序列、获胜时的小号角声。它们增添了很多体验，却不增加任何下载体积。

恰到好处的彩纸效果。 赢了游戏，canvas粒子从屏幕中央迸发出来。这是个小细节，但它把安静的"搞定了"变成了一场庆祝。

Bug报告

#

任务5中的React refs问题是唯一真正的bug。由于React在重新渲染时处理refs的方式，方块翻转动画没有稳定触发。Watchfire在无障碍检查中发现了这个问题，并在同一个任务中修复了。我不需要为此单独提交bug报告。

除此之外，游戏从一开始就运行正常。有效单词被接受，无效单词被抖动拒绝，键盘颜色正确更新，困难模式也正确执行了规则。

数据一览

#

• 约2,300个答案词和约10,000个有效猜测词
• 7个Watchfire任务，从裸游戏引擎到彩纸效果
• 1个自定义hook（useWordle.ts）包含所有游戏逻辑
• Web Audio API实现零下载音效
• Canvas粒子系统实现胜利庆祝
• localStorage实现统计和游戏状态持久化

来试试

#

nunocoracao/Vibe30-day12-wordle

Day 12 of #30DaysOfVibeCoding - Wordle

TypeScript

0

0

玩Wordle

输入一个5个字母的单词然后按Enter。绿色表示字母正确且位置正确。黄色表示字母正确但位置不对。灰色表示这个字母不在单词中。你有六次机会猜出来。

Day 12 总结

#

Wordle是那种在你尝试去做之前看起来很简单的游戏。核心逻辑很直白，但打磨才是关键。动画、键盘反馈、统计、分享功能、困难模式的强制执行。去掉其中任何一个，它就不再有Wordle的感觉了。

让我印象深刻的是整个推进过程。任务1给了我一个能用但很丑的猜词游戏。到任务7，它拥有了真正Wordle的一切，外加音效和彩纸效果。每个任务叠加了一个特定类别的打磨，而且没有一个破坏之前的成果。在React的动画和状态管理中做到这点并不容易。

音效选择Web Audio API是个惊喜。我以为它会去用音频文件。结果它用程序化方式生成声音，意味着零额外资源和即时播放。聪明的取舍。

这个模式还在持续。每天都在增加打磨，目前还没有东西崩掉。

这是30 Days of Vibe Coding的第12天。跟随我用AI辅助编程在30天内交付30个项目的挑战。