不到 15 分钟，用 Claude 3.5 写了个简易版网页小游戏

Claude2024-06-23 19:07:5087

用 Claude 3.5 Sonnet 写了一个网页小游戏，一共用了 7 轮对话完成（文末有完整视频演示和代码开源地址），给 Claude 的完整指令如下：

第一步

我的 Beta 世界：设计一个网页小游戏，玩家扮演一个角色，需要接住从树上掉下来的水果，同时避开掉落的石头或其他障碍物。

Claude 3.5 Sonnet：第一版给出的这个 HTML5 游戏包含以下主要功能：

玩家控制: 使用左右箭头键移动底部的红色方块(玩家)。
掉落物品: 绿色圆圈代表水果(加分),灰色圆圈代表石头(减分)。
计分系统: 接到水果加 1 分,接到石头减 1 分。
游戏结束: 当分数小于 0 时,游戏结束。

第二步

我的 Beta 世界：没有办法自己移动接水果，请检查下原因。

Claude 3.5 Sonnet：第二版的改进内容如下：

键盘控制逻辑：
之前的代码只在按键按下时移动玩家，这导致移动不连续。
现在我们使用 keydown 和 keyup 事件来跟踪按键状态，使移动更流畅。
玩家移动实现：
在 update 函数中添加了玩家移动的逻辑。
当左箭头或右箭头被按下时，玩家会持续移动。
碰撞检测优化：
稍微调整了碰撞检测的逻辑，使其更准确。
掉落物品生成：
调整了掉落物品的生成位置，确保它们不会在画面边缘之外生成。
初始玩家位置：
调整了玩家的初始 x 坐标，使其正确居中。

第三步

我的 Beta 世界：请根据得分情况调整水果下落速度，得分越多，下落速度越快。

Claude 3.5 Sonnet：

添加了 getSpeedMultiplier 函数：这个函数根据当前得分计算速度倍数。每获得 10 分，速度就会增加 10%。
function getSpeedMultiplier() {    return 1 + Math.floor(score / 10) * 0.1;}
在 update 函数中应用速度倍数：这样，所有掉落物品的速度都会随着得分的增加而加快。
const speedMultiplier = getSpeedMultiplier();
items.forEach(item => {    item.y += item.speed * speedMultiplier;    // ...});
在游戏界面上显示当前难度

第四步

我的 Beta 世界：初始速度快一点，还有个 bug，碰到障碍物后游戏没有结束

Claude 3.5 Sonnet：

提高初始速度，将初始倍数从 1 调整为 1.5：
修复游戏结束的 bug：在碰撞检测的逻辑中，我添加了对石头的特殊处理，只要玩家碰到石头（障碍物），游戏就会立即结束，而不仅仅是减分。
添加类型属性：在创建物品时添加了类型属性

第五步

我的 Beta 世界：1、自己玩太累了，设置成自动接水果模式 2、不同水果得分不同，现在的模式有点单调

Claude 3.5 Sonnet：以下是主要的改进：

自动接水果模式：
按空格键可以切换自动/手动模式。
在自动模式下，玩家会自动移动到最近的水果位置。
多种水果：
新增了不同种类的水果，每种水果有不同的分数和大小。
水果种类包括：苹果（1 分）、香蕉（2 分）、橙子（3 分）和西瓜（5 分）。
保留了石头作为障碍物（-5 分）。
视觉改进：
每种水果用不同的颜色和大小表示。
在水果上添加了字母标识（A for Apple, B for Banana, etc.）。
游戏机制调整：
难度增加速度调整为每 20 分增加一次。
添加了游戏结束后的重新开始功能（按空格键）。
界面更新：
显示当前游戏模式（自动/手动）。
游戏结束时显示重新开始的提示。