SparkToAI

简体中文

English

简体中文

English

Appearance

使用AI编程开发舒尔特方格训练游戏 ​

作者：SparkToAI
发布于：2025年9月28日

人类想法 ​

最近，我正在尝试使用AI编程来开发一个舒尔特方格训练游戏。 舒尔特方格是一种用来测量和训练注意力、视觉广度和注意力稳定性的心理学工具。 经过我和Deepseek详细讨论，确定了舒尔特方格训练游戏的开发需求。

舒尔特方格训练游戏开发需求 ​

1. 项目概述 ​

  • 项目名称： 舒尔特方格训练游戏
  • 项目目标： 开发一款用于训练和提升用户注意力、视觉广度及认知速度的交互式游戏。
  • 目标用户： 学生、上班族、需要认知训练的中老年人、儿童。
  • 核心价值： 通过科学、有趣的游戏化训练，帮助用户量化并提升专注力。

2. 功能需求 ​

2.1. 训练模式

  • 方格生成：
    • 支持不同尺寸的方格：3x3, 5x5（标准）, 7x7, 8x8 等。
    • 数字必须随机分布，确保每次训练都是全新的挑战。
  • 训练流程：
    1. 用户选择方格尺寸（或难度）。
    2. 进入全屏方格界面，显示一个“准备开始”的提示。
    3. 用户点击“开始”后，计时器启动。
    4. 用户按顺序点击数字（从1到N，N为方格总数）。
    5. 当用户点击最后一个数字时，计时器自动停止。
  • 点击交互反馈：
    • 正确点击： 被点击的数字应有视觉反馈（如：数字变灰、被打上对勾、颜色变化）。
    • 错误点击： 如果点击了错误的数字，应有提示（如：轻微震动、错误音效、数字闪烁红色），且计时不停止，用户需要找到正确的数字才能继续。
  • 结果展示：
    • 训练完成后，立即显示本次用时（精确到0.01秒）。
    • 提供简单的评语（如：“优秀！”、“良好！”、“继续加油！”）。

2.2. 计时与记录

  • 实时计时： 在训练界面清晰显示当前已用时间。
  • 成绩记录： 自动记录每次训练的成绩（日期、时间、方格尺寸、用时）。

3. 界面需求 ​

  • 极简风格： 让用户能快速上手操作。
  • 响应式设计： 适配各种屏幕尺寸。

4. 技术需求 ​

使用HTML5和JavaScript开发。

AI编程 ​

先新建一个Qoder项目，再将舒尔特方格训练游戏开发需求提交给Qoder。

第一版 ​

大约等待了2分钟，Qoder完成了舒尔特方格训练游戏的第一版：

舒尔特方格训练游戏第一版截图

游戏第一版运行正常，但一些细节还需要优化。

第二版 ​

将第二版优化提交给Qoder：

prompt
优化：
1. 数字的小网格改成正方形，表格形式显示。
2. 去掉开始训练按钮，点击数字开始训练。
3. 用时的单位改为秒。
4. 重新开始按钮放在表格界面的下方，历史记录的上方。
5. 选择难度时，游戏自动重置，等待用户点击数字开始训练。

Qoder完成的第二版：

舒尔特方格训练游戏第二版截图

第二版的计时器没有调整为秒，数字格子还是独立的，不像一个表格，需要继续优化。

第三版 ​

将第三版优化提交给Qoder：

prompt
优化：
1. 优化计时器，将计时器调整为秒。
2. 将计时器放到表格界面的左上方，重新开始按钮放到表格界面的右上方。
3. 使用表格格式显示数字，比如：3x3就是3行3列的表格。

Qoder完成的第三版：

舒尔特方格训练游戏第三版截图

第三版的计时器没有调整为秒，数字格子没有调整为表格，计时器和重新开始按钮也挡住了表格，需要继续优化。

第四版 ​

将第三版截图和第四版优化提交给Qoder：

prompt
优化：
1. 将计时器单位调整为秒，不要精确到小数。示例：用时：10 s
2. 计时器和重新开始按钮挡住了表格，需要调整。
3. 将所有数字放在一个大正方形里面，比如：3x3就是一个大正方形里面的9个格子，每个格子一个数字。

Qoder完成的第四版：

舒尔特方格训练游戏第四版截图

第四版的计时器已调整为秒，数字格子已调整为大正方形。
但计时器和重新开始按钮不在同一行，需要继续优化。

第五版 ​

将第五版优化提交给Qoder：

prompt
优化：
1. 将计时器和重新开始按钮放在同一行，计时器居左，重新开始按钮居右。
2. 先隐藏数字表格、计时器和重新开始按钮，再显示游戏结果。

Qoder完成的第五版：

舒尔特方格训练游戏第五版截图

第五版的计时器和重新开始按钮已经在同一行，计时器居左，重新开始按钮居右。
但数字表格没有显示，我们要在游戏开始时显示数字表格，需要继续优化。

第六版 ​

将第六版优化提交给Qoder：

prompt
优化：
1. 数字表格、计时器和重新开始按钮默认是显示的。
2. 在显示游戏结果时，隐藏数字表格、计时器和重新开始按钮。
3. 重新开始或者再玩一次，显示数字表格、计时器和重新开始按钮。

Qoder完成的第六版：

舒尔特方格训练游戏第六版截图

第六版已完美实现了舒尔特方格训练游戏的所有需求。

开发总结 ​

经过六个版本的迭代，舒尔特方格训练游戏开发完成。
回顾整个开发过程，开发需求发生了变化，比如：计时器从原本精确到0.01秒调整到秒，取消了开始游戏按钮，界面布局调整也耗费了很多时间。
但经过不懈的努力，在AI编程的辅助下，我们实现了一个功能完整的游戏。🎉 💯

在线体验：舒尔特方格训练游戏