利用 Claude 制作 Crossword 小游戏（二）

利用 Claude 制作 Crossword 小游戏（二） 利用 Claude 制作 Crossword 小游戏（二） Modified December 31, 2024 Code block Python 3.2 迭代添加交叉词 3.2.1 从当前已放置词的字母中寻找交叉点 3.2.2 检查潜在交叉词是否还在可用词列表中 3.2.3 验证新词放置是否会违反2×2规则 3.3 回溯机制 3.3.1 如果当前路径无解，回退到上一个决策点 3.3.2 尝试不同的词或不同的放置位置 3.3.3 维护已尝试组合的历史记录避免重复 4. 完整性验证 4.1 检查是否所有给定词都已使用 4.1.1 记录未使用的词 4.1.2 必要时回溯到更早的状态尝试包含更多词 4.2 验证网格规则 4.2.1 确认黑格对称性 4.2.2 检查2×2规则 4.2.3 验证所有交叉点 5. 输出处理 5.1 生成网格表示 5.1.1 创建二维数组表示网格 5.1.2 标记黑格位置 5.1.3 填入字母 5.2 生成词语索引 5.2.1 横向词编号和位置 5.2.2 纵向词编号和位置 创建 HTML 页面，不能使用 React 我们可以看到，虽然我们描述的比较清楚了，但是生成的效果并不好，所以我们只能尝试，一步一步调整。 多次修改逻辑 Code block Python 修改机制： 1. 在放置第一个词之后，需要一个一个的放置下一个词。 2. 放置的逻辑不改变。 3. 可以在同一个格子中的字母是重叠使用的，但每一个格子只能使用两次（横向一次，纵向一次） 4. 同时放置时，不能首尾相接，词和词使用重复字母时，必须一个为横向，一个为纵向 5. 同时不能生成2 2的白色格子 6. 表格做的更清晰一些，把黑色格子也分块显示出来。 7. 把格子的大小设置为自适应。 8. 给单词进行编号显示，应该把编号写在对应单词的第一个字母的白色格子里 最后再要求调整一下效果和风格。增加游戏模式、难度等。 三、游戏测试 CrossWord crossword.js index.html styles.css 我们可以看到，虽然我们描述的比较清楚了，但是生成的效果并不好，所以我们只能尝试，一步一步调整。 多次修改逻辑 最后再要求调整一下效果和风格。增加游戏模式、难度等。 三、游戏测试 CrossWord CrossWord crossword.js crossword.js index.html index.html styles.css styles.css 小游戏使用地址：https://visiontide.net/crossword/ 四、总结 好啦，具体的代码其实有点长，分为三个文件了已经。也一起上传到飞书文档中，有需要的把文件下载在同一个文件夹，点击后缀名为“.html”的文件就可以玩了 然后小游戏我放在自己的网站上啦，大家想玩的也可以直接用上面的地址去玩 整体其实就是一个测试、验错、然后提出新的疑问，再让大模型去解决的过程。今天深度用了一下 monica 说实话，没有 cursor 好用= =便宜果然有便宜的道理。 这种不太好用主要是一键修改代码上，有时候会出现大模型，偷懒，但是这边把完整的代码都改掉的问题...想完全偷懒还是不太可能的，但确实今天测试了下，是可以做到一行代码不写，只靠提示词就把代码生成出自己想要的效果的。这个还是很赞的！ 今年的 AI 编程确实进步的恐怖如斯... 要是会写代码的人用起来真的会更加得心应手。今天真的好多次都想自己改了，但主要还是测试为主，就忍住了= = 好啦，写到这里我们今天的内容也结束啦，感谢大家的观看，也希望我的内容能够让大家喜欢，有所收获。感兴趣的小伙伴可以点个关注跟随我一起学习，观看更多往期文章。 下次见，我是景淮，祝你有个开心美好的一天 嘿，大家好呀，我是景淮，一个在加拿大的朋友，每天陪你一起玩转 AI。 昨天在完成了第一篇之后，有提到今天会继续再更新一篇，原因是昨天一次性生成的代码太长了，导致在输出结果的时候不能一次性把页面做出来。 然后也有兄弟提醒我，可以用 Cursor，其实 Cursor 肯定是可以完成我们的需求的 ，毕竟有什么能比起直接从项目本身写代码、改代码来的更快的呢？ Cursor 本身还是有一点使用门槛的。而且最近已经投入 Monica 的怀抱了，毕竟还是便宜一些的，而且又可以用比较熟悉的 VS Code... 快乐，所以今天还是用 VS Code + Monica 来制作好啦 好啦，言归正传，我们今天还是先完成我们的预期项目。尽量用一次一次的对话的形式展示给大家，怎么完成我们的预期需求。 所以，今天的主题是 利用 Claude 制作 Crossword 小游戏（二） 本文会根据以下内容顺序进行： • 需求分析 • 分步实现 • 提示词编写、测试 • 总结 一、需求分析 与昨天一次性生成预期的项目不同，我们这次属于不太一样的做法，把这个 Crossword 小游戏分成两部分，一部分是 Crossword 的游戏图卡生成，一部分是单词和解释的生成。 然后可以使用批量输入（复制、粘贴）的形式，直接把 20 个单词和注释一起复制给 Crossword 小游戏的网页端项目中，直接生成对应的图卡。 一）单词和解释的生成 1. 输入 输入一个主题 2. 输出 单词和解释的生成 💻 这部分其实需要注意的点有一个，就是我们要把输出的格式稳定下来。 因为代码和 AI 大模型还不太一样，大模型的输入可以不在乎格式，就是文字打错了、顺序有问题，都可以解决，但是代码不同，它们是很死板的，只能解决固定的事，所以格式必须稳定。 这部分其实需要注意的点有一个，就是我们要把输出的格式稳定下来。 因为代码和 AI 大模型还不太一样，大模型的输入可以不在乎格式，就是文字打错了、顺序有问题，都可以解决，但是代码不同，它们是很死板的，只能解决固定的事，所以格式必须稳定。 二） Crossword 小游戏的网页端 这边游戏的规则、细节的调整，我们在文章中再去一点点调整。 1. 输入 批量输入 单词和对应的解释 2. 输出 输出 Crossword 小游戏 二、分步实现 一）单词和解释 提示词 [word]:[hint] [word]:[hint] ... 效果展示 💻 可以看到，效果已经很稳定了 一个优秀的 输出格式要求，要包含 文字描述 + 清晰的示例 可以看到，效果已经很稳定了 一个优秀的 输出格式要求，要包含 文字描述 + 清晰的示例 二）游戏生成 我们先从 Crossword 游戏规则入手 1. 所有相交的字母必须形成有效的单词(横向和纵向都要检查) 2. 所有相交的字母必须形成有效单词 3. 每个字母格必须是至少一个横向词和一个纵向词的一部分 4. 网格中不允许有 2×2 的纯白色方块区域 然后我们逐步从创建的逻辑入手 1. 词汇分析 2. 初始布局规划 3. 递归填充算法 4. 完整性验证 5. 输出处理 后续还需要补充游戏性，难度、显示效果等。 提示词