「ゲームを作りたいけど、プログラミングは難しそう...」そんな風に思っていませんか?
実は今、AI アシスタントの力を借りれば、コードを一行も書かずに本格的なゲームが作れる時代になっています。この記事では、JetBrains の最新 AI アシスタント「Junie」を使って、クリスマスをテーマにした可愛いキャッチゲームを、わずか数分で作る方法をご紹介します。
この記事で学べること
- ✨ WebStorm + Junie でのゲーム開発の基本フロー
- 🤖 AI との対話的な開発プロセス
- 🎨 ゲームへの BGM、効果音、ビジュアル要素の追加方法
この記事は動画版と文字版の両方をご用意しています。お好みのスタイルでお楽しみください!
それでは、早速始めていきましょう!
動画版
文字版
1. 任意のゲームを生成する
（1）WebStormを起動すると、このようなウェルカム画面が表示されます(下図参考)。画面中央には3つのオプションがありますが、今回は中央の「新規プロジェクト」ボタン（赤枠部分）をクリックします。ここから新しいプロジェクトの作成が始まります。
（2）新規プロジェクトの作成ダイアログが表示されています(下図参考)。左側には様々なプロジェクトテンプレートが並んでおり、「空のプロジェクト」が選択されています。
Step 1（赤枠①）：画面上部の場所フィールドに、プロジェクトを保存したい
フォルダのパスを入力します。この例では「E:\WebstormProjects\game」
というパスを指定しています。
Step 2（赤枠②）：右下の「作成」ボタンをクリックして、プロジェクトを作成します。
（3）プロジェクトが作成されました(下図参考)。画面右上の「AIチャット」ボタン（赤枠）をクリックして、AIアシスタント機能を開きます。
（4）画面下部には、AIの提案するサンプルプロンプトが表示されています(下図参考)。今回は「kontra.js の JavaScript」というカードが表示されており、クリスマス向けのミニゲームを作成するための提案が記載されています。
カード内には複数のアクションボタンがありますが、「Junie ✨ コードを書く」ボタン（赤枠部分）をクリックします。このボタンをクリックすることで、AIアシスタント（Junie）にコードの生成を依頼できます。AIが提案内容に基づいて、実際に動作するサンプルコードを生成してくれます。
（5）AIチャットパネルで、Junieからの応答が表示されています(下図参考)。「許可」ボタン（赤枠）をクリックして、kontra.jsのインストールコマンドを実行します。
（6）npmコマンドの実行後、JunieがHTMLファイルを生成し、ゲームの実装が完了しました(下図参考)。
（7）エディタ画面（赤枠部分）には、AIが生成したindex.htmlファイルのコード全体が表示されています。kontra.jsを使用したクリスマスキャッチゲームの完全な実装コードを確認できます(下図参考)。
（8）生成されたコードを確認したら、次はゲームを実際に動かしてみましょう。AIチャットの入力欄（赤枠部分）を使って、「プログラムを起動してください」と質問してみましょう(下図参考)。
（9）ブラウザでHTMLファイルが開かれ、ゲームが実行されています(下図参考)。
（10）実際のゲームプレイの様子をご覧いただけます。
2. ゲーム説明文の位置を変更する
ゲームを実行して確認したところ、説明文の表示に問題があることに気づきました。そこで、AIチャットの入力欄（赤枠部分）に以下のフィードバックを入力しました：
ゲーム開始前に表示されている説明文が中央に配置されていませんゲーム開始前の説明文を表示し、画面をクリックしたら説明文を非表示にするように訂正してください。
このように具体的な改善要望を伝えることで、Junieにコードの修正を依頼できます(下図参考)。
フィードバックを送信すると、Junieが即座にコードを修正してくれました(下図参考)。
修正後のゲームを確認すると、説明文が画面中央に正しく配置されていることが確認できました。画面中央には、黒い半透明のオーバーレイボックスが表示され、その中に「Christmas Catch」というタイトルと操作説明がきれいに中央揃えで表示されています。
期待通りの結果です(下図参考)。
3. 背景音楽を追加する
ゲームの雰囲気をさらに良くするため、背景音楽の追加を依頼してみました(下図参考)。数秒後には、BGMを追加するための具体的なコード修正案や実装方法が提示されるはずです。
BGM追加のリクエストに対して、Junieが修正を完了しました。
右側のAIチャットパネルに「✅ 完了」メッセージ（赤枠部分）が表示されています。実装内容：Web Audio APIを使用したシンプルなBGMが追加され、BGMはユーザーのクリックで開始し、ループ再生されます。チップチューン風の音色でクリスマスの雰囲気を演出しています(下図参考)。
動画を確認すると、背景音楽が正常に追加されていることが確認できました。ただし、BGMの音量がやや小さいようです。
4.爆弾を追加する
前回のBGM追加が完了した後、さらにゲームを面白くするため、新しい要素を追加することにしました。AIチャットの入力欄（赤枠部分）に以下のリクエストを入力しました：
爆弾を追加し、プレゼントは加点、爆弾はゲームオーバーになるように修正してください
このように、ゲームに緊張感を持たせる新しい要素を依頼しています(下図参考)。
リクエスト通り、Junieがゲームに爆弾を追加してくれました。
ゲーム画面を確認すると、黒色の爆弾💣（赤枠部分）が上から落ちてきているのが確認できます。
これにより、プレーヤーはプレゼントを取りながら、爆弾を避ける必要が出てきました(下図参考)。
5.衝突効果音を追加する
ゲームをさらに充実させるため、衝突時の効果音を追加することにしました(下図参考)。
動画を見ると、効果音が適切に実装されていることが確認できました。効果音が追加されたことで、ゲームの臨場感が大きく向上しました。
6.ゲーム画面背景を変更する
前回の効果音追加が完了した後、さらにゲームの見た目を改善するため、背景の変更をリクエストしました(下図参考)。
背景実現を拡張してください。夕空ではなく、山の景色を表示するように実装を修正してください
これにより、ゲームの背景を夕空から山の景色に変更することを依頼しています。
ゲーム画面を確認すると、画面下部（赤枠部分）に山の景色が追加されていることが確認できます。白い雪をかぶった山々がシルエットで表現されており、濃紺の夜空とのコントラストが美しいです。基本的に期待通りの結果となりました(下図参考)。
7. 主人公キャラクターを変更する
次に、ゲームの主人公のキャラクターを変更したいので、Junieに主人公を置き換えてもらいます(下図参考)。
ゲームの画面効果を確認すると、確かに主人公がサンタクロースの雰囲気になっており、期待通りの結果となっています(下図参考)。
8. ここまでの成果
以下のアニメーションをご覧いただくと分かるように、このゲームは一行もコードを手動で書くことなく、全てJunieというAIアシスタントが自動生成したコードによって実現されています。その効果を実際に体感してみてください。
オンラインでも体験できます：
https://skyloftace.github.io/junieGame/
以下は自動生成されたソースコードです。
まとめ
お疲れ様でした!いかがでしたか?
この記事では、Junie という AI アシスタントを使って、一行もコードを手書きすることなく、以下の機能を持つ本格的なゲームを作成しました:
実装した機能一覧
✅ プレーヤーキャラクター(サンタクロース)の操作
✅ 落下するプレゼントと爆弾
✅ スコアシステムとゲームオーバー機能
✅ 山の景色を含む背景描画
✅ レスポンシブなゲーム説明画面
Junie を使った開発の魅力
- 対話的な開発: 自然言語で要望を伝えるだけで、コードが生成される
- 素早い反復: フィードバックを伝えれば、すぐに修正してくれる
- 学習機会: 生成されたコードを読むことで、プログラミングの学習にもなる
- プロトタイプ作成: アイデアを素早く形にできる
次のステップ
このゲームをさらに発展させるアイデア:
- 🎯 難易度調整: 時間経過で落下速度を上げる
- 🏆 ハイスコア機能: localStorage でベストスコアを保存
- 🎁 特別アイテム: ボーナスポイントや時間停止アイテムを追加
- 📱 モバイル対応: タッチ操作に対応させる
- 🎨 キャラクター選択: 複数のキャラクターから選べるようにする
さいごに
AI アシスタントを活用すれば、プログラミング初心者でも、アイデアを形にすることができます。Junie は単なるコード生成ツールではなく、あなたの「創造のパートナー」として、開発をサポートしてくれます。
ぜひ、この記事を参考に、あなたオリジナルのゲームを作ってみてください!