【コードのコツ付】クロードAIのアーティファクト機能で作成したクレーンゲーム

自分の好きなゲームを作ってみませんか？

この記事では、「Claude 3.5 Sonnet Artifacts（クロード 3.5 ソネット アーティファクト）」の概要と、実際に作成したクレーンゲームをコードのコツ付きで紹介します。

「Claude 3.5 Sonnet Artifacts」の概要

Anthropic社（アンソロピック）から、生成AI「Claude 3.5 Sonnet（クロード 3.5 ソネット）」の拡張機能「Artifacts（アーティファクト）」が公開されました。
これは、対話をしながら視覚的なコンテンツをリアルタイムで生成できる画期的な機能です。簡単なゲーム生成、Webサイトの簡易設計、スライドやチャートの作成などが可能です。
この機能は、誰でも無料で利用できます。（利用制限あり）

クロードAIのアーティファクト機能は、別の記事で説明しているので、ご覧ください。

簡単なゲームの例
作成したいゲームの内容を入力するとプログラムコードを自動で作成してくれます。リアルタイムで生成しながら編集できるので、プログラミング初心者でも簡単にゲームが作れます。

AidX研究所が作成した「クレーンゲーム」の紹介

「Artifacts」機能を使用して、「デジタルクレーンゲーム」を作りました。
成果物を確認しながら、クロードAIと会話して、ステップバイステップで目標に近づけました。
修正を重ねる際に、コードが省略されることがあり、その場合はエラーになるので、「省略せずに完全なコードを提供してください。」と毎回伝えるようにしました。

デジタルクレーンゲーム

Youtubeの紹介動画はこちら

ゲームの遊び方

デジタルクレーンゲーム：60秒タイムアタックで景品をゲット！

＜遊び方＞
ゲームスタート: 画面中央の「ゲームスタート」ボタンをクリックしてゲームを開始します。
クレーン操作:
・矢印ボタン（← ↑ ↓ →）でクレーンを左右、奥、手前に動かします。
・「GO」ボタンでクレーンを降下させ、景品を掴みます。
・「カメラ切替」ボタンで視点を変えられます。
景品獲得: クレーンが景品を掴んで持ち上げ、下に落下した景品が黒い四角の中に入ると獲得となります。獲得した景品の数に応じてスコアが増加します。
制限時間: 制限時間は60秒です。時間内にできるだけ多くの景品を獲得しましょう！
ゲーム終了: 制限時間が0になるとゲーム終了です。獲得した景品の合計スコアが表示されます。
再挑戦: 「もう一度プレイ」ボタンをクリックして、何度でも挑戦できます。

☆ポイント☆
・景品はランダムに配置されます。
・カメラを切り替えて、景品との距離感や位置関係を確認しましょう。
・制限時間内に効率よく景品を獲得できるよう、戦略を立ててプレイしましょう！

さあ、デジタルクレーンゲームに挑戦して、高スコアを目指しましょう！

以下のサイトにアクセスして、「Show Content」ボタンをクリックするとゲームが始まります。