数独游戏训练营

这里是由哥飞发起的一次免费前端训练营,题目是实现一个能够讲解数独解法的网页小工具。

作业列表

大家交作业可以通过发 PR 的形式提交自己的作业地址在下方表格中:

作者 网址 进度
这里写作者名称 这里写作业网址 这里写进度
yooumuu https://next-sudoku-game.vercel.app/ 第一版
cc https://sudoku-puzzle-master-zzia.vercel.app 第一版
小鑫 https://sudoku-game-xi.vercel.app/ 第一版
击石 https://soduku-two.vercel.app 第一版
kokakola https://javascript-sudoku.vercel.app/ 第一版
Caster https://soduku.hello-gpts.day 第一版
研硕 https://sudoku-vkb5.vercel.app/ 第一版
claritas https://sudoku-test-sable.vercel.app/ 第一版
Fanlu https://the-next-sudoku.vercel.app/ 第一版
子煦 https://sudoku-allen.vercel.app/ 第一版
Q_Q https://sudoku-master.vercel.app/ 第一版
Diyi https://sudoku-p.vercel.app/ 第一版
云畔雾隐花 https://sudoku-pi-eight.vercel.app/ 第一版
jal https://sudogames.vercel.app/ 第一版
子夜 https://dz-suduku.vercel.app/ 第一版
kxp https://sudokudemo.vercel.app/ 第一版
随心 https://sudoku-next-kingluo.vercel.app/ 第一版
wkd https://sudoku-tau-ruby.vercel.app/ 第一版
Mr. Li https://sudoku.lostphp.com/ 第一版
Chandler https://sudoku-hazel.vercel.app/ 第一版
致中 |https://kong1-sudoku.vercel.app/ 第一版|
gu-dx https://sudoku-alpha-three.vercel.app/ 第一版
者年 https://zhenian-sudoku.vercel.app/ 第一版
许则则 https://sudoku-nine-sandy.vercel.app/ 第一版
一米水田 https://sudoku-eta-nine.vercel.app/ 第一版
Sam https://sudoku-pro.com/ 第一版
老虎 https://suduku-durk.vercel.app/ 第一版
L https://shu-du.vercel.app/ 第一版
Ethan Pan https://sudoku-nu-two.vercel.app/ 第一版
ling https://my-sudoku-app.vercel.app/ 第一版
ibrothergang https://shuduku.ibrothergang.com/ 第一版本

训练营介绍

之前哥飞在公众号文章《分享一个月收入 39 万的在线数独游戏网站,每月从搜索引擎获取 1190 万访问量》分享了这个访问量最大的在线数独游戏网站 sudoku.com 。

哥飞就想,我们现在再去做一个在线数独游戏,肯定是搞不到流量了,但如果结合 GPT 去做一个讲解数独游戏的小工具,这就有新意,有传播点了。

最终需求是上传一张数独游戏截图,程序能够读取题目,然后让 GPT 去讲解解答这个游戏的每一个步骤,如果能够用上 TTS,语音讲解就最好了。

我们依然把需求分解,分成多个版本来实现,每个版本逐步加功能,另外考虑到 OCR 比较难,所以把 OCR 读题放到后面的版本里。

第一版:正常数独游戏

网页显示 9X9 的格子,玩家点击出题按钮后,随机出题。

之后玩家可以在空白格子填入数字,每次填入后,你都需要调用 js 程序判断当前的回答是否符合要求。

直到全部空格填满之后,还需要判断用户是否解答正确。

第二版:把实现后端保存功能

在第一版的基础上,每次随机出题之后,都把当前题目保存到后端数据库中,并且生成一个唯一的题目 ID,跳转到题目页面,如路由可以是 /game/18256 。

玩家每次填写的记录也保存起来,填几次就保存几次,也就是可以记录玩家游戏每一步骤情况。

最后玩家的游戏结果也需要保存。

第三版:重放游戏步骤

在第二版的基础上,没有玩完的题目,可以下次打开继续玩。

已经玩结束的题目,可以按照步骤回放。

可以是自动一步一步回放,也可以是手动点击上一步下一步回放。

第四版:允许用户录入题目

在第三版的基础上,玩家既可以选择随机出题,也可以选择手动录入题目。

玩家选择录入题目后,网页显示 9X9 的格子,每一个格子都可以输入数字,玩家可以把别的地方看到的题目录入进去,最后保存题目。

保存之后,生成唯一的题目 ID,跳转到题目页面。

之后流程跟前面几版一样。

第五版:实现 JS 自动解题

在第四版的基础上,这次玩家可以不自己答题,而是点击解答按钮,让程序来给出答案。

你需要用 JS 实现一个解答数独的算法,说是算法,其实不要被吓倒,你就把我们人答题的整个过程都用程序来实现就可以了,暂时不需要上其它更高深的算法。

我们用程序循环遍历每一个空格,找到这个空格所在的 3x3 正方形,以及横向和竖向的,总共三组数字,每一组数字都要求必须有 1 到 9,且不能重复。

你写一个函数判断当前格子是否可以确定要填哪个数字,如果不能确定,就跳过这个格子,跳到下一个格子,继续重复这个过程,直到所有格子都被解答出来了。

这里程序运行可能会很快,你可以每次在确定一个格子的数字后暂停 2 秒钟,之后再继续找下一个可以确定的格子,这样就可以让玩家看清楚整个游戏过程。

注意,这里程序答题也一样要每个步骤保存到后端,确保游戏结束后可以回放。

第六版:让 GPT 来讲解

在第五版的基础上,每次确定一个格子的数字后,就调用 GPT 接口,传入三组数字和正确答案的数字,让 GPT 来讲解,为什么要这样做,为什么能够确定这个格子的数字。

使用流式传输,把 GPT 的回答显示到页面上。

几个注意事项:

这里需要识别用户浏览器语言,或者让用户选择语言,然后使用这个指定的语言来让 GPT 输出文字;

这一步,就不是每次暂停 2 秒了,而是需要等 GPT 回答完之后,才开始下一个格子的探索;

这次还要把 GPT 的输出文字也保存起来,最后支持回放。

第七版:接入 TTS 实现语音讲解

在第六版的基础上,接入 TTS,让 GPT 的回答可以语音播放出来。

依然需要把语音也保存起来,支持回放时语音讲解。

能够实现以上版本,就足够去做一些可以赚钱的小工具了。哥飞还给学有余力的同学准备了两个版本的附加题。

第八版:尝试合成视频

在之前的基础上,把讲解录制成视频。

这里有两个方案,你可以后端渲染图片最终生成视频,也可以用一些前端库,直接在前端录制视频。

注意不管前后端生成视频,都需要把语音讲解也合成进去,最后得到一个讲解数独游戏的视频。

第九版:尝试 OCR

在之前的基础上,实现上传图片,或者调用摄像头读取数独题目,识别每一个格子的数字,特别要注意空格的处理,之后保存题目,生成题目 ID。

怎么样,想来挑战一下吗?

哥飞专门为这次小练习,搞了一个在线训练营,完全免费的,可以加哥飞微信 qiayue 入群。

但是注意,每周都会检查作业,如果没有实现,就会被请出群去,所以请确定你真的想参加,真的有时间参加,再来报名。