我用 AI 缝合了「羊了个羊」和「俄罗斯方块」

block-sweep

一、背景介绍

最近正在开发一个 在线小游戏网站,详情可以看 这篇文章。目前还处于不断完善游戏库的阶段。

前文有提到,游戏网站的资源主要有 3 个来源:开源、引用、自研。

在新增游戏的过程中,体会是,开源途径的游戏一般比较老,现在还有热度的数量有限;引用途径的授权过程缓慢,直接引用未授权的游戏存在较大风险,万一源网站变更甚至倒闭,自己的网站也就瘫痪了。

因此,尽管自研游戏的 ROI 不高,为了长远考虑,还是得保持一定比例的自研游戏。

自研游戏的话,又分为两个方向:

  1. 借鉴玩法

借鉴玩法指的是直接参考经典游戏的玩法,用 AI 重新做一个换皮的游戏。比如贪吃蛇、俄罗斯方块这种经典小游戏,在 AI 的加持下,甚至只要一两句提示词,AI 就能帮你做出来。

但是缺点也很明显,这种经典游戏早已经满天飞了,没有人会为了这些游戏留在你的网站。

那么可以调整一下思路,参考一些稍微不那么人尽皆知的玩法,利用 AI 快速实现并上线,用来给网站充一下门面还是不错的。

比如我记得多年之前,玩过一款考验颜色分辨能力的游戏,具体的玩法是在一堆方块里,找到颜色不同的那个方块。

虽然我不知道游戏叫什么名字,但是我还记得玩法。所以我完全可以用 AI 重新做一个。

block-sweep-1

游戏地址:https://miniplay.io/games/color-sleuth

上面这个游戏,从构思到上线,大概只用了半天的时间。

  1. 自创玩法

相比借鉴,自创玩法就困难多了。既要保证游戏逻辑没有漏洞,还要保证好玩。

那为什么还要费劲去做呢?因为自创的玩法是独一无二的,万一火了,只有自己的网站能玩,能吸引大量流量。当然这个概率很低。

更主要的是,可以把它拿到社交媒体去宣传。如果你完全复刻了一个老游戏,很难说去宣传什么。但自创的玩法就不一样了,可以在社交媒体征求玩法意见,或者从技术的角度,分享实现过程。

而分享到社交媒体,一可以引流,二可以获取外链,这对网站建设都是非常重要的。

二、玩法构思

因为要从头构思游戏的玩法,所以我打算去微信小游戏上,看最近什么小游戏比较火。

结果我一打开首页,发现「羊了个羊」依然还在。

block-sweep-2

说实话,就算是最火的时候,我也没玩过这个游戏。但是,大家喜欢的就是最好的。那就基于它来做一个微创新吧。

「羊了个羊」的玩法很简单,就是堆叠和三消结合。堆叠是这个游戏的特色所在,需要观察方块的堆叠情况,来设计消除策略。那么堆叠的元素保留。

block-sweep-14

至于三消,是属于消除类游戏的一种,连连看、消消乐也是消除类游戏。

那么思路就变成,把三消换成另一种类型的消除,跟堆叠的玩法结合起来。

那么经典的消除类游戏有哪些呢?答:俄罗斯方块。

所以最终的玩法构想是,上方堆叠各种形状的方块,把它们依次移动到下面的棋盘内,根据俄罗斯方块的规则,组成整行或整列,则可以消除,清空方块堆则过关。

block-sweep-3

三、游戏策划文档

整个开发过程主要使用 Claude Code 来实现。但是请记住,即使是用 AI 来做项目,也别忘了先写文档。

写文档的流程是,先跟 AI 大致描述想法,然后反问 AI 是否有不清楚的细节,然后挨个回答 AI 的问题,这其实也是梳理自己思路的过程。

block-sweep-4

提示词:

1
我想参考「3 tiles」和「Block Puzzle」的玩法,开发一款游戏,从一堆方块里,选取方块,放到指定的棋盘空间,按照俄罗斯方块的规则消除,方块的形状也参考俄罗斯方块里的经典的形状,对这个游戏设计,你有什么问题需要确认吗

反复对话几轮,直到 AI 确认没问题,再让它整理文档。

block-sweep-5

提示词:

1
好的,按照以上的讨论结果,输出一份详细的游戏策划文档,游戏名叫 Block Sweep,写在 GameDesign 文件夹下,md 格式

四、玩法实现

有了游戏策划文档后,我一般会重开一个窗口(因为过长的上下文,会让 AI 变笨),让 AI 通过文档来了解项目,并先实现最核心的玩法。

block-sweep-6

提示词:

1
2
3
4
开始实现游戏的第一个版本,要求:
1.游戏文件放在 games 目录下,用index.html 作为游戏入口
2.包含主页,显示第一个关卡的入口,点击进入第一个关卡
3.先不用实现关卡编辑器,第一个版本先用随机数据,测试玩法

然后第一个版本很快就诞生了。虽然没有做到一遍过,中间让它改了几个 bug,但总体来说,效率非常高。

block-sweep-7

第一版的 UI 不能说很好看,但也还过得去。

五、关卡设计

这个游戏是一个解谜类游戏,需要很多不同的关卡,因此需要一个关卡编辑器。

让 AI 实现关卡编辑器:

block-sweep-8

提示词:

1
游戏源码在 games 下面的 block-sweep,现在已经实现了第一个版本,现在开始做游戏关卡编辑器,编辑完成后可以导出配置文件,并可以被正常读取

同样不是一遍过,把关卡编辑器跑通大概花了 50 分钟。

block-sweep-9

六、优化 UI 和美术

现在的 UI 风格 AI 味还是太重了,需要重新设计一下。我的做法是,找到合适的设计样例,让 AI 模仿实现。

比如这次我在 Pinterest 网站上搜索 “方块游戏设计”,找到了这张图片,感觉偏复古的感觉还不错。

block-sweep-10

于是让 AI 先分析这张图片,再参考实现:

block-sweep-11

分析图片的提示词:

1
分析 https://i.pinimg.com/736x/61/42/5e/61425eb59ae74cfb8145c8d73d81e067.jpg 这张图片,点评这个游戏 UI 的色调风格

UI 重构的提示词:

1
参考这套 UI 风格,重构 block-sweep 游戏的 UI 风格

这里选择让 AI 先分析再实现的原因是,先通过文字,判断 AI 理解的画面是否正确,避免改了一堆代码后再回滚。

block-sweep-12

改完后的结果,风格瞬间统一了很多。

七、收尾工作

最后的工作就是细节调整和关卡设计了,做了封面,加了音效和动画效果,设计了 48 个关卡,难度递增。

最终成品:

block-sweep-13

现在游戏已经上传:https://miniplay.io/games/block-sweep ,欢迎体验,期待有人能通关。

如果有任何玩法上的建议或者开发流程上的疑问,欢迎给我留言。


本文已同步至微信公众号,欢迎留言讨论。

wechat