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