[WEB App] LAIN RETRO ARCADE — 外部画像ゼロで動くレトロゲームコレクション

Canvas2D Retro Arcade Games

1970〜1980年代の伝説的アーケードゲーム（PONG、平安京エイリアン、スペースインベーダーなど）を、外部画像ファイルを一切使わずに Pure Canvas2D のみで完全再現・リメイクした Web ゲームコレクションです。

画像アセットのロード待ちや依存を排除し、すべてのグラフィックを fillRect による 8×8 数値配列スプライト描画で構築。React の再レンダリングサイクルから描画系を切り離すため useRef と requestAnimationFrame を組み合わせたゲームループを構築し、軽量かつ滑らかな 60fps 動作を実現しています。

Canvas2D Retro Arcade Games

外部画像ゼロで動くレトロアーケードゲーム集。Pure Canvas2D 描画、8x8 スプライト、PONG・平安京エイリアン・スペースインベーダー収録。

lain-lab.com

スクリーンショット

起動

トップページの左下にある「ターミナル」で game コマンドを実行。

タイトル

カーソルキーの上下で選択、ENTERで決定

OPTION

タイトルバーの「⚙」アイコンクリックでOPTION画面。

ウインドウ全体の透明度、ネオンカラー、背景色を変更可能。

1.PONG (1972)

02. HEIANKYO ALIEN (1979)

03. SPACE INVADER (1978)

04.PAC-MAN (1980)

動画（GIF）

1.PONG (1972)

02. HEIANKYO ALIEN (1979)

03. SPACE INVADER (1978)

04.PAC-MAN (1980)

収録タイトル・ステータス

No.	タイトル	オリジナル年	ステータス	概要
01	PONG	1972	v1.0 (Playable)	ATARI RETRO TABLE TENNIS
02	HEIANKYO ALIEN	1979	v1.0 (Playable)	DIG HOLES & TRAP ALIENS
03	SPACE INVADER	1978	v1.0 (Playable)	DEFEND EARTH FROM ALIENS
04	PAC-GHOST	1980	v1.0 (Playable)	DOT EATING MAZE ACTION

特徴

• 完全画像レス（Pure Canvas2D）:
  PNG/SVG などの画像ファイルを一切ロードせず、すべて 8×8 の数値配列データから fillRect を用いてリアルタイムにドット絵スプライトを生成。
• React レンダリングと切り離したゲームループ:
  ゲーム内の座標・速度・フラグ管理は useRef に保持し、requestAnimationFrame ループ内で直接 Canvas に描画することで React の state 再描画オーバーヘッドを回避。
• 物理・AI メカニクス実装:
  
  • PONG: 1打ごとに球速が 5% 加速する物理挙動と、パドル打撃位置のオフセットに応じた反射角制御。
  • 平安京エイリアン: プレイヤーの穴掘り/埋めアクションおよびグリッド移動、直線・視線追跡アルゴリズムによるエイリアン AI。
  • スペースインベーダー: 敵の残存数に応じた段階的移動スピードアップ、22×16 ビットマップで再現された破壊可能シールド。

使い方

1. ゲームタイトルを選択

メニュー画面の GAMES リストからプレイしたいタイトル（PONG、HEIANKYO ALIEN、SPACE INVADER など）を選択します。

2. 操作方法

各ゲーム共通で、キーボード操作に対応しています。

• PONG: ↑ / ↓ キーでパドル上下移動
• 平安京エイリアン: 方向キーで移動、Z キーで穴掘り / X キーで埋め
• スペースインベーダー: ← / → キーで左右移動、Space キーでビーム発射
• パックマン: 方向キーで移動

技術スタック

• HTML5 Canvas API (2D Context) — 8×8 スプライト描画および 2D ゲームグラフィックレンダリング
• React (useRef, useEffect) — ゲーム状態管理および Canvas ライフサイクル制御
• Astro — Web アプリケーション基盤

技術記事

[Astro] #141 Pure Canvas2D で作るレトロアーケードゲーム集 — 8x8 スプライト描画とゲームループ実装

外部画像を一切使わずに Canvas2D と 8×8 数値配列スプライトだけで PONG、平安京エイリアン、スペースインベーダーを構築した開発記録。useRef による状態保持と requestAnimationFrame ループ、物理計算・AI追尾の実装解説。

lain-lab.com

更新履歴

• [2026-09-11]: v1.0 初回公開。
  
  • Pure Canvas2D 描画エンジンの構築（8×8 数値配列スプライト生成機能）
  • PONG (1972) 実装（パドル反射角・5%連続加速物理演算）
  • HEIANKYO ALIEN (1979) 実装（穴掘り・埋めメカニクス、追従 AI）
  • SPACE INVADER (1978) 実装（生存数依加速度制御、22×16 破壊可能シールド）
  • PAC-GHOST (1980) 実装（4種ゴースト個別追跡 AI、イジケモード反転・スコア倍率演算）