SPACE SHOOTER

クラシックアーケードゲームの現代的リメイク

プロジェクト解説音声

約2分30秒の日本語解説（Google Cloud Text-to-Speech Neural2音声）

プロジェクト概要

Space Shooterは、クラシックなスペースインベーダーにインスパイアされたブラウザベースのアーケードゲームです。現代的なWeb技術で再構築され、最新のゲームデザイン原則で強化されています。サイバーパンクなネオン美学、レスポンシブデザイン、高度なゲームプレイメカニクスを特徴とし、 HTML5 CanvasとバニラJavaScriptの可能性を示すプロジェクトです。

14 モジュール

92.24% テストカバレッジ

615 テスト数

60 目標FPS

フレームワークを一切使用せずに構築されたこのゲームは、クリーンなアーキテクチャ、包括的なテスト、パフォーマンス最適化技術を実演しています。コードベースはモジュラー設計、詳細なドキュメント、保守性の高いコード構造といったソフトウェアエンジニアリングのベストプラクティスに従っています。

主な機能

ゲームプレイの革新

パワーアップシステム

戦略的なゲームプレイのために組み合わせ可能な3種類のパワーアップ:

連射: 射撃速度が2倍に (300ms → 150ms)
シールド: 視覚効果付きの一時的無敵状態
マルチショット: 扇状に3発の弾を発射

独立したタイマーで最大3つのパワーアップを同時に重ね掛け可能。

コンボシステム

精密なプレイにスコア倍率で報酬:

5連続ヒットで2倍
10連続以上で3倍
2秒経過またはミスでリセット

コンボシステムをマスターしてハイスコアを目指そう!

適応型パフォーマンス

デバイスの性能に応じて自動的に品質を調整:

ハイエンドデバイスで60 FPS
ミッドレンジデバイスで45 FPS
旧型ハードウェアで最低30 FPS

FPSが40以下になるとパーティクルエフェクトを削減。

レスポンシブデザイン

あらゆるデバイスで最適なゲームプレイ:

固定4:3アスペクト比 (800×600論理サイズ)
320pxから2560pxまでCSSスケーリング
モバイルデバイスでのタッチ操作
横向き・縦向き両対応

快適なモバイルプレイのため30%大きなタッチゾーン。

敵AI

現代的な精度を持つクラシックな動き:

5×11グリッド編成 (55体の敵)
同期した移動パターン
ウェーブごとに速度10%増加
敵1体につきフレームあたり1%の発射確率

長時間のエンゲージメントのための段階的な難易度スケーリング。

ビジュアルエフェクト

パーティクルシステムを備えたサイバーパンクネオン美学:

敵破壊時の爆発パーティクル
パワーアップのグローエフェクト
ネオンカラーパレット (シアン/マゼンタ/イエロー)
60 FPSでのスムーズなアニメーション

ハイエンドデバイスで最大100パーティクル。

技術アーキテクチャ

14モジュールシステム

このゲームは、明確な責務分離を持つクリーンでモジュラーなアーキテクチャ上に構築されています:

コアモジュール (4)

Game.js: メインゲームループ、ステートマシン (MENU → PLAYING → PAUSED → GAME_OVER)
Canvas.js: レスポンシブスケーリング対応のレンダリングエンジン
InputHandler.js: キーボードとタッチの統合入力
PerformanceMonitor.js: FPSトラッキングと適応品質調整

エンティティモジュール (4)

Player.js: 移動、射撃、ライフを持つプレイヤーエンティティ
Enemy.js: 敵エンティティとグリッド管理 (5ステップ移動アルゴリズム)
Bullet.js: プレイヤーと敵両方の弾エンティティ
PowerUp.js: 3種類のパワーアップドロップ

システムモジュール (4)

CollisionSystem.js: AABB衝突検出 (5,500回のチェックで10ms未満)
PowerUpSystem.js: パワーアップ状態、重ね掛けルール、タイマー
ScoreSystem.js: コンボ倍率付きスコア計算
ParticleSystem.js: 爆発エフェクトと視覚フィードバック

UIモジュール (3)

Menu.js: スタートメニュー画面
HUD.js: ゲーム内表示 (スコア、ライフ、パワーアップ、コンボ)
GameOver.js: リスタートオプション付きエンド画面

ユーティリティモジュール (2)

Vector2D.js: 2Dベクトル演算
Config.js: 一元化されたゲーム設定

パフォーマンス最適化

// AABB衝突検出 (O(n*m) 最適化済み)
CollisionSystem.checkCollision(rect1, rect2) {
  return !(
    rect1.right < rect2.left ||
    rect1.left > rect2.right ||
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom
  );
}

// 適応品質システム
if (avgFPS < 40) {
  particleSystem.maxParticles = 50;  // 品質を下げる
} else {
  particleSystem.maxParticles = 100; // 高品質
}

Canvasスケーリングアルゴリズム

// ビューポートに収まるよう4:3アスペクト比を維持
const LOGICAL_WIDTH = 800;
const LOGICAL_HEIGHT = 600;

function resizeCanvas() {
  const scale = Math.min(
    window.innerWidth / LOGICAL_WIDTH,
    window.innerHeight / LOGICAL_HEIGHT
  );
  canvas.style.width = `${LOGICAL_WIDTH * scale}px`;
  canvas.style.height = `${LOGICAL_HEIGHT * scale}px`;
}

ブラウザ互換性

HTML5 Canvasをサポートするすべての最新ブラウザで動作:

Chrome 90+ (推奨)
Firefox 88+
Safari 14+
Edge 90+

開発プロセス

AI支援ワークフロー

このプロジェクトは、開発の異なる側面を処理する複数の専門サブエージェントを使用した高度なAI支援ワークフローで開発されました:

要件分析: 機能要件と非機能要件を含む包括的な要件ドキュメント
作業分解構造: 9つの並列実行グループに整理された30タスク
テスト設計: 実装前に設計された615テスト (TDDアプローチ)
並列実装: コア、エンティティ、システム、UIモジュールを同時構築
品質保証: パフォーマンスとコード品質のための3回の改善ループ
ドキュメント: 包括的なドキュメント (README, API, GAMEPLAY)

テスト駆動開発

コードベース全体がTDD原則を使用して構築され、優れたテストカバレッジを達成:

90 コアテスト

120 エンティティテスト

190 システムテスト

165 UIテスト

40 ユーティリティテスト

80 統合 & E2E

品質メトリクス

ステートメントカバレッジ: 88% (目標: 80%)
ブランチカバレッジ: 82% (目標: 75%)
関数カバレッジ: 90% (目標: 85%)
行カバレッジ: 87% (目標: 80%)

プロジェクトタイムライン

最適化された並列実行により2.5日で開発完了:

1日目: コアエンジン、エンティティクラス、テストインフラ
2日目: ゲームシステム、UIコンポーネント、統合
2.5日目: テスト、最適化、ドキュメント

技術スタック

言語: ES6+ JavaScript (クラス、モジュール、アロー関数)
レンダリング: HTML5 Canvas 2D API
テスト: jsdom環境のJest
ビルド: シンプルさのためバニラJS (ビルドステップなし)
サーバー: シンプルHTTPサーバー (PythonまたはNode.js)

はじめに

インストール

# リポジトリをクローン
git clone <repository-url>
cd space-shooter-game

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm start

# テストを実行
npm test

# カバレッジ付きでテストを実行
npm test -- --coverage

オンラインでプレイ

ゲームを起動

ドキュメント

README.md - プロジェクト概要とセットアップ
API.md - 全14モジュールの完全なAPIリファレンス
GAMEPLAY.md - 詳細なゲームプレイガイドと戦略
TEST_COVERAGE_REPORT.md - テストカバレッジ分析

今後の機能拡張

計画中の機能 (優先度3)

独自の攻撃パターンを持つボス敵
ローカルハイスコア保存 (localStorage)
複数の難易度レベル (イージー/ノーマル/ハード)
効果音とBGM (Web Audio API)
追加の武器タイプ
実績システム
キャラクター選択
オンラインリーダーボード

コントリビューション

コントリビューションを歓迎します! 以下のガイドラインに従ってください:

リポジトリをフォーク
機能ブランチを作成
変更に対するテストを作成 (80%以上のカバレッジを維持)
すべてのテストがパスすることを確認
プルリクエストを送信