【１日１デプロイ】連鎖が“読める”プリズムシューティングを作った

今回作ったもの

「１日１デプロイ」の新作として、ブラウザで遊べる縦型シューティング プリズム迎撃隊 を作りました。

プレイヤーは、ブラピさんが乗る光翼機を画面上で押したまま動かします。押しているあいだは光弾を連射。結晶編隊を短い間隔で撃ち落とすとコンボが伸び、プリズムゲージが100%になると、画面上の敵へ虹色の光が次々につながります。

45秒間の迎撃で暗い空へオーロラと街明かりを取り戻すゲームです。シールドがなくなっても短いバリア再起動で復帰するため、途中で長く止まらず、最後まで撃ち続けられます。

▶ プリズム迎撃隊を遊ぶ

遊び方

1. 「迎撃をはじめる」を押す
2. 画面を押したまま、指またはマウスで光翼機を動かす
3. 結晶を続けて撃ち落とし、コンボとプリズムゲージを伸ばす
4. ゲージが100%になったら「プリズム照射」
5. シールドを守りながら45秒迎撃する

PCでは矢印キーまたは WASD で移動し、Space で射撃、Enter でプリズム照射もできます。

敵は小さく素早い結晶、2発必要な結晶、耐久力の高い金冠結晶の3種類です。被弾するとシールドが減りますが、1.25秒の無敵時間が入るため、同じ場所で一気に全シールドを失わないようにしました。

今日のレベルアップ1：敵の種類と、その場の状態を分ける

敵ごとの差は、種類ごとのデータとしてまとめました。

const enemyKinds = {
  kite:  { hp: 1, radius: 19, speed: 64, score: 120, charge: 13 },
  moth:  { hp: 2, radius: 25, speed: 50, score: 260, charge: 18 },
  crown: { hp: 8, radius: 42, speed: 28, score: 900, charge: 28 }
};

一方、画面に出た個体は、位置、経過時間、左右の揺れ、撃破済みかどうかなどを別に持ちます。

この分け方にすると、「大きな敵だけ遅くする」「耐久力の高い敵はゲージを多く増やす」といった調整を、描画や当たり判定の各所へ書き散らさずに済みます。通常弾でもプリズム照射でも、最後は同じ撃破処理へ集めたので、得点、コンボ、破片、ゲージの増加がずれにくくなりました。

今日のレベルアップ2：一瞬で消さず、連鎖の順番を見せる

プリズム照射は「画面内の敵を全部倒す」だけなら、配列を一度に空にする処理でも作れます。しかし、それでは何が起きたのか目で追えません。

今回は、照射を始めた瞬間に敵を上から順に並べ、少しずつ時刻をずらしたキューを作りました。

prismQueue = enemies
  .filter(enemy => !enemy.dead)
  .sort((a, b) => a.y - b.y)
  .map((enemy, i) => ({
    enemy,
    at: 0.16 + i * 0.075
  }));

更新処理では、指定時刻に達した敵だけを1体ずつ撃破します。直前の敵から次の敵へ光線をつなぎ、約0.075秒間隔で結晶をほどいていきます。

結果は同じ全体攻撃でも、期待する → 1体目が光る → 次へつながる → 編隊全体が崩れるという流れが見えるようになりました。爽快感は、派手さを増やすだけでなく、変化の順番を理解できることでも強くなると感じました。

今日のデザイン：アールデコの夜空とステンドグラス

見た目は アールデコの夜空 × ステンドグラスの航空ショー がテーマです。

深い群青の空へ、金色の細い額縁、二重円の月、多層で流れる星、半透明の結晶を重ねました。光翼機には薄荷、シアン、紫、珊瑚色の翼を付け、コックピットにはブラピさんが乗っています。

プリズム照射では5色の光線と三角形の破片が広がり、撃破が進むほどオーロラと街明かりが強くなります。画面を別の結果画像へ切り替えるのではなく、プレイ中の同じ空が少しずつ明るくなるため、「自分が空を取り戻している」と分かるようにしました。

音を出せない環境でも、ゲージ、コンボ数字、光線、破片、オーロラで成功が伝わります。音ありでは、通常射撃と撃破音に加え、プリズム照射で低音と高音を重ねて見せ場を作っています。

非エンジニア初心者がAIでシューティングを作るTIPS

AIへ「縦型シューティングを作って」とだけ頼むと、弾幕、ボス、アイテム、ステージなどが一度に増え、操作感より機能数が先に膨らみがちです。

今回は、最初に「指一本の操作」と「最大の気持ちよさ」を固定しました。次のように依頼できます。

HTML・CSS・JavaScriptとCanvasだけで、スマートフォン縦画面向けの45秒シューティングを作ってください。画面を押しているあいだだけ連射し、指の位置へ機体が追従する操作にします。敵を短い間隔で倒すとコンボとゲージが増え、100%で画面内の敵へ光が順番につながる全体攻撃を使えるようにしてください。全体攻撃では敵を一瞬で消さず、上から順に約0.08秒ずつ遅らせて撃破し、前の敵から次の敵へ線を描いてください。撃破が進むほど暗い空へオーロラと街明かりが戻るようにしてください。シールドが0になっても短時間で復帰し、45秒の体験を中断しないでください。

AIへ頼むときのポイントは、次の4点です。

• 押している間だけ撃つのか、自動で撃ち続けるのか
• コンボが切れる秒数
• ゲージ100%で「何が」「どの順に」変わるか
• 被弾後にゲームがどの状態へ戻るか

完成後は、見た目だけでなく境界を確認します。

5秒間何もしない場合は得点とコンボが増えないか、押したまま左右へ動くと移動と連射が同時に働くか、短時間の連続撃破でコンボが増えるか、ゲージ100%まで照射ボタンが使えないか、照射時に同じ敵へ二重加点しないか、被弾直後の無敵時間でシールドが一気に0にならないかを確認してください。結果確定前にシェアボタンを出さず、撮影用URLでは保存やアクセス計測を行わないことも確認してください。

つまずいたところと直し方

全体攻撃を即時処理すると、見せ場が読めない

最初に考えやすいのは、ボタンを押した瞬間に全敵へ大ダメージを与える処理です。しかし、敵の数が多いほど一瞬の白い画面に見え、連鎖の気持ちよさが残りません。

そこで、対象を先にキューへ入れ、撃破の間隔と接続線を持たせました。確認では、5色の光が出るだけでなく、敵から敵へ線が移り、得点とコンボが段階的に増えるかを見ます。

撮影用でも、結果を直接作らない

縦動画用の画面は、残り13秒、初期ゲージ52%、固定された結晶編隊から始まります。ただし、その後は通常と同じポインター入力、弾、命中、撃破、得点、ゲージ、45秒終了の処理を通ります。

撮影用だからといってコンボやクリア画面を直接表示しないことで、動画に映る動きと、実際に遊んだときのルールを一致させました。

派手な演出ほど、重要表示の場所を確認する

プリズム照射中は、光線、破片、画面揺れ、オーロラが同時に動きます。演出を足すたびに、スコア、残り時間、シールド、ゲージが読めるかを確認しました。

スマートフォンでは、指で機体を隠しすぎないか、照射ボタンが押せるかも重要です。動きの少ないスクリーンショットだけでなく、実際に押したまま左右へ動かして確認する必要があります。

公開URLとまとめ

▶ プリズム迎撃隊

今回は、指一本で移動と射撃ができる操作、3種類の結晶敵、コンボとゲージ、順番が読めるプリズム連鎖、プレイに合わせて空の色が戻る演出を、45秒の縦型シューティングへまとめました。

全体攻撃の結果だけでなく、敵から敵へ光が渡っていく時間を作ったことで、「押した瞬間」から「空が明るくなる瞬間」までがひとつの見せ場になりました。

毎日ひとつ、小さなゲームや便利ツールを公開しています。