JavaScriptでWebゲーム作ったった！
え、たかまるプログラミングできたの？
もちろん、できないよ！
だから今回はほぼAIに任せて作ったよ。
作品を見てみよう
スマホの場合、このページから見るとボタンのレイアウトが崩れているかも。
PCの場合は、キーボタンで画面がスクロールしてしまうかも。
ちゃんと見たい人は下記のページを開いてみてね。
おおぉ！すごい！
作り方教えて！
OK！まずはざっくり流れを説明するね。
制作の流れ
- ステップ１VSCodeの準備
コードを入力するソフト
GitHubのアカウント作成 - ステップ２画像の準備
- 立ち姿（ジャンプと併用）
- 攻撃姿
- 歩き姿１
- 歩き姿２
- 敵キャラ
- ステップ３AIに頼む
Copilotという無料のAI
実はゲームのキャラクターは僕が手描きで作ったんだ。
絵が苦手な人はフリー素材や、それこそAIに頼むといいよ。
ふむ。僕は手っ取り早くフリー素材で作ろうかな。
Visual Studio Code をインストールしよう
これは別のページで解説しているから、それを見てね
画像を準備しよう
今回はキャラクターのみ画像を用意したよ。
ワールドはプログラムで描画したからワールドの画像は不要。
キャラクターが手描きって言ってたけど、
なに使って描いたの？
Piskelっていうサイト上でドット絵が描けるサービスがあったから、ここを使わせてもらったよ。
へぇ〜！無料で使えて便利！
AI（Copilot)でコードを生成
VScodeでCopilotを表示させたら、こんな感じで質問してみよう。
どうやって？ってよくわからない人は、VScodeの初期設定ページに書いてあるから見てみてね。
ワークスペースの作成をクリックしたらこんな感じになったよ！
だけど、プレビューしてもゲームが表示されなかったからAIに聞いてみたよ
うんうん！
どうやら” index.html “が必要みたいだね。
むぅ。。。
よくわかんないよ。
大丈夫、ここを押してみて。
わぁ！自動で作成された！
わざわざファイルを作ったり、ソースをコピペしなくても、ボタンひとつでできるんだよ。
便利〜！
もう一度プレビューしてみよう。
ほう。
思ってたんとちゃう。
まぁ、最初はこんなもんだよ。ここから、
”ワールドを追加して”
”キャラクターを画像にしたい”
とか色々と要望を追加して完成させたのが最初に見せたゲームだよ。
最後にプチアドバイス
なるほどね。
すんなりできたの？
正直めっっっちゃ手こずった！笑
・ステージの切り替え
が上手くいかなくて、
他のAI（ChatGPT、 Gemini）にも聞いてみたけどダメダメだったよ。
え、じゃあどうやって解決したの？
質問の仕方というか、喋り方を工夫したって感じかな。
ずっとうまくいかない部分をAIに説明して回答を貰ってたんだ。
こうなるって言って、AIが修正したコードを生成するってパターンね。
ふむふむ。そんで？
“ここが原因なんじゃない？”
“ここをこうしたらできる？”
“このサイトでこんな説明あるけどこれで解決できない？”
てな感じで、自分からも意見を述べるようにしたらなんとか解決できたよ。
なるほど！提案してもらうばっかりじゃダメだったのね。
ちなみに、制作時間はどのくらいだった？
2日かかったよ。
じゃぁ僕は１日で作ってやる！
ってことで、コード教えて。
お、お前なあ…。
仕方がない、イカクくんのために特別。
直接は教えないけど、コードを知る方法を教えてあげるよ。
たかまるさんきゅ〜☆
さっそく上のボタンをクリックして解説ページへレッツゴー♪
コメント