名古屋市西区にあるA型事業所アルファサービスにてITチームとしてWebデザインやIT関連の業務ををしております YO です。
前回はWEB制作の技術を応用してゲームを作ってみる！ということで、WEB上で動くブロック崩し風スクリーンセーバーみたいなものを作りました（笑）
今回はついにブロック要素を追加していきます。
長くなるので一旦今回の完成品を…
↑クリックしてゲームに飛べます！
今回は壊すブロックが追加されました。
バーで受け止めれず画面下部にボールが触れたりブロックが全て消えたら初期状態にもどります。
正直まだ遊べる状態ではない・・・
WEB上で動くゲームをプログラミングしよう！
ということで今回は前回の続きで、ゲームとして動くようにしていきます！
AI駆動開発！
前回は環境構築や相談など全体構想などをChatGPT君にやってもらいました。
ここからは前回軽くふれたCopilot君というAIに力を借りてやっていきます。
開発環境はVisualStudioCode（以下VSC）というものを使います。このツールがあればCopilotと連携してかなり快適にAI駆動開発ができます。
ChatGPT君とCopilot君の違い
なんでChatGPT君からCopilot君に乗り換えたの？
というところで両者の開発進行の違いを軽く触れてみます。
ChatGPTでの開発
ChatGPT君は非常に高性能でだいたいの事は聞いてみれば解決できます。
プログラミングにおいてもこうして欲しい、こういう問題があるんだけど解決手できる？
という問いにずばりコードを出してくれます。あとはこれをコピペすればバッチリ動く！
みたいな感じです。
こんなフランクに要望をお願いして
こんな感じでコードがでてきてこれをコピペすれば動く！
そんな感じ！
え、じゃあこれで良くない？となるかと思います。
正直全然がんばれるのですが、現在のAIサービス全般に言える事なのですが、一度に質問できる量が限られてきます。たとえばこれを改良しようとしたとき、
みたいな感じで質問文がとんでもなく長くなり、最終的にはオーバーしちゃったり、AI君の中で一度に読み込めず、間違った解釈をしてしまいます。
さらに複数のファイルになればそれを説明するのもとても大変です💦
ただ、対話型AIツールとしては非常に使い勝手が良いので前回のように「こういう事がしたいのだけれどどうすればいいかな？」といったところで非常に強力に働いてくれます。
Copilotでの開発
Copilot君も基本的には対話式のAIです。プログラムに限らず日常の相談なんかもやってくれます。
今回はVSCとの連携で使いますが、Windowsユーザーであれば標準搭載のアプリとして対話型AIとして使えます。
今回はVSCの連携で使います
こんな感じで開発環境の中にAIが同居している感じになります。
開発環境の中にいるのでプロジェクト内の「つながり」なんかも理解してくれますし、わざわざ複数ファイルのコードをコピペする必要はありません。（これがすごくありがたい！！）
１ファイルで終わらないようなコーディングの場合は特別な理由がない限りはこのタイプのAIががオススメです。（Cursor等）
さらに凄まじいのは、実装もワンクリックで勝手にやってくれます！！
コピペミスがなくなる！！（感涙）
という事で、今回はCopilot君を採用！という感じ。
実装する
まずは軽くジャブで前回のコードが理解できるか聞いてみます。
ふ～ん！やるじゃん！
いいかんじです。ちゃんと全体を見渡した上で次の課題も提示してくれます。
でもせっかくなのでGPT君で作ったコードを整理してもらおうかな。
いいね！という事で最適化しました。
さらにはファイルを分割して管理をしやすくしたいです。
ちょっとビビってうろんな言い回ししちゃいましたが。AI君も分割に賛成の様子。助かります。
構成案からソースの内容までおまかせ！
ということでさらに先に進んで、ブロックの描画をお願いしました。
イイ感じ！ブロック崩しっぽいですね～
しかし、なんだかとたんに画面がカクついてきました…
もしかしてReact君はゲームみたいなやつには向いてない…？（本末転倒）
そういうとこも聞いてみよう！
※GPUとは映像関係に特化したPCパーツです。PCでゲームや映像を表示する際は大体これを利用します。
そっか、そうだよね。もともとゲーム作る用じゃないし💦
ただ、軽いゲームならやれそうな気はする…！
あんまり凝った事はできないけどいけそうなのでこのまま行きます！
ただカクつきはもしかすると原因があるかもなので聞いてみる！
特にバーを移動すると顕著だ…
おお、なんか解決案があるっぽい…
適用！適用！！
おお！！ばっちり解決できました！！
ちゃんと理由もフィードバックしてくれます。
今回はここまで
ということで、ここまでで一旦、ブロック崩し的な体裁ができました。
まだ当たり判定に不安があったり、スコアやゲーム的なものになるには課題があります。
このまま続けてちゃんと形になればいいなと思います！
アルファサービスのITチームはホームページ作成や動画作成など色々な事に挑戦しています。ご興味があったら一度遊びに来てみてくださいね！
また、この記事やVSCの設定とかどうするの～？など質問などあったらお気軽にご相談ください！
https://alpha-service-2030.com/contact/
