プログラミング知識ゼロの私が、AIと会話するだけで作った【ブラウザゲーム】クリックで物語が進化する？「Catch the fairy!」を作ってみた

ゲームの概要（Introduction）

【逃げる妖精、鍛えるクマ、そして現れる王子様…！？】

画面内を逃げ回る「妖精」を捕まえる……だけのゲームかと思いきや、部屋に置かれたおもちゃを使ってキャラクターたちが予想の斜め上の進化を遂げていく、シュールなクリックアドベンチャーゲームです。

使用技術： HTML5, CSS3 (Animation), JavaScript

逃げ回る「妖精AI」の実装： マウスカーソルやキャラクターが近づくと、**反発力（Repulsion）**が働いてふわふわと逃げていく物理挙動を実装。「近づきすぎるとワープして逃げる」という回避行動も組み込み、簡単には捕まらないもどかしさを表現しました。
インタラクティブな「進化」システム： キャラクターを特定のアイテムにドラッグ（クリック移動
- 筋トレ機能： ダンベルを与えるとアニメーション付きでトレーニングを開始し、数秒後にマッチョ化します。
- 建築システム： ブロックにキャラクターを誘導すると、そのキャラの特性に合わせて「家」「城」「学習机」などが建築されます。
漫画形式のカットシーン（CSSカルーセル）： 特定の条件（例：クマと兵士が出会う、特定の建物を建てる）を満たすと、全画面オーバーレイで**「漫画（画像）」**が表示されます。 JavaScriptで制御されたカルーセルUIにより、プレイヤーは紙芝居のようにストーリーを読み進めることができます。
状態管理と衝突判定： 「誰が」「どんな状態で」「何に」触れたかを常に監視。「通常状態なら挨拶」「マッチョなら家を破壊」など、状態に応じた複雑な分岐イベントを管理しています。

予測不能なストーリー展開 最初はただの「クマ」や「兵士」ですが、プレイを進めると「テープ」になったり「悲しみのデスク」になったり、壁の落書きから「王子様」が現れたりと、カオスな展開が楽しめます。
視覚的なフィードバック
- 歩行アニメーション： 移動方向に合わせて画像を反転させ、揺らしながら移動させることで「歩いている感」をCSSだけで表現。
- BGMとSE： ブラウザの自動再生ポリシーに対応し、初回クリック時にBGM（ファンタジー風）が流れるように制御しています。

今回は「ゲーム性」と「物語性」の両立を目指して指示を出しました。

指示のポイント1（群衆シミュレーション）： 「妖精はマウスや他のキャラから逃げるように、斥力（反発する力）を使った動きを作って」と、物理演算的な挙動を依頼。
指示のポイント2（演出の強化）： 「イベント発生時はゲームを一時停止し、画面中央に漫画画像をスライドショー形式（カルーセル）で表示させたい」と、UIの具体的な挙動を指定。
指示のポイント3（状態変化）： 「ダンベルに触れると筋トレアニメーションを挟んでから画像を差し替えて」といった、時間差のある演出ロジックを構築させました。