前言：

此刻朋友【yǒu】们对“不【bú】愤怒的小鸟小游戏【xì】”大致比较关【guān】心，各位老铁们都想要分析一些“不【bú】愤怒【nù】的【de】小【xiǎo】鸟小【xiǎo】游戏”的相关【guān】文章【zhāng】。那么小【xiǎo】编也在网络上【shàng】搜集了一些有关“不愤怒【nù】的小鸟小游戏【xì】””的相关内容，希望咱们能喜欢，姐【jiě】妹们一起来学习【xí】一下吧【ba】！

编辑：润 alan

通【tōng】过市面上的AI工具【jù】，不需要自己亲自写一行代码【mǎ】，就能做出一个完整【zhěng】的「愤怒的小【xiǎo】鸟」？！

最近，外国【guó】网友分享了自己花【huā】了10个小【xiǎo】时，通过GPT-4和【hé】DALL-E 3/Midjourney做了个愤【fèn】怒【nù】的小鸟的教程，3天之内已经【jīng】超【chāo】过了270万【wàn】的浏览。

还曾登顶Hacker News！

按【àn】照他说的方法，从【cóng】游戏素材生成【chéng】，到游【yóu】戏核心【xīn】代码【mǎ】的编写，都使用AI工具完成。

虽然只有一关，但【dàn】是从效果来看已经完全可以流【liú】畅游玩，而【ér】且美【měi】术风格非常成【chéng】熟【shú】，完【wán】全get到了《愤【fèn】怒的小鸟【niǎo】》的玩法和爽点。

教程作者在跑完整个过程后感叹到：

我真的被震撼到【dào】了。老【lǎo】实【shí】说，我从【cóng】来没【méi】想过这一切真的就这【zhè】么发【fā】生【shēng】了。我坚信我们【men】正生【shēng】活在一个迄今为【wéi】止只在科幻电影中看到的历史时刻中。

这个全新的工【gōng】作流程，让【ràng】我【wǒ】们可以仅使用自然语言就能创建任何东西，将改【gǎi】变【biàn】我们所知道的【de】世界。

这是一场如此巨【jù】大的浪潮，那些没有【yǒu】预【yù】见到它到来的人将【jiāng】受【shòu】到沉重【chóng】打击。

网【wǎng】友【yǒu】纷纷感叹，离了大谱！这是我【wǒ】见过最【zuì】酷炫的ChatGPT用例【lì】。

也许我们离这样的场景已经不远了：

只要想想一个游戏的玩法，直【zhí】接和AI智能体沟通，然后它就【jiù】能【néng】给你做出来【lái】。这个【gè】应用【yòng】实【shí】在是太疯狂了。

作【zuò】者【zhě】最后【hòu】补充到，他前后【hòu】制【zhì】作这个【gè】小游戏大概花了10个小时的时间。核心框架花了【le】两个小时【shí】就弄出来了。

后边的时间主要是调整各种细节和处理小问题。

然而我们自己上手试了一下之后，发现，好像还真不是那么回事。

用AI几句话就能做游戏？远没有想象的那么简单

教程作者写的不复杂，整个过程就两个部分。

这部分【fèn】是最简单的，毕竟文生【shēng】图工【gōng】具已【yǐ】经【jīng】面【miàn】世一年多了，大家应该早【zǎo】就熟练掌握了用AI生图的技术要【yào】领了（抄提【tí】示词）。

首先是【shì】用提示词制作一张【zhāng】背景图，作者用DALL·E 3制作的这张【zhāng】开【kāi】始界面图。

Photo of a horizontal vibrant home screen for a video game titled 'Angry Pumpkins'. The design is inspired by the 'Angry Birds' game aesthetic but different. Halloween elements like haunted houses, gravestones, and bats dominate the background. The game logo is prominently displayed at the center-top, with stylized pumpkin characters looking angry and ready for action on either side. A 'Play' button is located at the bottom center, surrounded by eerie mist.

提示词翻译过来之后，就是一段对于图片内容的详细描述。

一张名【míng】为「愤怒的南瓜」的视频游戏的【de】横向充【chōng】满【mǎn】活力的【de】主屏幕的照片。该设计的灵感【gǎn】来【lái】自于「愤怒的小鸟」游【yóu】戏的美【měi】学，但有【yǒu】所【suǒ】不【bú】同。鬼屋、墓碑和蝙蝠【fú】等【děng】万圣【shèng】节元素【sù】占【zhàn】据了背景。游戏徽标醒目【mù】地显【xiǎn】示在顶部中心【xīn】，风格化的【de】南瓜角色看起来很愤怒，并准备在两侧采取行动。「PLAY」按钮位于底部中心，周围【wéi】环【huán】绕着怪异的薄雾。

但是注意，必须要用英文的提示词，中文只能帮助大家理解。

然后用Midjourney制作了两张游戏背景图。

除了【le】提示词之【zhī】外，还使用了「外画（outpainting）」按钮。

Angry birds skyline in iPhone screenshot, Halloween Edition, graveyard, in the style of light aquamarine and orange, neo-traditionalist, kerem beyit, earthworks, wood, Xbox 360 graphics, light pink and navy --ar 8:5

「iPhone 截图中的【de】愤怒的小鸟天际线【xiàn】，万圣节【jiē】版，墓地，浅海【hǎi】蓝宝【bǎo】石和橙色风格，新传统主义，kerem beyit，土【tǔ】方工【gōng】程【chéng】，木材，Xbox 360 图形，浅粉色和海军蓝 --ar 8:5」

2d platform, stone bricks, Halloween, 2d video game terrain, 2d platformer, Halloween scenario, similar to angry birds, metal slug Halloween, screenshot, in-game asset --ar 8:5

「2d 平台、石【shí】砖、万圣节、2d 视频【pín】游【yóu】戏地形【xíng】、2d 平台游戏、万圣节场【chǎng】景、类【lèi】似于愤怒【nù】的小鸟、合金弹头万【wàn】圣节、屏幕截图、游戏【xì】内资产 --ar 8:5」

Halloween pumpkin, in-game sprite but Halloween edition, simple sprite, 2d, white background

「万圣节【jiē】南【nán】瓜【guā】，游戏中的精灵，但万圣节版，简单的精灵【líng】，2d，白【bái】色背景」

「绿色万【wàn】圣【shèng】节怪物，愚蠢，有趣【qù】，游戏中的精灵【líng】，但万圣节版，简单【dān】的精灵，2d，白【bái】色背景」

Green Halloween monster, silly, amusing, in-game sprite but Halloween edition, simple sprite, 2d, white background

除此之【zhī】外，对于木【mù】箱【xiāng】，骨头等【děng】游戏素材，也就直接【jiē】从Midjourney中生成。

代码部分

游戏的核心部分是600行的代码。

作者完【wán】全没【méi】有动手写任何一行代码【mǎ】，但是想要【yào】用GPT-4生成【chéng】代码也是【shì】非常有挑战的任务，作者大【dà】部分的精力也是花在了这【zhè】里。

作者添加了许多细节，例如不同的粒子效果、不同类型的对象等。

作者生【shēng】成600行代码，几乎还是像【xiàng】开发者一样，从最基本的【de】逻辑做起，一【yī】步一【yī】步提出更【gèng】细节【jiē】的要求。

作者也分享了他的初始的prompt：

Now, I ask you: do you know how the birds are launched in Angry Birds? What the finger does on the screen? Exactly. Add this to the game, using the mouse.

「我们现【xiàn】在可以使用 Matter.js 和 p5.js 以《愤怒【nù】的小鸟》的风格【gé】创建一个简【jiǎn】单【dān】的游戏【xì】吗？只【zhī】需使用鼠【shǔ】标以角度和力量发射一个球，然后用 2D 物理【lǐ】击中【zhōng】一些堆叠的【de】盒【hé】子【zǐ】即可。」

当代码出现问题时，用这个提示词向GPT-4提问：

I have this error, please, fix it: Uncaught ReferenceError: Constraint is not defined

我有这【zhè】个错误【wù】，请修复它：Uncaught ReferenceError: Constraint is not defined

教程上手实测

老【lǎo】实【shí】说【shuō】，对于【yú】这件【jiàn】事情，小【xiǎo】编一开始是有些怀疑的。GPT-4V在发布之初，就向大【dà】众展示【shì】了自己做网页【yè】的能力。

用餐巾纸画草图喂给【gěi】模型，直接【jiē】生成出像模像样【yàng】的网【wǎng】页——吃进去的【de】是草，挤【jǐ】出来【lái】的是【shì】奶。

但是【shì】说到具体的游戏，就需【xū】要把静【jìng】态的页面和动态【tài】的逻辑结【jié】合起【qǐ】来【lái】，GPT-4到底【dǐ】能否较好的完成愤怒的小鸟所需要【yào】的功能呢？

本着实事求是的原则，小编尝试为大家复现这个过程。

首先根据作者给【gěi】出的提【tí】示范例【lì】，我们【men】来【lái】考一考GPT-4，它竟然【rán】第一次就真的生成出【chū】了像模像样的代码：

GPT-4同时给出了html和js的代码，出人意料。

由【yóu】于js的代码比【bǐ】较长，所以这【zhè】里只截取展示一小【xiǎo】部分，感兴趣的读者可在文章的最【zuì】后找【zhǎo】到GPT-4首次【cì】生成的程【chéng】序【xù】。

此外，GPT-4还非常耐心地【dì】向用【yòng】户解【jiě】释了程序的流程，它【tā】温我哭。

有了GPT-4生成的html和js两个【gè】文件之后，我们就【jiù】可【kě】以【yǐ】测试一下【xià】是否真的可用。

这里可【kě】能需要【yào】一点点相【xiàng】关的【de】知识或者稍微变通一下。在本地建立文件夹放入刚刚生成的【de】两【liǎng】个文件【jiàn】，直接打开【kāi】果然浏览器报错。

我们把报错【cuò】：「GET https://cdnjs.cloudflare.com/ajax/libs/p5/1.4.0/p5.js net::ERR_ABORTED 404 (Not Found)」丢给【gěi】GPT-4，它给出了【le】如下解决方案：

我【wǒ】们承认【rèn】它【tā】分【fèn】析得【dé】确实有几分道【dào】理，但是对于当【dāng】前问题来说并不起作用。这里人工介入跟【gēn】正确的html文件【jiàn】比对一下【xià】，将报错文件的名字修改【gǎi】正【zhèng】确。

再次【cì】执行，这次的【de】报错来自js文【wén】件：「Uncaught SyntaxError: Identifier 'options' has already been declared」，同样我【wǒ】们还是先【xiān】考一考GPT：

我们虚心接受GPT的建议，再次修改之后，程序居然可以运行了。

有点意思。。。但不多？

最【zuì】后，我【wǒ】们用GPT-4给我们生成的【de】代码和教程作者【zhě】分享的代码进行了【le】一下对【duì】比，确实区【qū】别还很大。

我们的代码只有90行左右，而教程中的成品有600行。

而如【rú】果真的【de】要通过Prompt做【zuò】出教程【chéng】中【zhōng】那个样子的游戏，需要针对做出来的效果【guǒ】进【jìn】一步和GPT-4沟通，完全没有代【dài】码【mǎ】能力几乎是不【bú】可能的。

虽然【rán】作【zuò】者说自己没有写一【yī】行【háng】代码【mǎ】，但是依然花了【le】10个小时才最终完成。

可以想象背后一定还是花了很多【duō】的心思和GPT-4沟通，一定也【yě】需要作者【zhě】有一定的代【dài】码基础【chǔ】，对【duì】游【yóu】戏制作【zuò】流程有基【jī】本的了解。

所以，作者【zhě】也没有办法在教程详细说明游戏生成的【de】具体步骤【zhòu】，只能将【jiāng】大概的思【sī】路和大【dà】家分享【xiǎng】一【yī】下。

不过，作【zuò】者【zhě】的分享至少证明了，对于有【yǒu】代【dài】码能力【lì】，又有工程经验的人，GPT-4真的能够无中生有，10小时出【chū】成品【pǐn】，大大【dà】降低开发时【shí】间和门槛。

但是没有代码能力，没有游戏制作经验的人，这条路暂时还走不通。

参考资料：

https://twitter.com/javilopen/status/1719363439955517499

标签： #不愤怒的小鸟小游戏