生成AIで最初のCanvasゲームを作る｜四角を動かす小さな試作から始める

最初の完成条件を一つに絞る

試作の目標を「四角を動かして目標に触れたら終了」にします。画像、音、ランキング、ログインは、この段階では必要なものだけに絞りましょう。

CanvasはJavaScriptから描画するための仕組みです。MDNには描画、移動、衝突、勝ち負けを順に扱うゲーム制作教材があり、生成された処理を読み解くための参考になります。

一段階ずつ生成を依頼する

最初は描画と移動だけを頼み、動作を確認してから目標判定を追加します。次は依頼文の例です。

HTMLとJavaScriptでCanvasの試作を作りたいです。まず四角を一つ描き、矢印キーで画面内を動くところだけを実装してください。外部ライブラリーや画像は使いません。各処理の役割と起動方法を説明し、目標判定や得点はまだ追加しないでください。

描画と状態の役割を確かめる

座標を持つ処理と、その座標に描く処理を見つけましょう。キーを離したときに停止するか、画面の端から出ないかを確認します。

アニメーションにはrequestAnimationFrameが使われます。再度呼ぶことで更新を続けるため、AIの出力に複数の更新ループがないか、開始処理と合わせて確認してください。

遊びの条件を一つずつ追加する

移動が動いたら目標を一つ配置し、触れたら終了する条件を追加します。次にリトライを加え、プレイヤーと目標の位置をどう戻すかを指定しましょう。

画面が動いたら、目標までの距離や速さを少しずつ変えて遊びやすさを比べます。ここで提案するのは試作の進め方であり、特定の調整値が最適だという実験結果ではありません。

まとめ

描画と移動、目標判定、リトライの順に進めると、各段階の完成条件を言葉にできます。AIの出力をそのまま完成品とせず、小さな操作を試しながら必要な機能を加えていきましょう。