用AI做了个小游戏,还让它学会了“无障碍” | 我的DIY分享

12 今梦 22小时前 275次点击

Hello大家!

我用凝光AI写了一个应用,或者更准确地说,它应该算是个小游戏。至于有多好玩?其实也谈不上——甚至我觉得用提示词写出来的这个版本还有很多明显的bug。游戏规则比较简单,关卡之间的难度变化也不大,跟我实际体验到的那些游戏相比,确实有差距。

但它绝对是一个很有意思的尝试,我觉得大家也可以来DIY试试。

我目前做的这个游戏叫做“趣味倒水”,灵感来源于微信里我最近在玩的一款游戏“精明的开局”。玩法其实很简单:有很多个杯子,杯子里装着不同颜色的水。有时一个杯子里有三种颜色的水,每种颜色各占杯子的1/3、2/3或者一半。用户要做的就是把相同颜色的水倒进同一个杯子里,直到把这个杯子填满。一旦填满,这个杯子就会消失。通过这种益智玩法,既能锻炼思维,也能解压——当然,最重要的还是解压。

当然,我没办法实现微信里那么复杂的原理,毕竟表达能力有限,写不出太复杂的提示词。目前能做到的完成度,大概就是大家现在看到的这个样子。

那我为什么会想到做这个,还特意要求AI加入无障碍支持呢?其实是因为微信里那个小程序本身完全没法用读屏操作。之前和几位朋友在一起,其中一位盲人朋友问我:“你在玩什么?”我说是倒水游戏。他又问:“有那么好玩吗?怎么玩的?”我解释了一遍,他听着觉得挺有意思,说也想试试。可我一看,小程序里根本没焦点,他不知道水有多少、什么颜色,完全没法交互。当时真的挺遗憾的。朋友嘴上没说什么,但我能感觉到那种无奈。所以我就想,现在AI能自己写网页、做应用了,是不是我也可以把自己的想法实现出来,弥补这个遗憾?今天分享的这个,就是这样来的。

我能尽力做的,就是要求AI按照无障碍开发规范,为每一个可识别的按钮控件分配正确的Content Description标签描述,同时按照Web无障碍开发规范,在每个弹窗出现时过滤底部的非必要View,让焦点能够顺利聚焦到新出现的弹窗上,并且触摸时不会乱跳;字体大小的进度滑块也能正常用上下手势调整。目前我验证Android这边没有问题,不知道iOS和电脑端的屏幕阅读器会不会有问题,大家可以体验一下。

希望我这个抛砖引玉的DIY能够给大家带来一点新的玩机乐趣。大家也可以去DIY自己的应用,欢迎分享出来,一起体验彼此的成品。

同时,我也想借此呼吁:希望以后每一款游戏都能像我做的这个小应用一样。虽然我不确定是不是因为Web端写出来的HTML代码本身就有一定的无障碍性,但既然我都可以在完全不懂无障碍的情况下,用一句话优化出这样的完成度,那我觉得游戏做无障碍、微信小程序做无障碍,应该也没有那么难吧。我还是想借此呼吁大厂动起来。

除此之外,我最近也用豆包的趣味网页做了几个比较有意思的小工具,链接我放在文末,大家可以体验。也欢迎大家分享自己用AI写出的小程序。

https://www.doubao.com/building/code/A8a0IuhwUMG9IDc1?auto_play_bgm=1
https://www.doubao.com/building/code/WQyTeG5hVmiHbncp?auto_play_bgm=1
https://www.lingguang.com/share/FLASH_APP-30ec8cc3-c7c9-45a3-9c93-b58b0c43168c46
共 17 条评论
行色匆匆 22小时前
0 

我看看。

克图格亚 13小时前
0 
早期我用AI做的小游戏就跟那种传统的回合制战斗一样,估计社区应该有人看到过,就和一般的盲人游戏差不多,每次攻击都会有语音反馈
虚心小羚羊 13小时前
0 

挺有意思的,玩儿了一下,还有提示音,说话声,配乐和震动提示都还行

虚心小羚羊 13小时前
0 

不过他有一些bug,好像水杯本来就是倒不满的,逻辑不通

有意思

用户219503 9小时前
0 

卧槽,这个趣味网页真的可以生成游戏。我就让他生成了一个杀手的游戏,太好玩了

奇迹,他有七个杯子,两个蓝色两个绿色,我把他弄完之后,还剩下三个红色,分别是33%杯,然后把它们合一起之后变成了99%杯,好像这一关通不了
今梦 [楼主] 5小时前
0 
改不了了,AI那边的元数据丢了,现在这一版废了。

新版本豆包,我这里没有豆包爱学和趣味网页两个功能,但从楼主发的链接可以跳转到趣味网页,不理解为啥要这样

今梦 [楼主] 4小时前
0 
还没放开,等后面全量就都有了哈。
云遮雾绕 3小时前
0 
我刚才也试了一下,用凝光做了一个问答类的小游戏,可为什么点进去之后,只能听到背景音乐,看不到题目呀?而且只能在APP内测试
今梦 [楼主] 3小时前
0 
能发我看一下吗?右上角有一个未加标签,点开之后里面有分享按钮,会复制链接到本地。
云遮雾绕 3小时前
0 
https://www.lingguang.com/share/FLASH_APP-1d18c356-59c5-4162-a9c6-cb2b7606756a07
今梦 [楼主] 3小时前
0 
你再试一下哈。 https://www.lingguang.com/share/FLASH_APP-2e9ebb01-6044-447a-810f-de3fd49b50ab46
云遮雾绕 3小时前
0 
哇,可以了,这是怎么做到的呀?
今梦 [楼主] 3小时前
0 
就和一个普通用户反馈问题一样,让AI去排查为什么点击按钮之后无法进入页面的问题。
云遮雾绕 3小时前
0 
OK,谢谢
添加一条新评论

登录后可以发表评论 去登录