AIエージェントと共創！超快感演出＆極太レーザー搭載『ネオン・イーター（NEON EATER）』開発記 ─ ゼロからChrome拡張機能まで

2026年6月6日

こんにちは！株式会社デリシャスノーツの開発チームです。

今回は、AIエージェント（Claude / フライデー）と人間が手を取り合い、わずか数時間という驚異的なスピードで作り上げた、Webで動く本格ネオンアクションゲーム『ネオン・イーター | NEON EATER』の作成プロセスを余すところなくお届けします！

単なる伝統的なドットイートゲームの移植にとどまらず、現代のゲーマーが「最高に気持ちいい」と感じる超快感演出（Juiciness）、難易度調整システム、そしてオリジナルの必殺技「ネオンレーザー」の実装から、最終的にChrome拡張機能としてワンクリックで起動できるようにするまでの開発ロードマップと実装項目を、ステップバイステップでご紹介します。

🚀 開発コンセプト：「サイバーパンク × 圧倒的快感」

本作の核となるコンセプトは「サイバーパンク調の美しいグラフィック」と「プレイヤーを中毒にさせるド派手な演出」です。
無機質なレトロゲームではなく、滑らかなネオンの明滅、カメラシェイク、ヒットストップ、動的にピッチが上がる効果音などを贅沢に組み合わせ、プレイした瞬間に「おっ、これはプレミアムなゲームだ！」と直感できる品質を目指しました。

🛠️ 出来上がるまでの開発プロセス＆実装項目

本作の完成までに辿った、具体的な開発ステップと各機能の実装項目は以下の通りです。

【ステップ1】ゲームの土台構築とサイバーネオンデザイン

まずはゲームが正しく動作する基本システムと、画面の視覚デザインを構築しました。
* HTML/CSS設計: 画面をレトロアーケード筐体のフロントパネルに見立て、ネオンブルーとネオンピンクで発光するサイバーデザインを Vanilla CSS でスタイリングしました。
* Canvas描画とフォント: ゲーム本体はHTML5の Canvas でレンダリング。フォントにはレトロフューチャーな『Orbitron』およびゲームらしい『Press Start 2P』を Google Fonts からインポートして使用しています。
* Web Audio API によるサウンドシンセサイザー: 外部の重い音声ファイルを一切使わず、ブラウザ標準の Web Audio API を用いてオシレーター（発振器）をプログラム制御。三角波やノコギリ波の周波数をミリ秒単位でスイープさせ、完全ローカルでレトロフューチャーな高品質効果音（SE）を動的に合成するシステムを構築しました。

【ステップ2】敵AI（センチネル）の挙動調整とボーナスシステム

敵キャラクターであるセンチネル（防衛プログラム: 赤・桃・水・橙の4体）に、それぞれ個性的な追跡ロジックを実装しました。
* センチネル追跡アルゴリズム:
* Red-Sentinel（赤）: プレイヤーを直接追いかける最も好戦的なAI。
* Pink-Sentinel（桃）: プレイヤーの移動方向の4マス先を予測して待ち伏せるAI。
* Cyan-Sentinel（水）: 赤の位置と自機位置のベクトルの合成から回り込むAI。
* Orange-Sentinel（橙）: 自機との距離が離れている時は追いかけ、近づきすぎると逃げる気まぐれなAI。
* フルーツ出現システム: ゲーム内の経過時間、あるいはデータチップの捕食数に応じて、画面中央に「オレンジ」「りんご」「バナナ」のボーナスフルーツが出現。これを食べると高額スコアを獲得できるシステムを実装。

【ステップ3】プレイを飽きさせない「超快感演出」の完全実装

ここが本作で最もこだわった「気持ちよさ（Juiciness）」の真髄です。
* ドット連続捕食のピッチコンボ（音階上昇）:
データチップを連続して食べている間、効果音（Waka-Waka音）の周波数が少しずつ上昇。「ド・レ・ミ・ファ・ソ・ラ・シ・ド」と音階が駆け上がるため、プレイヤーはチップを食べ続けるのが無性に気持ちよくなります。
* ネオンピンクの波紋＆火花:
チップを食べるたびに、その座標からネオンピンクの円環波紋が広がり、極小のピンクの光の火花が飛び散ります。
* センチネル捕食時のヒットストップとホワイトフラッシュ:
オーバーロードコア（パワーエサ）を食べて弱体化したセンチネルを捕食した瞬間、ゲームの画面更新が 12フレーム（約0.2秒）の間あえて完全停止（ヒットストップ） します。同時に画面全体が一瞬ホワイトフラッシュし、噛んだときの「重みと手応え」をプレイヤーの脳に直接伝えます。
* 大量の火花パーティクル:
捕食した敵のパーソナルカラーに合わせた光線粒子と白色光が四方八方に飛び散る物理パーティクルを放出します。

【ステップ4】スリルと爽快感を演出する機能追加

ゲームとしての歯ごたえと達成感を高めるためのゲームシステムを導入しました。
* ド派手なミス演出（DEATH）:
通常センチネルに接触して自機がやられた際、ヒットストップ（15フレーム） ➔ カメラが激しく振動するカメラシェイク（15px） ➔ 画面全体のレッドフラッシュ が発動。大量の爆散パーティクルが放出され、専用のデジタル崩壊爆発音が響き渡る劇的なミス演出を組み込みました。
* ステージ制と完全エンディング:
データチップをすべて食べきるとステージクリア。全5ステージ構成となっており、ステージ5を完全クリアすると、お祝いのネオンエフェクトとともに「VICTORY! ALL 5 STAGES CLEARED!」のエンディング画面が表示されます。

【ステップ5】オリジナル必殺技「極太ネオンシアンレーザー」

プレイヤーの爽快感を頂点に持っていくため、進行方向に放つレーザービーム兵器を実装しました。
* ネオンレーザー射出:
Space キーを押すと、自機の現在の進行方向に向けて、壁に当たるまで突き進む極太のネオンシアンレーザーが射出されます。
* 一網打尽: レーザーの直線上にいる敵センチネルは瞬時に消滅し、スタート位置へと強制送還されます。消滅したセンチネルからはシアンのパーティクルと多重波紋が広がり、スコアが獲得できます。
* 使用可能オーラ: レーザーにはクールダウンタイムが設定されており、チャージが完了して撃てる状態の時は、自機の周囲にシアンの光のオーラが明滅し、視覚的にチャージ完了を知らせます。

【ステップ6】難易度選択（EASY / NORMAL / HARD）の動的調整

「ゲームが難しすぎる」という意見を反映し、スタート画面で3段階の難易度を切り替えられるようにしました。
* EASY（超簡単・初心者無双）:
* 敵速度: 通常 0.8 / イジケ 0.5 （プレイヤー速度 2.0 の半分以下）
* イジケ（弱体化）時間: 10秒間 （ゆっくり追撃可能）
* 初期残機数: 5機
* レーザークールダウン: 0.5秒 （レーザーを連発して敵を一掃できます）
* NORMAL（標準）: 通常速度 1.6、イジケ時間約5.8秒、残機3、レーザーCT 1秒。
* HARD（激ムズ）: 通常速度 2.0 （プレイヤーと同速度）、イジケ時間約3.3秒、残機3、レーザーCT 1.5秒。

【ステップ7】ワンクリック起動！Chrome拡張機能へのパッケージング

ローカルで動いていたこのゲームを、いつでもブラウザから即起動できるようにChrome拡張機能として実装しました。
* マニフェストファイルの設計: Googleの Manifest V3 規格に完全準拠させ、拡張機能のメタデータを定義。
* Service Worker (background.js): ツールバーに表示される拡張機能アイコンがクリックされた際、ゲームページを新しいタブで自動起動する仕組みを実装。これにより、ポップアップウィンドウ特有の「画面サイズが足りなくてスクロールしてしまう」「キー入力をした時にブラウザがスクロールしてしまう」という不満点を一挙にクリアし、全画面で快適にプレイできるようにしました。
* プレミアムアイコンの用意: AIで生成した「ネオン調のサイバーアイコン」の美麗なグラフィックを、拡張機能に必要な3つのサイズ（16×16、48×48、128×128）へリサイズしてアセットに登録しました。

💡 開発中に直面した課題と「AIエージェントのバグ対応力」

開発の終盤で、ある不可解なバグが発生しました。
それは、「敵が弱体化していないのに青色のままで、見た目は弱っているのに触れると自機が即死する」という不条理な現象でした。

【原因】状態と色の同期ズレ

原因は、弱体化アイテムを食べたタイミングで敵オブジェクトの color プロパティ自体を直接一時的な青色（#0026ff）に書き換えてしまっていたことでした。
そのため、ミスをした際やステージが切り替わった際の「リセット処理」で、敵の状態（isFrightened）は元に戻るものの、color プロパティの書き換え漏れが発生し、見た目だけが弱体化色のまま動き回っていたのです。

【解決】動的レンダリングへの移行

AIエージェント（フライデー）は、このバグを根本から解消するために設計を見直しました。
敵の本来の色は baseColor として完全に退避させ、color の直接書き換えを一切禁止しました。そして、draw() メソッドの中で、現在の状態フラグとタイマーの残り時間に応じて、「描画色を動的に決定（通常色 ➔ 青色 ➔ 白点滅）」 する方式に移行しました。
このアプローチにより、状態の変更やリセットが発生した瞬間に色が100%正確に同期するようになり、バグが完全に撲滅されました。