首页 > 其他分享 >使用 Codex AI 逐步创建 Wordle

使用 Codex AI 逐步创建 Wordle

时间:2022-09-07 10:48:08浏览次数:121  
标签:style Wordle Codex cells 单元格 AI UI var document

使用 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. 设置

开放式人工智能网站

如果您还没有完成,请创建一个帐户。

Codex Javascript 沙盒

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 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/22496/28340710

标签:style,Wordle,Codex,cells,单元格,AI,UI,var,document
From: https://www.cnblogs.com/amboke/p/16664453.html

相关文章