使用 Codex AI 逐步创建 Wordle
使用 Codex AI 逐步创建 Wordle
我转录了使用自然语言创建工作单词的说明
TL;DR：如何在不编程的情况下创建 Wordle
几个月前，我观看了一段关于使用 AI 创建 Wordle 的视频（西班牙语）。
该视频使用 OpenAI Codex 创建了一个 单词 .
它是由其惊人的主机开发的 卡洛斯桑塔纳 .
如果你懂西班牙语，我建议你 订阅 学习惊人的东西。
我之前在 1 月份写过一篇关于如何使用 TDD 编写 Wordle 的文章。
[
如何在 25 分钟内使用 TDD 开发文字游戏
使用 TDD 开发完整的文字游戏非常容易
博客.devgenius.io
](https://blog.devgenius.io/how-to-develop-a-wordle-game-using-tdd-in-25-minutes-2157c93dda9f)
我决定复制它并得出我的结论。
所以我按照主持人的相同指示（将它们翻译成英文并添加我的评论）。
您可以在 Codex Playground 网站上按照此分步教程进行操作。
可惜 Carlos 的精彩教程是西班牙语的，说英语的人会错过它。
我会把他的步骤翻译成英文。
逐步创建
0. 设置
如果您还没有完成，请创建一个帐户。
1.第一条指令（UI？）
/* 创建一个 6 行 5 列的表 */
输出
/* 创建一个 6 行 5 列的表 */ var table = document.createElement('table');
table.setAttribute('border','1');
for (var i = 0; i < 6; i++) {
var row = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var cell = document.createElement('td');
cell.innerHTML = ' <b>' + (i * 5 + j) + '</b> ';
row.appendChild（单元格）；
}
table.appendChild(row);
}
document.body.appendChild(table);
这是出乎意料的。
表格不是 HTML 表格。
作者和 Javascript 代码生成器都考虑视觉元素。
更重要的是，变量的名字很糟糕，比如 我和 j
我们从一个 缩写代码气味 .
2. 单元格样式（UI）
/* 单元格是灰色的，80px 80px 的平方 */
/* 单元格是灰色的，80px 80px 的平方 */ var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
细胞[i].style.backgroundColor = '#ccc';
单元格[i].style.width = '80px';
细胞[i].style.height = '80px';
}
继续使用意外的 UI 样式定义，生成器对单元格进行样式化
3. 单元格是一半大小（UI）
/* 单元格是一半大小 */
/* 单元格是一半大小 */ for (var i = 0; i < cells.length; i++) {
单元格[i].style.width = '40px';
细胞[i].style.height = '40px';
}
感人的。它有上下文并且知道 减半 .
4.无表格边框（UI）
/* 没有边框 */
/* 没有边框 */ table.style.border = '无';
5. 单元格没有边框（UI）
/* 单元格没有边框 */
/* 单元格没有边框 */ for (var i = 0; i < cells.length; i++) {
单元格[i].style.border = 'none';
}
请注意，我们有 5 个步骤，我们不知道什么是 Wordle，我们只是在玩用户界面。
6.文本居中（UI）
/* 文本居中 */
/* 文本居中 */ for (var i = 0; i < cells.length; i++) {
单元格[i].style.textAlign = 'center';
}
7.文字为白色（UI）
/* 文字是白色的*/
/* 文字是白色的 */ for (var i = 0; i < cells.length; i++) {
细胞[i].style.color = '白色';
}
8.文本样式（UI）
/* 文本为 Helvetica 字体和粗体 */
/* 文本为 Helvetica 字体和粗体 */ for (var i = 0; i < cells.length; i++) {
细胞[i].style.fontFamily = 'Helvetica';
细胞[i].style.fontWeight = '粗体';
}
严重地？还没有真正的游戏？
9. 单元格没有填充（UI）
/* 单元格没有填充 */
/* 单元格没有填充 */ for (var i = 0; i < cells.length; i++) {
细胞[i].style.padding = '0px';
}
10. 单元格为空（UI/模型）
/* 单元格为空 */
/* 单元格为空 */ for (var i = 0; i < cells.length; i++) {
细胞[i].innerHTML = '';
}
按照 Carlos 的说明，我们得到了一个随时可用的用户界面。
没有测试，没有商业规则。然而。
11.添加输入字段（UI/Model）
/* 在表格下添加一个输入文本字段 */
/* 在表格下添加一个输入文本字段 */ var input = document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('placeholder','写点东西');
document.body.appendChild(输入);
12. 为输入字段设置样式（UI）
/* 添加边距将文本字段宽度减小到 100px */
/* 添加边距将文本字段宽度减小到 100px */ input.style.margin = '10px';
input.style.width = '100px';
13. 添加带有 id 的验证器（模型）
/* 在带有“勾号”字符的字段旁添加一个按钮。按钮必须有一个名为“验证”的 id */
/*在字段旁添加一个带有“勾号”字符的按钮。 Button 必须有一个名为 'validate' 的 un id */ var button = document.createElement('button');
button.innerHTML = '✓';
button.id = '验证';
document.body.appendChild(按钮);
我们提前考虑知道我们将需要一个意外和实施 id。
没事。正如 Carlos 在他的视频中评论的那样，作为程序员，我们需要稍微思考一下。
我们正在创建一个带有特殊标识符的按钮，因为我们 猜测 以后可能会有用。
14.添加具有另一个ID的卸妆按钮（型号）
/* 添加另一个带有 id 'remove' 和 'x' 字符作为标签的按钮 */
/* 添加另一个带有 id 'remove' 和 'x' 字符作为标签的按钮 */ var button = document.createElement('button');
button.innerHTML = '✗';
button.id = '删除';
document.body.appendChild(按钮);
15.中心框文本（UI）
/* 中心框文本 */
/* 中心框文本 */ input.style.textAlign = '中心';
16.限制文字大小（UI/Model）
/* 我们不能在输入字段中写入超过 5 个字符 */
/* 我们不能在输入字段中写入超过 5 个字符 */ input.setAttribute('maxlength','5');
17.我们需要存储当前的尝试（模型）
/* 从 0 开始创建名为 'rowIndex' 的变量 */
/* 从 0 开始创建名为 'rowIndex' 的变量 */ 变量行索引 = 0;
这就是黑魔法出现的时候。
我们需要提前考虑。
肯定有更好的地方来编写 wordle。敬请关注！
18. 大写文本（模型）
/* 在框中输入文本时，将其转换为大写 */
/* 在框中输入文本时，将其转换为大写 */ input.addEventListener('keyup', function(event) {
event.target.value = event.target.value.toUpperCase();
});
19.我们提前去了（…）
我们需要多次改写以下指令，直到获得所需的行为。
我们有即时反馈，所以我们很高兴。
20. 输入文本应显示在单元格上（模型/UI）
/* 在文本字段上写入后，每个字符的值将写入所选行的每个单元格 */
/* 在文本字段上写入后，
将写入每个字符的值
在所选行的每个单元格上 */ input.addEventListener('keyup', function(event) {
var text = event.target.value;
var cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
if (i >= rowIndex * 5 && i < (rowIndex + 1) * 5) {
单元格[i].innerHTML = text.charAt(i - rowIndex * 5);
}
}
});
21.我们选择我们的秘密词（模型）
/* 在变量中存储秘密单词'PAPER' */
/* 在变量中存储秘密单词'PAPER' */ var secretWord = '纸';
22.如果字符匹配，放黄色（Model/UI）
/* 当点击“验证”按钮时，我们需要检查所选行的字符是否包含在密码中。如果是，则单元格应标记为黄色 */
/* 当点击验证按钮时，
我们需要检查所选行的字符是否
都包含在密语中。
如果是，则单元格应标记为黄色 (#edc953) */ document.getElementById('validate').addEventListener('click', function(event) {
var cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
if (i >= rowIndex * 5 && i < (rowIndex + 1) * 5) {
if (secretWord.indexOf(cells[i].innerHTML) >= 0) {
细胞[i].style.backgroundColor = '#edc953';
}
}
}
});
23.如果字符匹配，则放绿色（Model/UI）
/* 如果字符在正确的位置，单元格应该是绿色的 (#a9e54e) */
// 步骤 23 // 如果字符在正确的位置，单元格应该是绿色的 (#aedb95) document.getElementById('validate').addEventListener('click', function(event) {
for (var i = 0; i < cells.length; i++) {
if (i >= rowIndex * 5 && i < (rowIndex + 1) * 5) {
if (secretWord.charAt(i - rowIndex * 5) === 细胞[i].innerHTML) {
细胞[i].style.backgroundColor = '#aedb95';
}
}
}
});
24. 移动到下一行（模型）
/*当点击验证按钮时，rowIndex变量增加*/
/* 当点击验证按钮时，rowIndex 变量增加 */ document.getElementById('validate').addEventListener('click', function(event) {
行索引++；
});
25. 擦除游戏（模型）
/* 当点击验证按钮时，rowIndex 变量增加 */
// 步骤 25 // 当按下删除按钮时，每个字母都被删除，rowIndex 变为 0，所有单元格变为灰色 document.getElementById('remove').addEventListener('click', function(event) {
var cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
细胞[i].innerHTML = '';
细胞[i].style.backgroundColor = '#ccc';
}
行索引 = 0;
});
26. 保存有效词（模型）
/* 保存以下单词的集合：tools、super、faker、catch、cry 大写 */
// 步骤 26 /* 保存以下单词的集合：tools、super、faker、catch、cry 大写 */ var words = ['TOOLS', 'SUPER', 'FAKER', 'CATCH', 'CRIED'];
27.选择一个秘密词（模型）
/* 按下删除时，从单词集合中随机选择秘密单词 */
// 步骤 27 /* 按下删除时，从单词集合中随机选择秘密单词 */ document.getElementById('remove').addEventListener('click', function(event) {
var randomIndex = Math.floor(Math.random() * words.length);
secretWord = words[randomIndex];
});
尽头快到了
到这里为止，我坚持使用 Carlos 的演示。
缺少一些功能：
- 商业规则：
- 游戏应该以一个随机单词开始。
- 字典之外的词应该是无效的。因此，长度不同于 5 的单词将不可用。
- 当我们输赢时比赛结束。
- 我们需要使用真正的字典。
— 用户界面/用户体验：
- 屏幕键盘。
- 字母翻转。
- 进入世界后，应该清除文本框。
- 额外的：
- Wordle 共享字符
⬛⬛⬛
⬛⬛⬛⬛
⬛⬛⬛
⬛⬛
- ……还有更多……
结论
在上述 27 个步骤中，有 22 个与 UI 有关。
该模型 可能无法承受许多业务变化。
也许 TDD 版本可以。
这项技术是惊人的。
我们可以构建一个提供自然语言命令的完整用户界面。
请继续关注以下文章中的 Wordle 演变。
学分
图片来源 给她
原始视频 这里
GitHub 上的完整源代码 这里 .
工作版本（如上所述不完全功能） 这里
在接下来的文章中，我将迭代这个和 TDD 版本。
订阅以获取下一篇文章，这样您就不会错过它们。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
