我，0代碼基礎(chǔ)小白，20分鐘用Claude 3.5 Sonnet做了一款小游戲

今天只流行一件事，用 Claude 3.5 Sonnet 來做游戲。

OpenAI的勁敵 Anthropic 再放大招，突然發(fā)布Claude 3.5 Sonnet。

經(jīng)過「四木相對論」手搓測試，只能說這次Claude真的，又炸裂了。

先做個科普，Claude3家族有三個參數(shù)量級的模型，分別是：Claude 3 Opus（大杯）、Claude 3 Sonnet（中杯） 和 Claude 3 Haiku（小杯）。

這一次更新的Claude 3.5 Sonnet，是中杯的升級版，目前免費賬號能直接使用，付費賬號將獲得更快速率和更多使用次數(shù)。

這次Claude 3.5 Sonnet在多模態(tài)、推理、代碼能力等方面都有不錯的表現(xiàn)。

（官方數(shù)據(jù)，Claude 3.5 Sonnet 基本超越了GPT-4o、Gemini 1.5 P

更為驚艷的是，Claude 3.5 Sonnet 還推出了一個叫Artifacts 的功能。

這個功能真的絕絕子！它允許用戶在完成輸入后，直觀看到Claude執(zhí)行推理的結(jié)果，并直接展示生成的圖片、代碼等信息。

也就是說， Claude 在模型中植入了一個功能，讓用戶一眼就能栩栩如生地看到自己使用Claude的結(jié)果。

（ Artifacts 右側(cè)區(qū)域展示生成的圖片信息）

「四木相對論」在第一時間，使用Claude 3.5 Sonnet，純純用自然語言（無任何代碼）創(chuàng)作了一款「卡通小人接金幣」小游戲。

效果真的稱得上......炸裂！

一個美好又簡潔的開始

當(dāng)進入新版Claude、或點擊右上角用戶頭像-Feature Preview后，就能打開這個神奇的Artifacts功能。

（進入界面）

這一次，「四木相對論」選擇讓Claude制作一個類似“接金幣”的游戲。

我們首次輸入的Prompt，是對游戲的基本元素、規(guī)則的簡單描述。

能看到，"工具人"Claude被要求用代碼生成一個卡通人物，并按規(guī)則移動人物去接金幣。

我們在Prompt中給Claude挖的“坑”也不少。

比如，允許用戶通過鍵盤上的方向鍵交互；對元素的尺寸描述使用了相對大小，而不是絕對大小；并且對動畫的運動規(guī)則和時長也進行了約束。

指令發(fā)出后，Claude反應(yīng)迅速，在頁面左側(cè)展示出當(dāng)前進行的拆解任務(wù)，右側(cè)的Artifacts區(qū)域會實時展示生成的代碼。

僅用了大約十幾秒（好快），Claude就完成了接金幣1.0版本的代碼，并直接運行在了Artifacts區(qū)域。

能看到，這個第一版的接金幣小游戲的基本功能已經(jīng)具備。

「四木相對論」實際測試，卡通形象能夠根據(jù)鍵盤的左右方向鍵實現(xiàn)移動，也能接到金幣并實現(xiàn)加分。

（太了！！）

但是這個1.0版本也有著顯而易見的問題。

首先是游戲畫面較寬。

受限于Artifacts較窄的區(qū)域，我們無法看到超過寬度部分的畫面，并且當(dāng)人物向右移動到需要滑動頁面才能展示出的區(qū)域時，左上角的得分也會滑出畫面。

此外，雖然從左上角的分?jǐn)?shù)變化可以知道人物成功接到了金幣，但金幣并沒有消失，而是會穿過人物繼續(xù)運動。

最后，分?jǐn)?shù)也不是每次加1，而是有+12、+14兩種隨機變化。

追（事）求（兒）卓（很）越（多）的「四木相對論」怎么可能就此停止！

于是，我們繼續(xù)嘗試對上述的問題優(yōu)化，對Claude提出了整整六個優(yōu)化點。

其中比較難的是，Claude需要通過對相對位置的描述，增加金幣被接到后消失的邏輯。

這里，我們的Prompt只寫了“當(dāng)金幣模型的下邊緣接觸到人物的上邊緣時，金幣消失，分?jǐn)?shù)增加”。

這意味Claude不僅得準(zhǔn)確找到兩個元素，還得分別計算上下兩個邊緣的位置。

（是不是很像接到老板需求的牛馬）

另外，1.0版本中人物的移動不夠平滑，我們也要求Claude嘗試通過“需要使得運動更為平滑”的指令來在2.0版本中修復(fù)。

（2.0優(yōu)化要求）

指令發(fā)出，開始生成代碼。

聰慧的Claude，這次還體現(xiàn)出細心的特質(zhì)——在Artifacts中，它除了顯示優(yōu)化后的代碼，還貼心地在注釋部分標(biāo)注出此處分別是在響應(yīng)哪一個命令。

（Claude給出注釋）

仍然是大約十幾秒的時間，我們成功獲得了接金幣游戲的2.0版本。

（優(yōu)化過的2.0版本）

輸入的6條優(yōu)化指令，全部都被準(zhǔn)確的執(zhí)行了。

當(dāng)然，請忽略Claude認(rèn)為這個詭異的、有著奇怪劉海兒和微笑的粉紅色圓臉，是更“可愛”的形象。

能看到，這一版本Claude幾乎進行了所有我們提出的優(yōu)化：

• 畫面縮小到了Artifacts能顯示完全的區(qū)域，并增加了邊界線；
• 人物的移動非常平滑；
• 金幣的掉落速度更快了；
• 成功實現(xiàn)金幣被接到后消失的邏輯，消失的時機完全符合描述。
  

只有“分?jǐn)?shù)的遞增”遇到一個可能是偶發(fā)的bug（后續(xù)這個問題自動被Claude修復(fù)了），也就是當(dāng)分?jǐn)?shù)遞增到14后，下一個分?jǐn)?shù)直接變成了489。

2.0版本已經(jīng)是一個比較完整的小游戲了。

一個0代碼基礎(chǔ)的小白，能依靠Claude光速做出這種效果已經(jīng)非常超出預(yù)期。

但或許正因一切實現(xiàn)得太過簡單，我們決定繼續(xù)進行更為復(fù)雜的優(yōu)化。

希望能難倒Claude。

開始“封神”

3.0版本，我們進行了更為復(fù)雜的優(yōu)化邏輯描述。

我們要求Claude對畫面背景進行優(yōu)化：

• 分別生成天空和土地來填充游戲畫面；
• 還對金幣的樣式進行了約束，不再希望使用一個黃色的純色圓形；
• 增加了一種掉落物體，除了金幣，現(xiàn)在還可能會掉下來炸彈，被接到后會進行扣分；
• 增加了分?jǐn)?shù)變化時的動畫，不再是僅僅變更數(shù)字。

也就是說，這次Claude接到的任務(wù)不僅包括視覺迭代，還要實現(xiàn)更復(fù)雜的游戲邏輯。

這一次，在生成的代碼中，Claude自己給炸彈出現(xiàn)的概率增加了定義。

（Claude自己進行概率注釋）

這又一次震驚了我們。

我們給定的Prompt其實疏忽了這一點，沒有對炸彈和金幣分別出現(xiàn)的概率進行說明。

而Claude的代碼中自動增加了70%出現(xiàn)金幣，30%的概率出現(xiàn)炸彈的、一個非常合理的比例。

按照常理推測，如果用戶并未定義概率，增加一種掉落物體后兩種物體的掉落數(shù)量應(yīng)該是1:1的。

但似乎Claude“知道”這個游戲應(yīng)該怎么玩，金幣的數(shù)量應(yīng)該高于炸彈的數(shù)量，所以它自己設(shè)定了一個合理值。

（也就是說，在游戲邏輯上，這次我被Claude打敗了......）

再來看Artifacts給出的展示，3.0版本看上去非常完整：

卡通形象不再“奇怪”；金幣和炸彈會同時掉落；有加分也有減分；分?jǐn)?shù)能夠準(zhǔn)確計算；分?jǐn)?shù)的變化也會有相應(yīng)的動畫。

（3.0版本的游戲）

再仔細看這個動畫Demo，我們又有了驚人的發(fā)現(xiàn)！！

這次，Claude不僅“智慧”地自己增加了炸彈概率，還“自作主張”對分?jǐn)?shù)加減，給出了兩種不同的顏色。

而我們在Prompt中并未說明，接到金幣加分和接到炸彈減分，并使用不同顏色動畫展示的需求。

可是，Claude給到我們的效果，加分使用了綠色的“+1”，減分使用了紅色的“-10”。

（它不僅是真的會玩，還真的會教別人玩......）

再難一點，讓我們增加“道具”這個概念。

4.0版本的優(yōu)化Prompt中，我們增加了“護盾”這個道具，嘗試難倒Claude。

（增加護盾要求）

這里，我們要求除了掉落金幣和炸彈外，還可能掉落護盾，讓Claude生成一個盾牌樣式的圖片，并規(guī)定了護盾物體的尺寸、運動速度。

我們還向它描述了，當(dāng)玩家接到護盾后，人物需要展示的動畫，以及未來10秒即使接到炸彈也不會扣分的“特效”。

除了護盾的改動外，還額外增加了一次加10分的“大金幣”、縮小了地面貼圖的尺寸、增加了裝飾天空的白云。

這一次，Claude直接“封神”。

白云、大金幣、護盾這些元素，都成功出現(xiàn)在了畫面中。

并且，它設(shè)計的人物在接到護盾后，周邊顯示出一圈藍色的邊。護盾讓人物在抵擋炸彈的同時，也能夠正常接到金幣加分。

（4.0版本的游戲）

10秒之后，代表護盾的藍色邊框會自動消失，接到炸彈會正常扣分。

這邏輯，真的是太完整了。

終于還是遇到了“bug”

體驗過讓人驚艷的4.0版本后，我們還是不滿足。

于是在5.0版本中，Claude被要求增加更為復(fù)雜的“技能”概念、給游戲增加一個結(jié)束狀態(tài)，以及在每一次運行時保存并計算歷史最高分。

但是沒想到這次輸入后，Claude在生成代碼到一半時，就報錯了。

從給到的提示來看，這次Claude生成的代碼太多，已經(jīng)超過了單次回復(fù)允許的最大長度，所以代碼還沒有完全生成完，就中斷了任務(wù)。

當(dāng)然，大家也可以氪金來解鎖......

我們決定繼續(xù)斗智斗勇，嘗試將完整版4.0的代碼進行下載，Claude創(chuàng)建并保存了一個.tsx的文件。

接下來，開啟新對話，上傳代碼，刪除可能占用代碼字?jǐn)?shù)較多的“人物技能”部分的prompt，繼續(xù)嘗試進行5.0的優(yōu)化。

果然，在清空了上下文、縮短了可能的生成代碼長度之后，Claude這次完整生成了所有代碼。

有意思的是，盡管刪除了“技能”的設(shè)定，5.0版本的代碼長度也依然很長，導(dǎo)致Claude還沒說完解釋的話，就中斷了任務(wù)。

不過呢，代碼部分已經(jīng)完成生成了，所以并沒有太大影響。

5.0版本的優(yōu)化第一次出現(xiàn)了比較大的偏差。

（5.0版本的的游戲）

除了白云成功增加了動畫、地面增加了小草（非常小，仔細看能看到地上有3個小凸起）之外，最主要的游戲結(jié)束邏輯并沒能正確生成。

按照預(yù)期，當(dāng)分?jǐn)?shù)降至-30或以下時，游戲應(yīng)該暫停，畫面上顯示出Game Over字樣，并同時顯示歷史最高分。

但在這次實際生成的demo中，Claude并沒有實現(xiàn)這一功能，而是清空屏幕、重置分?jǐn)?shù)，直接重新開始了游戲。

我們嘗試通過描述來解決bug，也就是直接告訴Claude，“當(dāng)前版本的代碼中，不會暫停游戲，而是將分?jǐn)?shù)清零后，直接重新開始游戲”，同時一并修復(fù)那肉眼基本不可見的小草。

Claude先是立刻表示了歉意，承認(rèn)“我說的對”，然后又迅速改了一版代碼。

結(jié)果，只有小草變大了（雖然也不怎么像草），游戲結(jié)束的bug并沒有修好，沒有暫停畫面，沒有Game Over，也沒有“重新開始”的按鈕。

（它終于出Bug了）

讓用戶看得見效果

這次綜合體驗下來，雖然Claude最后并沒有幫助我們實現(xiàn)全部的想法，但整體的體驗還是讓人不由得贊嘆，技術(shù)小白終于能夠基本絲滑“零門檻”地制作游戲了。

之前，其他大語言模型也可以根據(jù)描述生成代碼，但對沒有任何研發(fā)經(jīng)驗的用戶來說，很多時候仍不知道拿到這些代碼后應(yīng)該怎么“玩”這個游戲。

并且，用戶不能看到運行效果，也就不知道這些代碼到底有沒有問題，是不是符合預(yù)期。

然而，這次使用了更強模型的Claude，通過神奇的Artifacts功能，絲滑解決了這個問題。

盡管單次輸入輸出的token數(shù)、單輪對話上下文的token數(shù)等還存在限制，但就和Suno一樣，現(xiàn)在的Claude能讓用戶立刻看到自己的產(chǎn)物，立刻優(yōu)化打磨，真正“玩”起來。

不論是模型能力還是用戶體驗，這一次，Claude 3.5 Sonnet贏了。