こんにちは。
今日は、Javascriptを使ってブラウザで動くゲームを作りたいと思います。
せっかくなので、ゆるっとここに載せてみます。
今回は有名なAIであり、私のパソコンに丁度入っていた「copilot」にアシスタントしてもらいます。
さっそく作ってみましょうー
AIに相談しながら仕様を決める
まずAIさんに、「Javascriptでゲーム作りたいんだけど、作り方教えて。」と入れます。
今回はアイテムをマージするゲームが作りたいので、続けて、
「アイテムをマージして、育てていくゲームにしたい。」と入れます。
（最近マージパズルにハマっているんです。無限にマージしたい。）
本来は、ちゃんとしたプロンプトを書いた方がいいのかもしれませんが…正直面倒だし、そんなことを言っていたら完成しないので、今回はこの調子でいきます。
AIからは大量のアドバイスが送られてきました。
以下一部抜粋。
AI：🌼次にやること
・どんなアイテムを育てたいか決める（テーマ選び）
・グリッドやドラッグ操作の仕組みを作る
・進化パターンを定義する（JSONで管理すると楽）
・癒し系のBGMやアニメーションを加える自分らしさがぐっと出るよ🎶
どんな世界観にしたいか、イメージを聞かせてくれると嬉しいな🌸
とのこと。
こんな感じで、AIに相談しながら、どんなゲームにしたいか決めていきます。
（以後、「」でくくられた部分は、AIへの指示の抜粋です）
「雨しずくをマージして、虹を作るゲーム。」
「マス目は７×７。 雲をクリックするとしずくが出てきて、 虹になるまで10段階くらい。」
「アイテムは数種類欲しい。」
「ごみ箱もつける。見た目はきらっと消えるように。」…
コードを書いてもらう
仕様がある程度固まって、AIさんもそろそろコード書く？ってきいてくれたので、書いてもらいましょう。
とりあえず丸投げでお願いしちゃう。
「そろそろコード書いてくれる？」
…HTML、CSS、Javascript、3つのファイルを書いてくれました！
コードをファイルに保存
パソコンの好きな場所に新しいフォルダを一つ作って、書いてもらったコードを入れていきます。
コードをコピーして、テキストエディター（メモ帳など）に貼って、保存。
ファイル名はそれぞれ、
index.html
style.css
script.js
とします。
動作確認と修正
index.htmlファイルを、ブラウザで開いて、動くか確認！
見た目は、なかなかいい感じにできてます。
今回デザインは気にしないので、機能的に想像通りならOK。
動作は…雲を押すと色が出るのと、ごみ箱機能はできてる。
マージができない。見た目が変わらないだけかな？
そんな時はAIになおしてもらいます。
アイテムの画像はあとで考えるとして。一旦マージしたら色が濃くなる仕様にして、と頼んでみます。
「動かしてみたけどマージができないよ。マージしたらドラッグ元のアイテムは消して、ドラッグ先のアイテムが一段階進化するようにできる？進化したら、色が段階ごとにだんだん濃くなるようにして。」
AIはコードの修正部分だけを送ってくれたのですが。
どこを直したらいいかわからなくなったので、もう一回全体のコード書いてとお願いします。
「今のコードを入れて、もう一回全体のファイル作って。」
これでファイルにまるごと上書きします。
おっ、できてる！
ちゃんとマージして色が濃くなるようにできました。
これで一旦、最低限動くものはできあがりです
機能の追加・調整
あとは好きなようにカスタマイズしていきます✨
「色だけだとわかりにくいから、「虹レベル１」「鳥レベル１」「惑星レベル１」みたいに文字入れられる？」
「タイトルを「空のくみあわせパズル」に変更して。」
「きらっと消える場所を、「削除エリア」って名前にして。」
「進化バーと、光る演出、メッセージ欄を加えて。」
「10段階だと大変だから、７段階で完成にして。」…
大分無茶ぶりしたけど、すぐに対応してくれました。
いいね！
自分で作っといてなんだけど、７段階でもマージするって大変。
紙を何回か折ったら月まで届くっていう話、思い出すわ。
５段階にしよう。
「やっぱり５段階で完成にしたい。」
javascriptのファイルが長くなってきて、途中までしか送られてこないことがあったので、
「javascriptのコードだけもう一回書いて」と入れて、別で送ってもらいました。
これなら多少長くても、処理できるみたい。
BGMをつける
「BGMつけられる？」といれたら、フリー音源のサイトを教えてくれました。
今回は『DOVA-SYNDROME』さんの音源を使わせていただきます。
規約とライセンスを確認してダウンロード。
ダウンロードさせていただいたmp3ファイルは、それぞれ名前を付けて、ほかのファイルと同じフォルダへ。AIにファイル名を伝えて差し込んでもらいます。
「mp3ファイルで、ファイル名がそれぞれこんな感じ。コードに組み込んで。
BGM：「BGM」
マージした時の効果音：「merge」
３種類とも完成した時のおめでとうの音：「finish」」
ついでにリトライボタンとミュートボタンもつけてもらう。
「リトライボタンと、ミュートボタン追加してくれる？」
細かい修正もお願いして…
すごい！音があると、急にゲームっぽくなっていい感じ！（ブログだとわからないね）
見た目を調整
次は見た目。
「見た目を整えたい。」
「レイアウト変えられる？今全部縦に並んでるから、
①リトライボタンとミュートボタンはグリッドの右側に。
②雲をグリッドの右側に。
③進化バーをグリッドの左側に。
④削除エリアをグリッドの右側に。」…
おおー。
完成した時のアニメーションも入れてもらいます。
画像を作る
次は画像を作っていきます。
一旦ざっくり指示してみる。
「アイテムの見た目を変えたいな。描いてくれる？」
この一枚だけ送られてきました。
…なんかちがう。
うまくいかなかったので、まじめに詳しく指示してみます。
「アイテム用のアイコンを描いてほしい。pngファイル。背景透過。 以下のイラストを描いて。 ・しずく レベル１から５（青い普通のしずく、黄色い普通のしずく、赤いきれいなしずく、虹色のきらきらしたしずく、虹） ・星 レベル１から５（青い小さめの星、黄色い大きめの星、三日月、きらきらの満月、きらきらの惑星） ・羽 レベル１から５（白い普通の羽、黄色い普通の羽、赤いきれいな羽、虹色のキラキラした羽、青い鳥） あとで私が分割するから、一枚にまとめて描いて。グリッドのマス目に載せられるサイズだと嬉しい。」
…完璧ではないけど、ちゃんと使えそうな画像を描いてくれました！
あとは手で分割・整理して、足りない絵は描いてもらいます。
ファイル名も整理。
…がんばりました。せっかくなので、さっきなんかちがった絵も採用しました。
AIにフォルダ構成とファイル名を伝えて、コードに入れてもらいます。
「画像ファイルできたから、コードに反映してくれる？ファイル名こんな感じ。
虹：「droplet1」「droplet2」「droplet3」「droplet4」「droplet5」 惑星：「star1」」…
かんせい！
↓良かったら遊んでみてね。
スマホ対応
パソコンはいい感じにできたので、スマホでも遊べるようにしてみます。
とりあえずスマホで開いてみたのですが…ここで少し問題が。
パソコンではドラッグで動かしていたのですが、スマホのブラウザって、ドラッグがうまくできないみたい。そういえばスマホのブラウザでドラッグすることってないよね。
今まで気づかなかった。勉強になります…
というわけで、大幅な変更が必要になりました。
変更をAIさんと頑張ったんだけど、うまくいかず…
どんどん元の状態からかけ離れて、斜め上の状況に…
もうこうなったら手で直しちゃえ！
というわけで、パソコン版はほとんど手でコードを書きませんでしたが、
スマホ版は手も使いつつ直しました。
ドラッグじゃなくて、クリックで操作できるようになっています。
ついでに他にもいろいろ改良したので、こっちの方がうまく遊べるかも。
↓こちらも良かったら遊んでみてね。こっちはパソコンスマホ両方あそべます。
感想
ちょっと最初のうちセリフがポエミーだったのは、AIさんの趣味です。
決して私が考えたセリフではない。筆者が虹とかしずくとか言っていたので、癒し系、ポエミーと判断されたようです。
あとからニュートラルな感じに修正しました。
AIに書いてもらって、最低限動くところまでは、数時間かからないくらいでできたけど。
こだわり始めたり、手でコードを書き始めたら丸一日かかりました。
こだわり始めたらきりがない。
あと、やっぱりAIはコードを書くスピードが桁違いです。
なにはともあれ、無限にマージするという願いは叶ったのでよかったです
コメント（ご意見、ご感想、お待ちしております）