磨叨两句没用的

AIGC确实具备了很让人惊艳的开发能力,但是AIGC和人一样他是会犯错的,并且也和人一样,需要充分的沟通才能够理解你向它安排任务的准确意图。因此,我们不仅仅是要构建一套AIGC游戏开发解决方案,我们还要带着大家通过一些尝试和练习,逐渐学会与大模型沟通,学会检查大模型完成的作业,跟随技术浪潮,选择更好的AI和更好的智能体。

初始化工程

在我们要尝试的开发,依然采用第3章的标准工程目录结构:

Snake_Game/
├── phaser-v3.9/
│   ├── phaser.min.js
├── assets/
│   ├── images/
│   ├── audio/
│   └── sprites/
├── src/
│   ├── scenes/
│   ├── entities/
│   ├── utils/
│   ├── config.js
│   └── main.js
├── index.html
└── README.md

因为我们需要让AI来生成代码,所以我们在index.html中只给定代码结构,和必要的引用,不给定实际代码逻辑。

<!DOCTYPE html>
<html>
<head>
    <script src="phaser-v3.9/phaser.min.js"></script>
</head>
<body>

    <script>
    class MainScene extends Phaser.Scene
    {
        preload ()
        {
        }

        create ()
        {
        }

        update ()
        {
        }
    }

    const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: MainScene,
    };

    const game = new Phaser.Game(config);
    </script>

</body>
</html>

CodeBuddy开发经典贪吃蛇

我们先让AIGC根据自己的理解,生成一个经典贪吃蛇游戏,更过几次尝试,如下的提示词更符合我的期望。

本工程已经正确引入了phaser,基于phaser开发一款经典贪吃蛇小游戏,Scene相关的代码在src/scenes目录下实现,游戏主逻辑在src/main.js中实现,相关配置在src/config.js中实现,index.html中已经正确引入的phaser不需要再通过CDN方式引入,但是其它代码可以修改。

CodeBuddy给出的整体实现步骤

我将基于 Phaser 3 开发一款经典贪吃蛇小游戏。以下是实现步骤:

  1. 创建游戏场景:在 src/scenes 目录下实现游戏场景逻辑。

  2. 配置游戏参数:在 src/config.js 中定义游戏配置。

  3. 实现主逻辑:在 src/main.js 中编写游戏主逻辑。

  4. 确保 index.html 正确引入 Phaser:检查并确认 Phaser 的引入方式。

创建游戏场景:src/scenes/GameScene.js

定义游戏配置:src/config.js

编写游戏主逻辑:src/main.js

CodeBuddy检查index.html文件

文件已成功生成或修改:

  1. 游戏场景src/scenes/GameScene.js 已创建,包含基本的场景逻辑。

  2. 游戏配置src/config.js 已更新,定义了游戏的基本参数和物理引擎配置。

  3. 主逻辑src/main.js 已更新,初始化了 Phaser 游戏实例。

接下来,我将检查 index.html 文件以确保 Phaser 的引入方式正确。

index.html 文件中已经正确引入了 Phaser,但需要调整以使用我们新创建的 src 目录下的逻辑。我将修改 index.html ,移除内联脚本并正确引入 src/main.js

index.html 已成功修改,移除了内联脚本并正确引入了 src/main.js 文件。

实现贪吃蛇游戏的核心逻辑:src/scenes/GameScene.js

GameScene.js 已成功更新,实现了贪吃蛇游戏的核心逻辑,包括蛇的移动、食物生成、碰撞检测和绘制功能。

现在,贪吃蛇游戏已经完成,可以运行 index.html 来体验游戏。如果需要进一步优化或有其他需求,请告诉我!

首次运行报错

Uncaught ReferenceError: GameScene is not defined at config.js:5:11

原因是在config.js中没有引入GameScene,我们可以尝试让AI修复它。

CodeBuddy修复报错

这个错误是因为 config.js 中引用了 GameScene ,但未正确导入它。我将修复这个问题,确保 GameSceneconfig.js 中被正确导入。

config.js 已成功更新,添加了对 GameScene 的导入语句。现在错误应该已经解决,可以重新运行游戏。如果还有其他问题,请告诉我!

第二次运行游戏

这个时候游戏可以运行了,但是仍然有BUG,贪吃蛇的身体长度有问题,我们依然让AI自己修复它。

CodeBuddy修复BUG1

贪吃蛇在移动时没有正确刷新画面,导致贪吃神移动过的轨迹都是绿色。

这个问题是因为在 update 方法中没有正确清空画布,导致蛇的移动轨迹残留。我将修改 GameScene.js ,确保每次更新时清空画布并重新绘制蛇和食物。

已修复贪吃蛇移动轨迹残留的问题。现在 clear() 方法会使用 Graphics 对象完全清空画布,确保每次更新时蛇和食物都能正确绘制,不会留下残留痕迹。可以重新运行游戏测试效果。

重新运行游戏,BUG已修复。

CodeBuddy修复BUG2

贪吃蛇撞到自己或者撞到游戏边界时,游戏没有正确重新开始。

这个问题是因为在 moveSnake 方法中,虽然检测到了碰撞并调用了 this.scene.restart() ,但可能没有正确重置游戏状态。我将修改 GameScene.js ,确保在游戏重新开始时完全重置蛇的位置、方向和食物位置。

修复后,贪吃蛇游戏时游戏失败可以正常重启游戏。

纯DeepSeek对话开发HTML5经典贪吃蛇

因为官方的DeeSeek经常罢工,我选择在腾讯元宝中使用DeepSeek。

生成一个经典的H5贪吃蛇小游戏,所有UI操作都要在游戏中

在24秒的深度思考之后,DeepSeek给出了整个的源代码(对话链接,复制到浏览器地址中观看,直接点击无法打开:水代码的搬砖人和腾讯元宝的对话),这是试玩界面。

DeepSeek-R1一次生成HTML5代码零BUG体验,并且游戏设计的元素比较完善,远远优于CodeBuddy中使用DeepSeek-V3给出的结果。

  1. 总结

我们在本次两种环境下让AIGC开发经典贪吃蛇的使用体验其实我个人是非常满意的,无论是纯DeepSeek-R1的一次生成零BUG体验,还是CodeBuddy中使用DeepSeek-V3一步一步的完成开发、测试、修复BUG的过程,都让我对AIGC搞游戏开发充满了信心。

虽然在CodeBuddy中没有一次成型,但是它的开发过程更加规范,给开发人员提供了代码管理功能,可以回滚代码,可以给出清晰的测试方案,任务实现步骤也比较详细,适合做工程化的有一定规模的代码开发,而CodeBuddy每次只解决局部的代码问题。

纯DeepSeek对话模式虽然一次性生成了零BUG游戏,但是随着开发目标的复杂性增加,纯DeepSeek对话模式很难正确的修复BUG,并且代码量过多后也很难有零BUG的情况出现了。

所以我们如果要做AIGC的游戏开发,一定要选一个好的智能体,帮助你管理代码版本、测试方案等内容,而不是直接使用对话的形式进行。

我更倾向于选择一个好的智能体,然后载入一个更适合javascript编程的大模型(比如DeepSeek就很好)。

另外,我在开发的使用AIGC的过程中发现,提问的是否合理,对是否能解决当前的问题影响非常大。

所以在接下来的“AIGC开发H5游戏初探”中,我们将进一步累计经验,逐渐学会向大模型问问题,选择更好的智能体和更适合的大模型!

要多做练习,要多做练习,要多做练习!

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐