Claudeで超シンプルなゲームを作ってみた

最近、AI技術の進歩が目覚ましい中、チャットボットのClaudeが注目されています。ふとしたTwitterの投稿がきっかけで、「Claudeを使って超シンプルなゲームを作ってみたい」と思うようになりました。

🔥ClaudeのArtifactsを最強にできる🔥
【JSライブラリ一覧】

デジタルアート →「p5.js」
物理シミュレーション →「matter.js」
データの可視化 →「D3.js」
3Dシミュレーション →「Three.js」

プロンプト：
〇〇.jsを使って、●●を作って。
単一のHTMLファイルを出力 pic.twitter.com/z2XZWiBMf0

— りくお| AIエンジニア学生 (@riku720720) July 22, 2024

このツイートを参考に、さっそくClaudeを使って植物育成ゲームを作ってみました。以下がそのプロンプトと出来上がったゲームです。

プロンプト

1回目

matter.jsとThree.jsを使って、植物育成ゲームを作って。単一のHTMLファイルを出力。

１回目は微妙な出力だったので続けて２回目のプロンプトを入力しました。

2回目

植物の形を双葉の形にしてください。また、水滴が表示されていませんので、水滴を出すようにしてください。

そして出来上がったゲームがこちらです。

出来上がったゲーム

Claude Artifact

画面をタップすると雨粒が出てきて、植物が成長します。

Claudeを使ってこのようなシンプルなゲームを作ることができました。プロンプトを入力するだけで、AIがゲームの基本的な構造を生成してくれるので、プログラミングの知識がなくても簡単に挑戦できます。ぜひ皆さんも試してみてください！

(この記事はChatGPTを使用しています)