夜雨聆风很多人觉得做游戏是专业程序员、设计师的专属技能，需要掌握复杂的代码、美术、编曲知识。
但在AI时代，零基础普通人也能从零做出一款完整可玩、可分享的网页小游戏。
今天给大家整理一套全流程AI小游戏制作教程，以经典的「接水果小游戏」为例，从代码开发、美术设计、背景音乐到线上发布，全程AI辅助，电脑、手机、平板均可操作，做完可直接生成类似下图的链接/二维码分享给好友，大家也可以扫描其中的二维码进行体验，第一次加载时间需要久一点。
本次小游戏所有环节均由AI独立完成，包含代码编写、美术画面、背景音乐制作，我们仅需下达指令、简单调试即可。全程无需专业技能，新手也能轻松上手，电脑用户可以看到第二章的内容，手机及平板移动端端用户可以看到第三章的内容。
全套免费工具清单（国内网页或软件可直接打开）
代码开发：TRAEIDE（电脑）、Deepseek（手机） 美术素材：豆包AI（画图）、抠抠图（在线抠图）、醒图（手机抠图） 背景音乐：MiniMax（AI音乐生成） 项目发布：艾可秀（原型托管分享）、图小小（图片压缩减重）
百度搜索「TRAE」或直接访问官网：https://www.trae.cn/，下载安装TRAEIDE，全程傻瓜式下一步安装即可。
安装后之后进入软件，看到的是如下的界面，然后我们新建个名为game的项目。
和AI直接输入如下内容：
"提示词：制作一款接水果的网页游戏，玩家可以通过控制人物来接住从天上掉下来的水果，水果有苹果，香蕉，草莓，分别计分为1，2，3分。接到水果需要有音效，画面实现不用很复杂，新建个html文件到当前目录下。
AI实现的效果如下：
可以看到最基本的实现接到水果分类，得分统计，人物移动已经有了，这样就可以进入到下一步了。如果想再一开始就做全面一点的朋友可以看到下面进阶代码的内容
由于AI的随机性和不可控，哪怕提问的话术一致，生成的内容可能会有偏差，甚至说出现运行不了的情况，这些都是正常现象，出现这种情况大家一方面可以点击右上角新建窗口重新提问，另一方面可以描述当前游戏的问题，继续向AI提问让其进行修改，比如游戏黑屏点开没有反应，人物/水果没有生成等。
那在这里也会引申出来一个新的问题，我们可能在最开始设计游戏的时候，不知道需要考虑哪些游戏环节，比如在接水果中就会有接几种水果，有没有障碍物，奖励物，水果下落时间等问题。这种由于我们也不是专业的游戏设计人员，也没有很好的创意想法的话，完全可以先和AI进行沟通，让其反问我们，由我们来做选择题而不是填空题。这里就给了AI一个身份，并且由他来引导并确认我们的想法。
"提示词：你现在是一名资深的手机网页小游戏开发者，现在需要制作一款接水果的网页小游戏。为了更好地完成上述任务，请你思考一下我还需要给你提供哪些信息，按照列表的形式列出，等我补充完毕之后你再开始工作
这样生成的游戏就会更加偏向我们自己的想法，避免出现AI随意发挥的情况
有了基础玩法之后，下一步我们就需要对其进行进一步的美化。
基础代码完成后，默认是简约图形，我们可以用AI生成专属人物、水果、背景素材，美化游戏画面。我们可以打开豆包，让其可以帮我生成图片。
人物因为涉及到多个状态，所以对应画面会有一些复杂，大家可以就可以实现最简单的第一张人物图就可以，后续再来优化。在这里，这里我是直接自拍了一张图片让其生成图片。
"提示词：帮我生成图片：请根据次人物形象的特征，生成对应的像素人物形象，是要在接水果这个游戏中，作为接水果的人物形象，像素风格，头大身子小，表情夸张，动作幅度大，接水果时自带“手忙脚乱”的喜感，水果篮是空的不要有东西，然后举过头顶
关于人物形象我当时脑子里只是有个自己的像素人物头顶篮子这个大致想法，然后上述的提示词也是可以先和AI先进行沟通，让他提供你来做选择。
然后我们可以根据他的建议，继续补充同一个人物其他动作的图片（这一部分第一次可以跳过，后续再来优化）：
当然这中间图片会出现和原图动作不一致的情况，这个时候可以通过自然语言进行描述和AI说图片需要保持和原先的动作一致，只是修改XX部分，具体说明你要改动的点。
还有就是提供最开始的图片，然后说沿用这版像素人物特征，修改为xx的状态，动作和画风保持一致，也可以在保持画面一致的效果，但是也是需要具体说明你要改动的点。
人物因为会有不同情况，所以需要做不同的神态动作会使得游戏画面更加流畅，这就涉及到画面一致性问题，上述就介绍了可以通过提示词和提供原图来让其尽可能保持一致，但就算这样其实也不能保证一定可以，这方面画面调试需要花点力气，大家如果只是要个效果的话可以就实现人物最开始状态就行了，后续再优化也可以。其他物品的生成会简单一些，生成逻辑也是类似：
当人物，凋落物和背景都生成好之后，我们需要将人物和凋落物的背景给去除掉，这点豆包有时候没办法去除，就可以用一些在线网站来智能抠图，这里以我使用的扣扣图为例（网址：https://www.koukoutu.com/）
其他图片都处理好之后，我们需要将这些图片绑定上我们最开始实现的代码，那首先需要将这些图片先都导入到代码的目录中。我们可以回到Trae，在最左侧的资源管理器中，鼠标右键选择在文件资源管理器中显示。具体操作流程如下图：
其他的同理，这里我分为了四类，分别是水果（fruit），障碍物（obstacle），人物（people）和奖励物（reward），在Trae中的资源管理器器可以同步看到
然后就是逐一修改代码来绑定这些图片
至此游戏最核心部分就算完成了，其中遇到问题可以再和AI沟通描述你的问题，各位在开始也可以只绑定几张关键的图，等后面熟悉流程了再来增添画面。
生成背景音乐使用的是minimax（网址：https://www.minimaxi.com/audio/music）
生成好背景音乐之后，下载背景音乐，然后放入到项目中，可以重命名为backgroud代表是背景音乐，然后一样和AI描述让其添加背景音乐到项目中
项目完成之后，需要进行发布让朋友能够玩到，这里可以访问艾可秀（网址：https://www.axureshow.com/），将我们的文件上传即可。
首先访问Deepseek，进入到专家模式和深度思考都勾选上，输入需要生成个接水果小游戏的相关提示词
这里也把提示词提供出来方便大家进行复制
"提示词：制作一款接水果的网页游戏，玩家可以通过控制人物来接住从天上掉下来的水果，水果有苹果，香蕉，草莓，分别计分为1，2，3分。接到水果需要有音效，画面实现不用很复杂，请你提供给我html代码。
代码生成好之后，由于手机不能直接运行，我们需要有个工具来运行我们的代码，安卓系统就下载手机编程这个软件，苹果系统就下载Spack Editor这个软件，下面分别通过图示来讲解两者软件上的操作。注意华为的鸿蒙系统暂不支持。
可以看到最基本的实现接到水果分类，得分统计，人物移动已经有了，这样就可以进入到下一步了。如果想再一开始就做全面一点的朋友可以看到下面进阶代码的内容。
可以看到最基本的实现接到水果分类，得分统计，人物移动这些基本功能已经有了，这样就可以进入到下一步了。但这里需要注意的是，由于AI的随机性和不可控，哪怕提问的话术一致，生成的内容可能会有偏差，甚至说出现运行不了的情况，这些都是正常现象，出现这种情况大家一方面可以新开个窗口重新提问，另一方面可以描述当前游戏的问题，继续向AI提问，比如游戏黑屏点开没有反应，人物/水果没有生成等。
那在这里也会引申出来一个新的问题，我们可能在最开始设计游戏的时候，不知道需要考虑哪些游戏环节，比如在接水果中就会有接几种水果，有没有障碍物，奖励物，水果下落时间等问题，这种由于我们也不是专业的设计人员，也没有很好的创意想法的话，完全可以先和AI进行沟通，让其反问我们，由我们来做选择题而不是填空题。这里就给了AI一个身份，并且由他来引导并确认我们的想法。
"提示词：你现在是一名资深的手机网页小游戏开发者，现在需要制作一款接水果的网页小游戏。为了更好地完成上述任务，请你思考一下我还需要给你提供哪些信息，按照列表的形式列出，等我补充完毕之后你再开始工作
AI思考结束之后然后会给你张清单让我们确认，然后我们就可以逐一回答这些问题，如果其中一些问题你还是不确认的话，可以继续让AI解释给你听，这样生成的代码从一开始来说会比我们自己想的更加完善。
移动端美术画面的实现与电脑端的差不多，简单来说就是在豆包上生成对应游戏需要的图片，具体可以看到上面电脑端美术画面的2.1人物和2.2其他，这次主要讲讲在移动端如何对生成好的图片进行抠图和如何将这些图片绑定上代码。
手机下载醒图，然后按照图中步骤对每张图片进行抠图。
先把图片都通过各自软件进行导入，下面会通过图示方式来详细说明
下面的图片是导入具体一张图片的流程：
下面是关于项目整体导入的图片目录结构，目的是为了给大家展示后续图片多了之后，新建文件夹分门别类会更加好整理：
下面的图片是导入具体一张图片的流程：
下面是关于项目整体导入的图片目录结构，目的是为了给大家展示后续图片多了之后，新建文件夹分门别类会更加好整理：
导入好图片之后，需要回到deepseek生成最开始代码的聊天框中，继续描述你的需求，需要详细告诉他什么图片是绑定的哪个内容，这个时候图片的分类和取名就显得比较重要，决定了我们在这里的描述方不方便。
"提示词：同一个目录下，有个名为xxxt的文件夹，里面有名为xxx.png，xxx.png，xxx.png，xxx.png的图片，分别绑定的是苹果，香蕉，西瓜，草莓。
背景音乐生成使用minimax（网址：https://www.minimaxi.com/audio/music）
生成好了之后和图片一样引入到项目中，然后修改代码绑定这个音乐。
首先先对文件进行压缩
然后登录艾可秀（网址：https://www.axureshow.com/），上传压缩好的文件。
先对文件进行压缩，由于苹果测试不能直接使用艾可秀来上传文件，所以需要将压缩的文件发送到电脑上，然后通过电脑来进行项目发布，具体可以看到电脑端的项目发布。
艾可秀上免费版限制文件大小是30M，如果文件大于这个数的话，可以使用图小小（网址：https://picsmaller.com/）来对其中的png图片进行格式转换城webp，大小会小很多，然后重新再绑定图片，修改下代码再来压缩发布。
内容的诞生起源于在准备AI线下分享活动中，在思考有没有一种方式，可以有趣味的将AI里的多种内容进行一个串联，创造出一个独属于自己的东西。那游戏实际上也就是代码，音乐，美术的结合体，就是对于青少年来说是最好的载体。虽然现在市面上也有很多一键生成游戏的各类平台，但其实只是从单一维度的教学，没法体现出来AI在多个领域的应用。那在上周线下分享的时候，在场学生对于AI只会用于简单搜答案、生成文字，却不会用AI从零落地完整作品。这次小游戏制作，不仅是一次实操，更是一套可复用的AI学习思维：
- 好奇心是AI时代最大的优势：
这个时代知识淘汰的速度变得很快，如果没有好奇心，那对对于很多事物其实也没有学习的动力，好奇心会让人主动去研究，去探索自己之前未曾接触过的东西，如果对于事物第一反应是好麻烦没意思，其实会错失掉很多成长的机会，所以下次遇到一个新鲜事物，不妨抱着看一看，试一试的想法，这也是小孩子对于大人来说的一个优势，世间万物对于他们来说都是新奇的，值得被探索的。 - 基础知识变得愈发重要：
在做游戏的过程中，文件整理、素材分类、复制粘贴、路径排查这些基础操作，看似简单，但对于很多人，哪怕是成年人来说，对于电脑的基础使用还是处在小白的阶段。这些基础知识其实和AI没有多大的关系，但是AI可以帮助你学好这些知识，相信之前有过一些编程经历在操作的过程，就是会比没有操作快的顺手很多，AI终究是个工具，并不能说帮你解决全部的问题，他的上限，也取决于使用者本身的水平。 - 学会描述清楚自己的需求：
我的感觉是把AI看成一个活生生的人，这样你在和他沟通的过程中就会换位思考，把时间地点人物给他讲清楚，如果你没有这方面知识储备，那就让AI帮你梳理需求、列出问题，你做选择和确认。清晰的沟通逻辑，才能让AI产出贴合自己预期的内容。这些都是浏览器搜索所做不到的东西，一个是陈述问题，一个是讨论问题。 - 使用AI创造具体的东西：
AI可以写文章，画图，做视频，做音乐......当前AI的应用已经百花齐放了，但如果不自己动手做一做的话，你会发现原先和AI要怎么聊，一些知识原来自己不知道，实践才是最好的老师，同时这个东西由你从零到一创造出来，这种成就感也是去玩游戏本身所带不来的。
那在最后，也祝愿大家前程似锦，在AI工具上锦上添花。