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

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

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

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

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

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

這次Claude 3.5 Sonnet在多模態、推理、代碼能力等方面都有不錯的表現。

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

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

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

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

（ Artifacts 右側區域展示生成的圖片信息）

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

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

一個美好又簡潔的開始

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

（進入界面）

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

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

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

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

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

指令發出后，Claude反應迅速，在頁面左側展示出當前進行的拆解任務，右側的Artifacts區域會實時展示生成的代碼。

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

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

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

（太了?。。?/p>

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

首先是游戲畫面較寬。

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

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

最后，分數也不是每次加1，而是有+12、+14兩種隨機變化。

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

于是，我們繼續嘗試對上述的問題優化，對Claude提出了整整六個優化點。

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

這里，我們的Prompt只寫了“當金幣模型的下邊緣接觸到人物的上邊緣時，金幣消失，分數增加”。

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

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

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

（2.0優化要求）

指令發出，開始生成代碼。

聰慧的Claude，這次還體現出細心的特質——在Artifacts中，它除了顯示優化后的代碼，還貼心地在注釋部分標注出此處分別是在響應哪一個命令。

（Claude給出注釋）

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

（優化過的2.0版本）

輸入的6條優化指令，全部都被準確的執行了。

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

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

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

只有“分數的遞增”遇到一個可能是偶發的bug（后續這個問題自動被Claude修復了），也就是當分數遞增到14后，下一個分數直接變成了489。

2.0版本已經是一個比較完整的小游戲了。

一個0代碼基礎的小白，能依靠Claude光速做出這種效果已經非常超出預期。

但或許正因一切實現得太過簡單，我們決定繼續進行更為復雜的優化。

希望能難倒Claude。

開始“封神”

3.0版本，我們進行了更為復雜的優化邏輯描述。

我們要求Claude對畫面背景進行優化：

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

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

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

（Claude自己進行概率注釋）

這又一次震驚了我們。

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

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

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

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

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

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

卡通形象不再“奇怪”；金幣和炸彈會同時掉落；有加分也有減分；分數能夠準確計算；分數的變化也會有相應的動畫。

（3.0版本的游戲）

再仔細看這個動畫Demo，我們又有了驚人的發現！！

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

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

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

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

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

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

（增加護盾要求）

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

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

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

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

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

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

（4.0版本的游戲）

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

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

終于還是遇到了“bug”

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

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

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

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

當然，大家也可以氪金來解鎖......

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

接下來，開啟新對話，上傳代碼，刪除可能占用代碼字數較多的“人物技能”部分的prompt，繼續嘗試進行5.0的優化。

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

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

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

5.0版本的優化第一次出現了比較大的偏差。

（5.0版本的的游戲）

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

按照預期，當分數降至-30或以下時，游戲應該暫停，畫面上顯示出Game Over字樣，并同時顯示歷史最高分。

但在這次實際生成的demo中，Claude并沒有實現這一功能，而是清空屏幕、重置分數，直接重新開始了游戲。

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

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

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

（它終于出Bug了）

讓用戶看得見效果

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

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

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

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

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

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