[2026/9/19]

[WEB App] JS Pac-Man Emulator — ブラウザで動くPac-Manエミュレーター (Z80コア・Namco WSG・ZIP ROMローダー)

[WEB App] JS Pac-Man Emulator — ブラウザで動くPac-Manエミュレーター (Z80コア・Namco WSG・ZIP ROMローダー)

JS Pac-Man Emulator

自作Z80 CPUコアをベースに、Namco Pac-Man（1980）のアーケード基板をブラウザ上にエミュレート。

MAMEの tilelayout / spritelayout 構造体を解析して実装したビットプレーンデコード（planes:{0,4} — 同一バイト内の上位・下位4ビットが別プレーン）、カラーPROM 2段階ルックアップ、Namco WSG 3チャンネル波形合成サウンドに対応。

アーケードROMは著作権の問題で配布できないため、JSZipによるZIP drag-and-dropローダーを実装。MAMEのROMパックを直接ドロップして起動できる。

ゲームの起動方法

JS PAC-MAN EMULATOR

以下、リンクを開くと起動します。

スタートメニューから起動

トップページのスタートメニューからも起動できます。

JS Pac-Man Emulator — スタートメニューで動くPac-Manエミュレーター

Z80 EMULATOR PROJECT

スクリーンショット

ZIP ROMローダー

JS Pac-Man Emulator // ZIP ROMローダー

タイトル画面

JS Pac-Man Emulator // タイトル画面

ゲームプレイ画面

JS Pac-Man Emulator // ゲームプレイ画面

特徴

  • ZIP drag-and-drop ROMローダー:
    MAMEのROMパック（ZIP）を画面にドロップするか、クリックしてファイル選択するだけで起動。必須ROM（pacman.6e/6f/6h/6j・pacman.5e/5f/5m）の確認とエラー表示をUI上に表示。複数のファイル名パターン（MAMEロムセット・クローン・短縮名）に対応し、大文字小文字を無視して検索。

  • MAMEのtilelayout解析によるビットプレーンデコード:
    planes:{0,4} — 同一バイトの下位4ビット・上位4ビットが別プレーンというPac-Man固有の構造を解析して実装。256タイル・64スプライトをデコード済みキャッシュとして保持し、毎フレームの描画コストを削減。

  • カラーPROM 2段階ルックアップ:
    82s123.7f（32色RGBテーブル）と 82s126.4a（256エントリパレット変換テーブル）による2段階カラーシステム。PROMs未搭載時はデフォルトパレットにフォールバック。

  • Namco WSG 3チャンネルサウンド:
    ROM 5m（256バイト）に格納された8種類の波形テーブルを使用したリアルタイム波形合成。ScriptProcessorNodeで3チャンネルを合成してWeb Audio APIから出力。

  • 物理モニター回転への対応:
    Pac-Man基板の物理モニターは90°CCW回転。VRAMアドレス変換・タイル180°回転描画・スプライト座標変換をすべて回転補正済みで実装。

使い方

1. ROMのロード

  1. ページを開く
  2. 黄色い点線ゾーンにMAMEのROMパック（pacman.zip）をドロップ、またはクリックしてファイル選択
  3. 必須ROMが揃えば自動的にエミュレーターが起動
  4. 不足ROMがある場合はUIのログに赤でエラー表示

2. 必要なROMファイル

必須：

ファイルサイズ内容
pacman.6e4096 bytesCPU ROM (0x0000-0x0FFF)
pacman.6f4096 bytesCPU ROM (0x1000-0x1FFF)
pacman.6h4096 bytesCPU ROM (0x2000-0x2FFF)
pacman.6j4096 bytesCPU ROM (0x3000-0x3FFF)
pacman.5e4096 bytesグラフィックROM（タイル）
pacman.5f4096 bytesグラフィックROM（スプライト）
pacman.5m256 bytesサウンド波形ROM

任意（カラーPROM）：

ファイルサイズ内容
82s123.7f32 bytes32色RGBテーブル
82s126.4a256 bytesパレット変換テーブル

キーボード操作

機能キー
コイン投入[5]
スタート（1P）[1]
移動W / A / S / D または 矢印キー

モジュール構成

モジュール名主要機能
Z80 CPU COREZ80A命令セット（IM1/IM2割り込み対応）
PACMAN SYSTEMVRAM・スプライト座標・I/Oポートルーティング
TILE/SPRITE DECODERMAMEのtilelayout解析によるビットプレーンデコード
COLOR PROM2段階カラーLUT（82s123.7f + 82s126.4a）
NAMCO WSG波形ROM（5m）ベースの3チャンネル波形合成
ZIP LOADERJSZipによるROMパック解析・展開
UICanvas描画、ZIP drag-and-drop、ログ表示

技術スタック

  • JavaScript (ES6+ / Modules) — Z80コア・Pac-Manシステム・サウンド
  • HTML5 Canvas (2D Context / ImageData) — フレームバッファ描画
  • Web Audio API (ScriptProcessorNode) — Namco WSG 3チャンネル合成
  • JSZip — クライアントサイドZIP展開
  • Astro — Webアプリケーション基盤

更新履歴

  • [2026-09-18]: v1.0 初回公開。
    • MAMEのtilelayout解析によるビットプレーンデコードの実装
    • VRAMアドレス変換・タイル描画・スプライト座標系の実装
    • カラーPROM（82s123.7f / 82s126.4a）2段階ルックアップの実装
    • Namco WSG 3チャンネル波形合成サウンドの実装
    • JSZipによるZIP drag-and-drop ROMローダーの実装

技術記事