AIといっしょにクッキークリッカー風のゲームをつくろう！プロンプトエンジニアリングの例

最近はAI技術の発達がめざましく、難しいプログラムでも、AIといっしょに作成することができます。
AIといっしょにプログラミングをすることを、ペアプログラミングやプロンプトエンジニアリングと呼びます。

今回はプロンプトエンジニアリングで、クッキークリッカー風のゲームを作っていきます。

この記事にでてくる「AI」とは、ChatGPTやGeminiなどのテキスト生成AIを意味しています。

そもそもクッキークリッカーとは何か？

クッキークリッカーとは、その名の通り、クッキーをクリックするゲームです。
クッキーをクリックしてポイントを貯めるだけのゲームなのですが、ポイントに反応にしてしまう人間の性質を刺激するのか、とても中毒性があるゲームとして知られています。

まずは下準備

「ゲームをつくる」と言っても、いろんな方法があります。
単純に「AIとゲームをつくりたいです！」とAIに伝えても、「AIとゲームを作るには、AIの活用方法によってアプローチが異なります。」と言われ、難しい話をされてしまいます。

そのため、下準備として「Webサイトと同じ技術を使って、HTML/CSSとJavaScriptでゲームを作りたいです」とAIに伝えましょう！

実は、Webサイトをつくる技術でゲームもできてしまうんです！面白いですね！

そして、「Webサイトと同じ技術を使って、HTML/CSSとJavaScriptでゲームを作りたいです」というような、AIへの依頼文を「プロンプト」と呼びます。
同じように、ゲームをつくる場合の、おすすめの命令です👇お家でもぜひ試してみてください！

プロンプト

Webサイトと同じ技術を使って、HTML/CSSとJavaScriptでゲームを作りたいです。
HTML内に、CSSとJavaScriptを記述し、一つのファイルにしてください。
イラストはできるだけCSSで作成してください。
わからない部分は、AIが考えてつくってください。

クッキークリッカー風のゲームを早速つくってみる

下準備ができたら、さっそくAIとゲームをつくっていきましょう！
はじめに、「CSSで描いた猫をクリックして、クリックした数がカウントされる、クッキークリッカーのようなゲームはできますか？」というように、AIに依頼してみました。

プロンプト

CSSで描いた猫をクリックして、クリックした数がカウントされる、クッキークリッカーのようなゲームはできますか？

そしてできたゲームが下記のものです！

みごとにクリックしたらポイントが貯まる、クッキークリッカー風のゲームができていますね！
これだけの情報で形をつくるなんて、最近のAIは優秀ですね。

ボタンを追加して、ゲームをパワーアップ！

とはいえ、さっきのゲームだと、まだまだゲームっぽくないですね。
ただクリックしてポイントが増えるだけでは、さすがにつまらない……。
なので、ボタンや機能を追加して、ゲームをパワーアップしていきましょう！

よりゲームらしくなるために、強化ボタンと、ポイントを減らしてしまういじわる機能をつけました。

プロンプト

以下の内容で、コードを修正してくれますか？

---
このゲームはクッキークリッカーのようの、ポイントを貯めるゲームです。
ポイントは毎秒1減っていきます。

ネコをクリックするとポイントが1増えます。
ネコのキャラクタの下に、添付した画像のように「キャットフード」「ちゅるちゅる」「おさかな」「おなかきょうか」というボタンを作ってください。


キャットフードのボタンは、ポイントが10以上の時にクリックできるようにしてください。
キャットーフードのボタンをクリックすると、ポイントを10減らし、ネコをクリックしたときのポイントを10増やします。


ちゅるちゅるのボタンは、ポイントが100以上の時にクリックできるようにしてください。
ちゅるちゅるのボタンをクリックすると、ポイントを100減らし、ネコをクリックしたときのポイントを100増やします。


おさかなのボタンは、ポイントが1000以上の時にクリックできるようにしてください。
おさかなのボタンをクリックすると、ポイントを100減らし、ネコをクリックしたときのポイントを1000増やします。


おなかきょうかのボタンは、10000ポイント以上の時にしかクリックできません。
おなかきょうかのボタンをクリックすると、10000ポイント減らし、毎秒ポイントを減らす間隔を、1秒増やします。
つまり、はじめておなかきょうかのボタンを押した場合は、毎秒1ポイント減らすのを、2秒に1ポイント減らすようにします

そして出来上がったのが、こちら👇のゲームです！

どうでしょうか？さらにクッキークリッカーっぽいゲームになったと思います。

もっと面白くするには？

さっきのゲーム、まだまだ面白くできそうですね！

あおい

なんか「おなかきょうか」ボタンが役に立ってないなあ

せいろん

ポイントでネコちゃんの顔が変わればおもしろいかもネ！

こんなことを考えながら、AIにお願いして、どんどんゲームを面白くしていきましょう！

AIにできないこと・人間の役割を知ろう

AIとゲームをつくっていると、AIにできないことが見えてきて、人間の役割もわかってきます。
たとえば、「ネコをクリックしたときに音を出したいな」と思って、AIにお願いします。

プロンプト

ネコをクリックしたときに、「にゃあん」という音を出すことはできますか？

AIは「はい、もちろんできます！」と答えてくれますが、「音声ファイルを用意して」「その音声をHTMLファイルと同じフォルダに保存して」……と、また急に難しい話をしてきます。

AIは（いまのところ）直接音声データを生成できないですし、音声データをゲームとつなげることはできません。

そのため、人間が音声データを用意して、ゲームとつなげられるように、ファイルを保存する必要があります。

このように、万能のように見えるAIでも、まだまだできないことがあり、人間の手を必要とする部分はたくさんあります。

たとえば……

創造力：今回のゲームでいえば、「何が面白いか」を考える力は人間にしかないものです
適切な日本語：AIに要望を伝えるため、適切な日本語を使えるようにならなければなりません。つまり、「何がしたいか」を、しっかりと自分の言葉にする必要があります
仕組みの理解：AIは直接パソコンの画面を操作することはできないので、AIの指示に従って操作できる程度には、仕組みを理解しておかなければなりません
技術の理解：もっと細かい機能をつけたい場合は、言葉にしにくい部分もあります。そうした調整は、実際に人間がプログラムを修正したほうが、早くて正確です。そのため、AIのプログラムを修正できるくらいの技術力も時には必要です。
人とのコミュニケーション：上で紹介した能力を持つ人たちと、気持ちよくコミュニケーションをとって、目標を達成する能力は、いままでも、これからも大切です。

このすべてを一人で身につける必要はありません。でも、これからのAI時代、「これだけはAIに負けないぞ！」という自分だけの武器が、きっと必要になります。
あなたなら、どんな武器を磨いていきたいですか？💪