在咱们做游戏开发之前,先让你看看做出来的游戏的效果,不管你是真心学习,或者是休闲摸鱼,都可以来试试这款网页版的小游戏,我给取名叫《白了个白》。 因为都是白底,跟麻将子差不多,所以取了这个名字。
访问地址:http://www.yeegee.com/bai/
也可以通过网站来访问
首先打开网站,在浏览器中输入www.yeegee.com,进入主页
往下拉,在中间,常用工具下边的第二项,就是咱们这个白了个白项目的入口
点击它就能进入咱们的白了个白登录界面了,这里咱们还需要进行一步登录操作。
点击
游客模式
,就能进入体验游戏啦!
点击开始游戏,咱就进入了白了个白的第一关了。(目前暂时只做好了第一关,后续看第二关是否能做好)
操作也很简单,直接点击卡牌就能进行游戏了
还配备了动画效果的,快来试试吧!
接下来咱重点说说怎么实现第一关。
首先咱们打开Cursor,新建一个文件夹,取名最好别用中文,咱们今天就随意一点取了个名字叫game2,咱们下面就按步骤看看如何快速的完成一个类似羊了个羊的小游戏的第一关。
还是跟上次一样,需要指定目录,这里我不再重复了,不知道的朋友可以看这篇《仅用几行文本,几分钟!Cursor开发了个高水平的数独游戏》
我们先确定一下,怎么告诉他游戏规则,例如:
请在当前目录,而不是根目录,生成个类似羊了个羊的游戏,使用html+css技术,其中的各种图形选用表情来显示
1.设置2个关卡,第一关生成三排,每排有3个两张卡牌堆叠
-
有一个卡槽,用于存放和现实选中的卡牌,消除的时候,满足三个就消掉,消除的时候要有动画效果
-
卡牌移动到卡槽的时候,需要添加动画效果,如果发现卡槽有相同的卡牌,要将他们移动到一起
-
要判断是否已登录,登录后进入游戏主界面,进入后可以开始游戏
-
默认使用游客guest账号登录,可以切换账号,可以注册账号
-
要有移出道具,移出三张牌并把他们堆放到旁边
7.撤回道具:撤回最近取的一张牌,并把它放到原来的位置
8.洗牌道具:随机打乱所有未使用的牌
我们试试看这样的指令,他能生成什么? 点击submit ,它就开始生成了
生成完成后,点击Accept all
我们初步看一下效果。先找到index.html
点击右键,在右键菜单中选择Reveal in File Explorer,就进入到了生成代码的文件夹
在右边的预览里面,它默认取了个名字叫表情消消乐,你可以根据自己的喜好改成自己想要的名字。我这里叫白了个白。
在这里我们选中index.html,点击鼠标右键,在浏览器中查看,我这里选择的是谷歌
页面在浏览器中加载完,就是我们看到的界面了(下图)。
可以看到,它提供了用户名和密码的输入框,登录,注册按钮,还有一个游客登录按钮,我们点击游客登录,看看是什么画面
可以看到一个简洁的羊了个羊的界面就出来了,你还可以让他再美化一下
美化一下界面,按钮样式好看一点
代码改完之后,我们再刷新看看
可以看到整体风格都比之前要漂亮多了
我们试着玩一下看看
发现确实用了动画,旋转了然后,在下面的卡槽里面是有图像了,可每次点击都会替换掉原来的那个,于是我们还需要改进,告诉他问题所在
卡槽最多容纳7张卡牌,选择一张就在卡槽上添加一张,
如果没有相同的,则并排显示,
如果有相同的,要调整到一起,
满足3个的时候要进行消除,
如果满了7个也没有达到可消除的条件,则游戏结束
一顿代码修改后,我们再来看看
从输出来看,确实做了不少工作,但我们看看是否满足我们的预期。
结果发现还是不对,没有分开摆放,还是在同一个位置,可能他自己没识别到,得要我们告诉他
这7张卡牌要依次摆放,不能只显示在一个位置
修改之后,界面也变了
这时候我们再去做其他测试。
先看看能不能消除。 选三个睡眠图标的
结果发现第三个选不下来,于是再改进
选择相同卡牌,第三个没法选下来,
选下来之后,满足三个要消除,
消除要有动画效果
改完代码后,消除就实现了,当然这只实现了第一步,还有很多其他的细节需要你仔细琢磨和修复,比如以下这些场景:
1.卡牌堆叠是否有重复
2.关卡的卡牌是否满足顺利过关条件(卡牌是不是能够完全消除完)
3.卡牌动画效果是不是移动的动画(目前不是,它采用的是旋转,根据个人想法可以调整)
- 卡牌如果错开选择,是否能够把相同的调整到一起。
可能还有很多其他要改的细节,就交给你再仔细去琢磨了。
也许只有在认真考虑产品设计的时候,才会真正注意到这些细节问题,建议大家回到文章开头,先玩一下我开发的《白了个白》,然后再想想你做的过程中会遇到什么问题,如果有你无法解决的问题,欢迎来评论区聊一下。
今天的分享就到这里,AI编程就是这么简单,今天这个游戏比较复杂,不过通过简单的几步就能完成一个大动作,效率还是相当高的,当然很多细节还是需要自己去完善的,就像我举的例子。提一个开放式问题,用AI编程来开发什么产品会卖得比较好呢?欢迎大家在评论区探讨!
后续我还会分享更多 的知识,点个“
在看
”,分享给更多爱学习的小伙伴们!