無料の生成AIだけで、マウス操作で遊べるインベーダーゲームもどき…などを作ってみました！

アラフィフ未経験転職者5年生の…「いとあたらし」です。

当初は慣れない操作等に苦労しましたが、周りの方には面倒見のいい方が多く、いろいろな経験を積むことができ、かなり慣れる事ができました。

業務中の空き時間には自己学習も可能な環境ですので、パソコンの操作や、処理の待ち時間が苦にならない人には、非常にいい職場だと思います。

はじめに
本編
終わりに…生成されたアプリと遊び方マニュアル

はじめに

前回では、実質無料の自宅WiFi環境を構築しようという内容をブログ化してみましたが、今回のブログは…無料AIで通用するWebコーディングが、可能かどうかを、効果が分かり易いと思われるレトロゲームの生成で試みてみました。現時点では生成物の発表のみに留めておき、使用した生成AIツールや生成過程のプロンプトは伏せておきますので、同等かそれ以上のモノが生成可能か試してみていただけると幸いです(*’ω’*)

ちなみに、以下のリンク先に過去私の作成したブログのリンクを記載しておきます。

まだ見ていない方はこちら(特にハンズオン)↓も是非見てみてもらえますと嬉しいです。

k_atarashi | フェイススタッフブログ

日々の業務で学習したことを発信します

尚、本ブログは以下のサイトのAWS初心者向けハンズオン資料の該当項目を、本当に初心者(;^ω^)が実践した経過の記録となっています。

なんといっても、講義の視聴だけなら現在は無料で利用できる素晴らしい動画になっています。

※ハンズオンでAWSを実際に使用する費用は、必要です。

AWS Hands-on for Beginners とは

・実際に手を動かしながらAWSの各サービスを学んでいただきます。

・初めてそのサービスを利用される方がメインターゲットです。

・お好きな時間、お好きな場所でご視聴いただけるオンデマンド形式。

・学習テーマごとに合計1～2時間の内容＆細かい動画に分けて公開されておりますので、スキマ時間の学習や、興味のある部分だけの視聴も可能。

ハンズオン資料 | AWS クラウドサービス活用資料集

では、いよいよこれより無料の生成AIだけで、マウス操作で遊べるインベーダーゲームもどき…などを作ってみました！を進めて参ります。

尚、今回のインベーダーもどきは、スマホでの使用時は画面の任意の場所をタップすると…砲台移動＋発射の操作となりますので、そのままスマホでも遊べます。尚、スマホの方が難易度も上がるようですので、その方が楽しめるかも知れません。

尚、現時点のブログでは具体的にどの生成AIを使用し、どのようなプロンプトで今回のアプリが作成できたかは未公開としておきます。

以下のブログ記事の殆ども試しにAIで作成してあります。

本編

こんにちは！今回は、現時点で無料で使える生成AIのみを使用して、Webブラウザ上でマウス操作で遊べるオリジナルのインベーダーゲームを作成した経験をご紹介します。HTML、CSS、JavaScriptのみを使用して、音声効果やリスポーンシステムまで実装した本格的なゲームの開発過程を詳しく解説していきます。

プロジェクトの概要

今回の目標は、以下の機能を備えたインベーダーゲームを作成することでした：

マウスによる自機操作
クリックによる弾の発射
敵からの攻撃とライフシステム
自機の爆発とリスポーン機能
勝利・敗北条件と演出
効果音システム
1ファイル完結型

開発の流れ

第1段階：基本的なゲームフレームワーク

最初に、ゲームの土台となるHTMLとCanvas要素を設定しました。背景グラデーションや基本的なスタイルをCSSで定義し、JavaScriptでゲームループを実装しました。

// 基本的なゲーム構造

const canvas = document.getElementById(“gameCanvas”);

const ctx = canvas.getContext(“2d”);

// ゲームループ

function gameLoop() {

update();

draw();

requestAnimationFrame(gameLoop);

}

第2段階：プレイヤー操作システム

マウスによる自機操作を実装しました。mousemoveイベントで自機の位置を制御し、clickイベントで弾を発射するシステムを構築しました。

// マウス操作

canvas.addEventListener(“mousemove”, (e) => {

const rect = canvas.getBoundingClientRect();

player.x = e.clientX – rect.left – player.width / 2;

});

canvas.addEventListener(“click”, () => {

bullets.push({

x: player.x + player.width / 2 – 2,

y: player.y,

// …弾のパラメータ

});

第3段階：敵キャラクターと衝突判定

インベーダーの配置、移動パターン、そしてプレイヤーとの衝突判定を実装しました。敵もランダムに弾を発射するAIを組み込みました。

第4段階：ライフシステムとリスポーン

重要な機能として、自機が敵の弾に当たった際の爆発エフェクトと、一定時間後のリスポーン機能を実装しました。無敵時間中の点滅表示も追加しました。

プレイヤーが敵弾に当たると、自機が爆発エフェクトを出して消滅。2秒間の無敵時間の後、画面下部中央に復活するという、クラシックなインベーダーの要素を再現しました。

第5段階：音声システムの実装

Web Audio APIを使用して、発射音、爆発音、勝利ファンファーレなど、ゲーム中に必要な効果音をリアルタイムで生成するシステムを構築しました。

// 効果音生成関数

function playTone(frequency, duration, type = ‘sine’) {

const oscillator = audioContext.createOscillator();

const gainNode = audioContext.createGain();

oscillator.connect(gainNode);

gainNode.connect(audioContext.destination);

oscillator.type = type;

oscillator.frequency.value = frequency;

// …音声再生処理

}

第6段階：勝利・敗北条件と演出

すべての敵を撃破した際の勝利演出と、ゲームオーバー時の演出を追加。勝利時にはファンファーレを再生し、ゴールドのアニメーションで勝利を演出しました。

技術的ポイント

1ファイル完結設計

画像はBase64エンコードしたSVGデータを使用し、音声はWeb Audio APIでリアルタイム生成することで、外部ファイルに依存しない1ファイル完結型を実現しました。

ゲームバランス調整

連射を制限することでゲームバランスを調整しました。クリックによる弾の発射に0.5秒のクールダウンを設けることで、戦略性と難易度を高めました。

パフォーマンス最適化

エフェクトのオブジェクトプーリング、不要なオブジェクトの適時削除など、ブラウザでのスムーズな動作を意識した最適化を行いました。

完成したゲームの特徴

🎯 マウス操作で直感的にプレイ(スマホの場合タップで砲台移動＋発射できます。)
💥 自機の爆発とリスポーン機能
🔫 敵からのリアルタイム攻撃
🎵 Web Audio APIによる効果音
🏆 勝利ファンファーレ付き

⚡ 0.5秒クールダウン付き射撃
🎨 SVGによる美しいグラフィック
🛡️ 3機のライフシステム
📱 レスポンシブデザイン対応
📦 1ファイル完結

開発を通じて学んだこと

このプロジェクトを通じて、ゲーム開発における以下の重要なポイントを学ぶことができました：

ユーザーエクスペリエンスの重要性：直感的な操作と適切なフィードバック
ゲームバランス：難易度と楽しさの絶妙なバランス取り
パフォーマンス最適化：スムーズな動作のための効率的なコード設計
1ファイル配布の利便性：ユーザーにとっての導入しやすさ

今後の改善点

今回のゲームには以下の改善余地があります：

難易度選択機能の追加
ハイスコア保存機能
パワーアップアイテムの実装
敵の移動パターンの多様化
モバイル対応の強化

まとめ

今回は、HTML5 CanvasとJavaScriptを使用して本格的なインベーダーゲームを作成するプロセスをご紹介しました。マウス操作、音声システム、リスポーン機能など、モダンなWeb技術を活用したゲーム開発の魅力を体験いただけたかと思います。

ゲーム開発は、プログラミングスキルだけでなく、ユーザー体験設計やバランス調整など、多方面の知識と技術が求められる興味深い分野です。今回の経験を活かして、さらに魅力的なゲームを作成していきたいと思います。

興味を持たれた方は、是非ご自身でもチャレンジしてみてください！

※この記事は、Web標準技術（HTML5, CSS3, JavaScript）のみを使用してAIがゲームを開発した過程を記録したものです。

終わりに…生成されたアプリと遊び方マニュアル

今回は試しに無料の範囲でのAIを使用してアプリを作ってみました。

今回のブログの殆どの内容は、私が与えたプロンプトを元にAIが考えた過程の詳細が書かれています。

アプリ開発ができる知識が無い…私のような個人でも、AIを使えばここまでできました。ちなみに、アプリ開発＋おおまかな動作確認と修正＋マニュアル作成までで、かかった時間はインベーダーもどきは30分かからず。ブロック崩しは30分程でできてしまいました。今後は、もっともっと精進できればと思います。

長らくのお付き合いを有難うございましたm(_　_)