【開発記】多層化するサイバー空間。ステージ選択システムと「スケールの壁」への挑戦

『ネオ・ジパング：サイバー・コーポレーション』の開発は、バックエンドの論理構築から、プレイヤーが最初に目にする「戦場選び」のフェーズへと突入しました。

今回は、全12ステージの定義と、それらをブラウザ上で美しく、かつ正確に描画するためのフロントエンド実装の裏側をお届けします。

戦場を定義する：stageData.js の設計図

本作では、最小19マスから最大39マスまで、難易度も特性も異なる12の島（ステージ）を用意しています。これを管理するのが、今回実装した stageData.js です。

単なるテキストデータではなく、「目標シェア（勝利条件）」や、マップの広さに応じて表示倍率を調整する「zoom（スケール）」など、ゲームバランスとUI制御を司る重要なパラメータを統合しました。

ステージ・ピックアップ

• 1面：はじまりの島 19マスの最小構成。対角線配置は即・窒息を意味する、純粋な実力派マップです 。

• 2面：火山島 内海に港を作れない制約があり、外周の「ゲートウェイ」確保が勝負の分かれ目となります 。

• 3面：けいこく 4つの島が連なる広域マップ。島をまたぐネットワーク構築が必須のテクニカルステージです 。

🥷 忍の苦労：CSSによる「動的スケーリング」の怪

今回、最も苦戦したのは「異なるサイズの六角形マップを、いかに同じ枠内に完璧に収めるか」という点です。

ステージによって、横に長い列島もあれば、縦に深い渓谷もあります。単純に表示するだけでは、大きなマップが画面からはみ出したり、小さなマップが寂しく見えてしまったりします。

解決策：データ駆動型ズーム調整

各ステージデータに zoom プロパティを持たせ、Canvasの描画時に動的にスケールを適用する手法を採りました。

JavaScript

// 例：3面「けいこく」の設定
{
  id: "STAGE_03_CANYON",
  totalHexes: 28,
  zoom: 0.75, // 上下に広いため、強めに縮小して枠内に収める
  difficulty: "NORMAL",
  themeColor: "#ccff00"
}

特に3面のように上下に広がるマップでは、0.75 という絶妙な数値を導き出すまで、ひたすらブラウザ上での調整を繰り返しました。この「手触り」の調整こそが、ブラウザ完結開発の醍醐味であり、一番の難所でもあります。

「未実装」という名の希望

現在、ステージ選択画面には「未実装」のラベルが並んでいますが、これは単なる欠落ではありません。 「北の大地」でのDX戦略、「オアシス」での未開地開拓、そして最終ステージ「天空の島」での究極のバランス調整まで、ロードマップは既に引かれています 。

次なるステップ

次は、これらのマップ上に実際に「リソース」を産出させ、FastAPIによる堅牢なゲームロジックを連結させていきます。

質素でありながら、奥深い。低スペックPCでも動く、最高にクールなサイバー・コーポレーションの世界を創り上げていきます。