Transcription
大家好。今天我将向大家展示如何使用 Clock Code 构建一个非常有趣的复古太空射击游戏。与我七岁的孩子一起用 Clock Code 构建游戏是我最喜欢的周末活动之一。所以，我也希望你们学会如何做到这一点。
好的，首先，这里有一些我和我的孩子一起构建的游戏。我构建了一个横版卷轴式水下射击游戏，你在其中扮演一个射击鲨鱼的游泳者。我的孩子和我还构建了一个动物医院游戏，你需要治愈不同的动物，然后我们使用 Nano Banana 来生成图像。
但是在这个教程中，我想向你们展示如何在五个步骤中精确地构建一个复古的二维太空射击游戏。所以，第一步，设置项目。第二步，寻找游戏素材。第三步，起草规格。第四步，构建 MEP 并进行迭代。最后，清理并发布游戏。
你知道，Clock Code 可能相当令人望而生畏，但我向你保证，这是一个任何人都可以尝试的教程。我七岁的孩子现在甚至还不会打字，但她知道如何构建游戏。所以，不要被吓倒，让我们直接开始吧。
好的，这里我有一个名为“太空射击游戏”的空文件夹。如果你不知道，这个软件是 Cursor，你可以免费下载，你可以通过终端或其他方式与 Clock Code 对话，但我更喜欢 Cursor，因为我可以实际看到 Clock Code 生成的文件。
那么，如何在这里加载 Clock Code 呢？你进入终端，并且必须确保 Clock Code 已经安装。
好了，快速回顾一下。要安装 Clock Code，只需搜索 Clock Code，然后你所要做的就是复制这个链接，然后将其粘贴到终端中进行安装。顺便说一句，终端有点令人望而生畏，但它实际上并没有那么吓人。它基本上就是与一个 AI 代理进行来回的对话。
所以，在终端中启动 Cloud Code 的默认方式是，安装后只需键入 `claude`，然后按 `yes`，它就会启动 Clock Code。但我喜欢使用 Clock Code 的方式是，我键入 `claude --dangerously-skip-permissions`。我得确保我拼写正确。这样做可以加载 Clock Code，并允许它在你的新文件夹中工作，而无需每次想做某事时都征求你的许可。所以，你可以看到这里它绕过了权限，对吧？相信我，对于你正在查看的东西，对于你正在构建的有趣的东西，这只会让它更有趣。而且 Claude 通常足够聪明，不会搞砸你的文件。
好的，这是设置。现在，让我们继续第二步，也就是寻找游戏美术。所以，你可以做的是，这也是我为我的孩子构建游戏的方式，我安装了一个名为 Whisper Flow 的语音听写应用程序。你也可以使用其他的，但基本上，我只是给 Claude 一个我们想做什么的想法。我的孩子也可以和 Claude 对话。
所以，来了。我想构建一个复古的二维太空射击游戏。你知道，我可以在哪里找到一些免费的像素艺术素材来制作这个游戏？然后，你就有了。它直接粘贴在这里。让我们继续让 Claude 执行这个提示。所以，Claude 拥有内置的网络搜索功能。所以，它实际上可以为你做研究。它会在这里找到很多有趣的链接，例如 Open Game Art、itch.io 等等，你可以自己浏览，也可以让 Claude 浏览。但为了让这个教程对你们来说尽可能简单，我已经找到了一个非常棒的像素包。它是由一个很棒的创作者 Animus 制作的，你可以免费下载。我花了五美元下载了这个。它有一些非常棒的像素艺术。你可以制作一个恶魔城游戏。你可以制作不同类型的平台游戏。你可以制作一个像素女孩跳舞，你甚至可以制作赛博朋克风格的东西等等。
在这里，还有一个用于制作太空射击游戏的包。所以，你所要做的就是去下载这个包，我会在这个视频的描述中包含这个包的链接。
好的，让我们回到 Cursor，我已经下载了像素包，让我们现在去 Finder 打开我们的太空射击游戏文件夹，然后将这个像素包拖放到我们的太空射击游戏文件夹中。就是这样。如果正常工作，它应该会出现在这里。如果你打开它，里面有很多角色、外星人等等，环境，以及我们可以用来构建我们的太空射击游戏的所有很棒的东西。
好了。现在，让我们回到 Clock Code，然后说：“嘿，我刚添加了一些像素艺术。为什么你不看看这个文件夹，列出我们可以用于复古二维太空射击游戏的那些？”
好了。现在 Claude 将会浏览这个新文件夹，并希望找到很多与我们要构建的游戏相关的艺术品。好了，看起来确实有一个太空射击游戏文件夹，里面有很多东西。是的，这看起来很棒。看起来我们已经有了构建游戏所需的艺术品。
所以，让我们继续第三步，也就是起草规格或计划。
好的，现在我要告诉 Clockode 编写一个包含需求、三个里程碑以及我们将要使用的所有像素艺术素材链接的规格。每个里程碑都应该是可玩的。顺便说一句，如果你有任何问题，请使用“询问用户问题”。
在我们执行这个命令之前，让我们先看看我们在这里涵盖的一些最佳实践。对吧？所以，首先，编写一个包含需求的规格。在让 Claude 构建任何东西之前，你应该始终先编写规格。在构建之前，始终先计划。我们将项目分解为三个里程碑，以便我们可以一路测试。你不想一次性让 Claude 构建太多东西。我们还要求它链接所有像素艺术，以便 Claude 知道在哪里找到每个艺术资产。最后，询问用户问题。这是我编写规格的默认方式。现在，这是 Anthropic 推出的一个新工具，它让 Claude 提出一系列问题，以便一起完善规格。这绝对是绝妙的，我将向你展示它是如何工作的。
好了，让我们执行命令。我不认为我们会使用这个跳舞的女孩，所以让我们去掉它。
好了，就是这样。所以，Claude 会问我们一些问题。那么，我们应该用什么技术平台来构建这个？我们可以使用 HTML。我们可以使用 Phaser。对于这类游戏，我更喜欢使用 Phaser。如果你不知道 Phaser 是什么，你可以随时向 Claude 询问更多问题，或者打开一个 Web Cloud 来询问这个问题。但根据我的经验，Phaser 非常适合构建游戏。让我们使用 Phaser。
什么滚动方向和游戏风格？我个人喜欢自上而下的垂直射击游戏。所以我将选择一个。
你想要什么功能？这实际上是多项选择。所以，让我们选择所有这些功能。我们有能量提升系统、Boss 战、得分，我们还可以进行多次波次，对吧？所以，让我们一次性选择所有这些并提交。然后，你就有了。让我们继续提交答案。
现在 Claude 将根据我们的指导为我们编写规格。我将快速跳过，直到 Claude 生成规格。
好的。所以，你看，Claude 实际上为我们写了规格。你知道，作为一名项目经理，我不再拥有正确的规格了。通常我现在做的是和我的女儿一起查看规格。对吧？所以，我们正在构建的是一款经典的垂直滚动二维太空射击游戏。有道理。核心玩法，流畅的每秒 60 帧。好的，没问题。让我们继续，比如能量提升系统等等。我正在寻找的是里程碑，因为我想确保它每次都在构建正确的可玩体验。所以，里程碑一是一个带有基本射击机制的玩家原型。它将设置项目。它将有背景。它将有玩家飞船，并且会有一些从顶部向下移动的敌人。好的，听起来不错。然后，里程碑二是能量提升的进展。里程碑三是 Boss 战和润色。
现在 Claude 还链接了我们将要使用的所有像素艺术素材，这将非常有用。是的，总的来说，这个规格看起来相当不错，对吧？通常，当 Claude 生成规格时，它倾向于一次构建太多东西。所以，我通常喜欢删减一些东西。例如，比如流畅的每秒 60 帧。谁在乎呢？我认为它本来就会很流畅。但是，Opus 和最新的模型都非常出色，以至于 Claude 经常能够一次性完成任务。
好了，让我们实际上就让 Claude 构建里程碑一。构建里程碑一。让我们说，记住使用你链接的所有像素艺术。
好了。所以，我将再次跳过，直到里程碑一完成。
好的，我们回来了。这大约花了 2 分钟。当我与我的女儿一起做这件事，在等待 Claude 工作的时候，我通常会让她看看一些代码，看看幕后是如何工作的，但通常她会走神，直到游戏真正起作用才开始关注。
好了，现在 Claude 说：“去这个链接玩游戏。”所以，让我们实际上复制这个链接并粘贴在这里。本地主机。
在这里，我们有了我们的游戏。让我们看看。我可以移动它。我可以射击。飞机正在飞来。事情似乎工作得很好。比如，一些背景看起来有点奇怪，但总的来说，我们已经有了一个基本的游戏，而且只需要 3 分钟的计划和 2 分钟的实际让 Claude 构建。
好了，让我们回到 Cursor 和 Clock Code，然后让我们让它构建里程碑二，让我们看看里程碑二。里程碑一核心战斗。里程碑二的进展和能量提升系统。好的，这听起来不错。让我们继续构建里程碑二。
现在，让我们跳过几分钟，等里程碑二也完成后再回来。
好了，Claude 已经完成了 Mountain Bounce on 2，这里有一些关于飞船的错误，但你可以看到有更多的飞船种类。有屏幕震动。底部有一个生命条。你知道，事情看起来相当不错。
现在让我们回到 Cursor，然后让我们让它用鼠标三完成游戏。里程碑三将添加 Boss 战。我只是想确保并仔细检查。你将使用什么精灵来制作 Boss 战？只是为了确保它确实有这些东西的艺术品。
所以，让我们看看它会拿出什么。好的，有趣的是，它正在问我一些问题。所以，让我们看看。使用大型名称精灵。为什么我不说，比如，搜索一下遗留收藏，看看是否能找到相关的艺术品。因为这里有大量的艺术品，我很惊讶我找不到其他 Boss 战的东西。
好了。好了。所以，看起来它找到了一个俯视 Boss 的文件夹。你知道，有时你只需要提醒 Claude 更努力地寻找，对吧？所以，它找到了一个俯视 Boss 的文件夹，它想继续进行里程碑三。所以，让我们让它去做。
继续进行里程碑三。好了。让我们看看它为最终游戏会拿出什么。希望没有错误。
好了。所以，它构建了里程碑三。花了大约 4 分钟。让我们玩玩游戏。
所以，第一波。让我们看看。有敌人可以射击。有能量提升。武器升级。好了。现在，我们有了双重射击。你知道，我认为有一个问题，对吧？游戏有点无聊。太容易了，对吧？并没有真正的挑战。敌人一次出现一个。
所以，为什么我们不给 Claude 一些反馈，说，“嘿，游戏太无聊了，伙计。增加敌人的数量。让它更疯狂。也让 Boss 在第一关更快出现，并修复一些看起来不对劲的像素艺术。”
好的，这并不是非常精确的指示，对吧？想象一下，你有一个初级工程师，或者有人在为你构建这个游戏，而你只是给了他一些反馈，看看他是否能根据我给他的模糊反馈修复所有东西。
好的，Claude 告诉我一切都完成了。所以，让我们再玩一次游戏。
好了，我们有了我们的第一关，让我们看看这是否更具挑战性。艺术品仍然有一些问题，我们以后可以修复，但你可以看到更多的敌人正在出现。希望它稍微更疯狂一些。让我们获得所有能量提升。护盾。太棒了。还有什么？速度提升。武器升级。护盾。护盾。好的，我们现在状态相当不错。而且我实际上想看看 Boss 是否会出现。
所以，我将继续玩一会儿，让我们看看 Boss 是否会出现。哦，来了。警告，Boss 即将到来。让我们看看 Boss 和……你知道吗？我实际上根本看不到 Boss。实际上没有 Boss。
所以，为什么我们不实际修复这个问题呢？这是我要做的。我将截取一张屏幕截图，复制它，然后将其放入 Clock Hole。就粘贴在这里，说 Boss 实际上没有出现，并且似乎有零生命值。
好了，让我们看看它是否能根据这个反馈修复这个问题。伙计们，修复这个 Boss 比我想象的要痛苦得多，但让我们看看它是否真的有效。
现在，让我们实际上……所以，我所做的是，我添加了一个热键来加载 Boss，对吧？Boss 即将到来。来了。所以，这是 Boss。这是生命值。然后……嗯，看起来生命值现在在减少。哦，这个 Boss 太难了，伙计。我快死了。嗯，让我看看我能否在死之前将其降到零。好了，在那里失去了飞船。好了，但它快死了，我想。让我们看看。我希望这里有一些能量提升。好了，现在变得非常困难。好的。哦，我的天。好的，我想我把这个 Boss 弄得太难了。
好了，就是这样。在我死之前，我设法杀死了它。但这很有趣。但我想向你们展示这个。
好了，这是我与它进行的实际对话，试图修复 Boss。你可以看到这里，这是一次相当长的对话。老实说，对你们来说，修复它花了大约 10 分钟。而且，如果你和你的孩子一起燃烧这个，他们将没有耐心去修复错误。所以，也许让他们在你修复错误的时候看 YouTube 或其他东西。
但是错误是什么？对吧？所以，即使是为了你自己，学习你正在查看的东西也很重要，对吧？所以我问它，错误是什么？错误是他们将 Boss 的生命值直接存储在 Phaser 对象上。而且，是的，Phaser 精灵可以被 Phaser 引擎修改。所以，我们应该将生命值移到一个场景级别的变量等等。而且，也许我理解这里大约 30% 的内容，而且我可以随时提问。但是，再次，如果你遇到一个棘手的错误，不要放弃，好吗？只是给它指示。尝试修复它。将图像粘贴到 Clock Code 中作为示例，并在最终修复错误后学习错误发生的原因。
好了，我们现在有一个很棒的游戏了，现在我们的最后一步是清理和发布游戏，对吧？所以，我们该如何发布游戏呢？事情是这样的。你应该有一个 GitHub 仓库，你应该创建一个新的仓库。让我们去仓库，让我们创建一个新的仓库，让我们称之为“太空射击游戏”，以匹配我们本地文件夹的名称。对吧？让我们在这里点击创建仓库。
所以，现在我们有了一个全新的 GitHub 仓库。顺便说一句，如果 GitHub 让你望而生畏，它实际上并没有那么吓人。就像使用 Clock Code 一样，它并不吓人。你可以设置一个免费的 GitHub 账户，然后按照我在这里展示的步骤创建一个新的 GitHub 仓库。
好了，基本上就像一个住在 GitHub 上的文件夹。
好了，现在这里重要的是，我们有这个链接，对吧？所以，让我们复制这个链接，然后回到 Clock Hold，然后说：“将这个提交到这个链接。”
所以，现在 Clock Hold 将为我们完成所有工作。它将进行拉取请求。它将在这里完成所有事情。然后，让我们实际上跳过，等 Clock Host 完成将我们的文件上传到 GitHub 后再回来。
好了。所以，Clock Host 说它完成了。让我们推送到 GitHub。让我们看看。嗯，让我们刷新一下。然后，就有了。现在，我们有了所有的文件，对吧？所以，我们有源代码，我们有遗留收藏。我们实际上应该做的是只包含我们实际在游戏中使用的像素艺术，对吧？但现在，我想向你们展示如何获得一个可以玩游戏的链接。
所以，你可以使用 GitHub Pages，但最近我一直在做的是，最简单的方法是创建一个 Versal 账户，versal.com，然后注册一个免费账户。让我们在这里点击添加新。然后让我们点击添加新项目。
好了，它说输入 Git URL 进行部署，对吧？所以，我们的 Git URL 在这里。所以，让我们复制这里并粘贴，然后点击继续。然后，就有了我们的新项目。让我们点击部署。
好了，现在 Verscell 将生成一个 URL，希望任何人都可以通过这个 URL 玩我们的太空射击游戏。
好了，Versel 已经部署了游戏，让我们看看这个链接是否真的有效。点击它，然后，就有了。现在任何人都可以玩我们的太空射击游戏了，我也可以在描述中链接它。
所以，让我们玩一下，看看它是否有效。我们有了我们的波次。仍然需要修复那个飞船。它看起来有点奇怪。我们有了武器升级。让我实际上获得一些武器升级。来了。让我们触发 Boss。记住，我们仍然有热键 Z 来触发 Boss。
所以，现在我有三个 Boss。伙计，你现在会死得比以前快得多。好了，它变得很难。它变得很难。好的，但它很快就会死。来了。我们杀死了 Boss。然后，关卡完成，下一波将开始。你还可以看到背景也变了。
所以，我们刚刚用 Claw Code 在五个步骤中构建了一个复古像素射击游戏。首先，我们设置了项目。我们找到了游戏素材。我们在 Claw 的帮助下，使用“询问用户问题”起草了我们的规格。我们让 Claw 构建了三个里程碑。我们构建并迭代了它。我们遇到了 Boss 的一些棘手错误，但我们成功了，因为我们没有放弃。最后，我们决定发布它。现在任何人都可以玩我们的游戏了。
再次，如果你也想玩，它就在描述中。
所以，事情是这样的。我使用的像素包有比太空射击游戏更多的艺术品。你可以构建恶魔城风格的平台游戏。你可以构建赛博朋克射击游戏，水下冒险游戏，就像我之前和我的孩子展示的那样。你甚至可以构建俯视 RPG。
这个教程的要点是什么？看，很多人觉得 Clocko、终端、GitHub、Versel 以及所有这些东西令人望而生畏。但它真的归结为与 AI 聊天，就像你与 ChatGPT、Claude 或 Gemini 中的 AI 聊天一样。不要想太多。你有一个 AI 在这里帮助你构建游戏。所以，选择一个游戏想法，找到一些免费的像素艺术，或者使用我正在使用的那个，然后开始提示。
好了，我在下面链接了游戏和我的 GitHub 仓库，所以你可以 fork 它并继续改进太空射击游戏。但我希望这个教程能激发你和你的孩子，或者你的配偶，或者任何其他人一起在周末构建一个游戏。这非常有趣。
我将给你留下这个。现在，我们生活在一个创造比消费更有趣的世界里。你知道，在我看来，玩这个游戏比在 Netflix 或 YouTube 上看一些无聊的东西要有趣得多。嗯，除了我的采访，当然。
所以，是的，这个周末去构建一个游戏吧，并且一定要点赞和订阅这个频道，以获取更多实用的、非 AI 的教程和采访。