【Code With SOLO】如何用 SOLO 快速搭建一个塔罗牌web小游戏?

1.摘要:

当室友垄断了寝室卡游,我将用手搓之——塔罗牌

总体抽卡过程和逻辑不错,但抽卡特效真难给agent说清楚!!!:tired_face:

不过好歹是弄出了四个抽卡特效 :winking_face_with_tongue:

2.背景:

我是一名大三学生,对代码有很强的热爱,虽然学习的时间不久,但是trae帮了我一手 :melting_face:

我创作的起因是因为一次六级考试后,突发奇想,让室友用塔罗牌测一测这次分高吗?虽然知道这是灵异测试,但是你懂的,人总是会有那一丝丝的好奇心。所以我就测了,不说不满意吧,反正意思就是让我下次努力 :slightly_smiling_face:(这不是微笑) :unamused_face: ,这谁能忍?关键是室友执牌他不给我看说明书,我不相信呐 :face_with_diagonal_mouth: ,还叫嚣,看了下次不给测,没招了。

当某次灵感来了,就做了这个塔罗牌小游戏。

3.实践过程:

使用 TRAE SOLO 完成任务的完整流程:

  • 先制作了一个基本框架(简约风格就好了),然后让给agent发送错误和较为丑陋的截图(配上完整的提示词),逐步做就好了,过程可能比较长,因为当前agent的理解可能不够。

  • 用了 SOLO 能力:git-commit gh-cli(懒得手动提交到仓库了:zany_face: )还有其他,懒得想了:thinking:

  • 关键 Prompt:创建一个web小游戏,先在首页创建一个卡牌封面,右上角是设置按钮,卡牌下方是开始按钮。点击开始按钮后到卡牌堆叠页面展示背面,然后直接转入抽卡过程,直接参考塔罗牌的游戏规则(这里我是上传了塔罗牌的说明书,自己修改了部分),然后抽卡过程要依次展示卡牌,并创建抽卡特效(这里我单独生成了特效提示词)。【大概就这些,基本可以有个框架了 :melting_face:

  • 中间踩过的坑:得用图片加提示词,不然agent还不一定能准确找到位置;时间较久,要有点耐心,忍耐它的错 :face_with_steam_from_nose:

4.成果展示:

首页:

展示:

设置:

想要抽卡图?

这个还请你亲自来玩一遍 :kissing_face: :face_savoring_food: :face_with_tongue: :winking_face_with_tongue: :zany_face:

已经上传GitHub,可以使用下方连接直接玩儿。【直接用微信打开,浏览器可能会出现访问失败,多试两次,用流量,别用校园网】

https://libshen.github.io/StormPlan-Tarot.github.io

不喜欢勿喷,本人大三,没多少时间改这个 :folded_hands: :folded_hands: :folded_hands:

5.效果与总结:

整体一套流程下来很快,agent能快速理解并执行。

在复杂的设计中,花了较长时间,就是那个抽卡特效!!!:sob:

如果有其他伙伴想一起创意这些小玩意儿,可以拉我 :saluting_face: ,本人不混子。