[WEB App] SHARP PC-G850V Emulator — ブラウザで動くポケコンエミュレーター (Z80コア・144×48 LCD・IM1割り込み入力 実装)
SHARP PC-G850V Emulator
Z80 CPUコアのエミュレーションをベースに、144×48ドット液晶ディスプレイ(24桁×6行表示)、5×7ビットマップフォント描画、ACIAポート($81)経由のIM1シリアル割り込み(ベクタ $0038)駆動によるキー入力処理までをブラウザ完結で実装したSHARP PC-G850V風ポケットコンピュータエミュレーター。
PC物理キーボードからの直接入力および、CSSコンテナクエリ(container-type: inline-size)と clamp() で構築されたレスポンシブ液晶・画面ソフトキーボードに対応。スマートフォンやタッチデバイスでも環境構築なしで動作する。
PC-G850V EMULATOR
SHARP PC-G850V Emulator — ブラウザで動くポケコンエミュレーター (Z80コア・144×48 LCD・IM1割り込み入力 実装)
144×48ドットLCD・IM1割り込み入力・レスポンシブ画面キーボード対応のWebブラウザPC-G850Vエミュレーター。
lain-lab.comZ80 EMULATOR PROJECT
Z80 EMULATOR PROJECT
フルスクラッチ JavaScript Z80 コアと、その上に構築されたレトロシステムエミュレーター群
lain-lab.comトップページのスタートメニューからも起動できます。(WINDOW)
スクリーンショット
BASIC プログラム実行・液晶表示
動画(GIF)
特徴
-
イベント駆動型 IM1 シリアル割り込みキー入力:
キー押下時にZ80コアへz80.interrupt(0xFF)を発火。ROM内の割り込みサービスルーチン($0038)がACIAデータレジスタ(ポート$81)を読み取り、RAMバッファ経由でBASICインタープリタへキー入力を渡す非同期入力構造を忠実に再現。 -
144×48ドット LCD & 5×7 ビットマップフォント描画:
24桁×6行のテキスト表示に対応。ASCII 0x20〜0x7E(95文字)のビットマップテーブルを保持し、CR、LF、BS、CLS などの制御コード処理およびTypedArray.prototype.copyWithinを用いた高速VRAM上方向スクロールをエミュレート。 -
CSSコンテナクエリによる可変レスポンシブ筐体デザイン:
container-type: inline-sizeとclamp()を組みあわせ、ウィンドウ幅に合わせて液晶表示エリアとキーパッドが自動スケーリング。PC・スマホのどちらでも自然な表示を確保。 -
実機風ソフトキーボード&記号キー配置:
アルファベット・数字キーに加え、BASIC言語の入力に必要な記号キー(",$,=,+,-,*,/など)を独立した画面キーとして配置。タッチ操作のみでプログラム入力が可能。
モジュール構成
| モジュール名 | 主要機能 |
|---|---|
| Z80 CPU CORE | Z80A命令セット(IM1割り込み対応、レジスタ、全フラグ演算) |
| LCD DISPLAY | 144×48 ImageDataバッファ描画、5×7フォント制御、VRAMスクロール |
| ACIA / I/O PORT | ポート $81(データ)および $80(ステータス)のI/O制御、割り込み要求管理 |
| KEY INPUT DRIVER | 物理キーボード/画面ソフトキー入力をシリアルASCIIコードへ変換・キューイング |
| SYSTEM BUS & ROM | ROM/RAM メモリマッピング(0x0000-0x7FFF ROM / 0x8000-0xFFFF RAM) |
| UI CONTROLLER | CSSコンテナクエリ制御、レスポンシブレイアウトおよび各種ボタンイベント管理 |
使い方
1. アプリの起動
ページを開くと PC-G850V 風の液晶画面とキーボード筐体が読み込まれ、BASIC待機状態(プロンプト)が表示されます。
2. キー入力(キーボード / ソフトキー)
PCのキーボードから直接英数字や記号を入力するか、画面下部のソフトキーボードをクリック/タップすることで入力できます。
3. BASIC プログラムの実行
コマンドラインから BASIC 命令(例: 10 PRINT "HELLO" や RUN)を入力して Enter キーを押すと、プログラムが実行されます。
4. 画面クリア(CLS)
CLS コマンドを実行するか、ソフトキーの「CLS」ボタンを押すことで、液晶画面の表示テキストバッファを消去できます。
キーボード操作
制御・編集キー
| PC-G850V 機能 | PC キーボード |
|---|---|
| Enter (改行 / 実行) | Enter キー |
| BS (バックスペース) | Backspace キー |
| Space (スペース) | Space キー |
| CLS (画面消去) | Escape キー |
文字・記号入力
| PC-G850V 機能 | PC キーボード |
|---|---|
| 英数字 (A-Z, 0-9) | A-Z, 0-9 キー |
| 四則演算子 (+, -, *, /) | +, -, *, / キー |
| 記号 (”, $, =, etc.) | 各対応キー / 画面ソフトキー |
技術スタック
- JavaScript (ES6+ / Modules) — Z80コア・ACIA I/O・LCDレンダラー
- HTML5 Canvas (2D Context / ImageData) — 144×48 液晶ピクセル描画
- CSS3 (Container Queries /
clamp()) — レスポンシブ筐体デザイン - Astro — Webアプリケーション基盤
更新履歴
- [2026-09-16]: v1.0 初回公開。
- Z80 CPU コアおよび 144×48 LCD 表示エンジンの構築
- ACIA ポート
$81と IM1 割り込み(ベクタ$0038)によるシリアル入力機構の実装 - 5×7 ビットマップフォントおよび VRAM スクロール処理の実装
- CSSコンテナクエリを用いたレスポンシブ筐体 UI およびソフトキーボードの実装
技術記事
[JavaScript] SHARP PC-G850Vポケコンエミュレーターを作る。144x48 LCD描画・IM1割り込み駆動キー入力とレスポンシブUI
自作Z80 CPUコアの上に144x48ドット液晶描画、5x7フォントテーブル、ACIAポート経由のIM1割り込みキー入力、およびCSSコンテナクエリによる可変レスポンシブUIを組み込んだPC-G850Vエミュレーターの実装解説。
lain-lab.com
[JavaScript] SEGA SG-1000エミュレーターを作る。Z80・TMS9918・SN76489(DCSG)音源とバス分離設計
MSXエミュレーターのZ80 CPUコアを再利用し、SEGA SG-1000エミュレーターをわずか約400行の追加コードで構築。部分デコード処理、SN76489 PSG音源のAudioWorklet合成、NMIによるPAUSEボタン実装までを解説。
lain-lab.com
Z80エミュレーター開発記 第4回:ハードウェアバスとエミュレーションの勘所 // PROTOCOL.LAIN
Z80エミュレーター開発記の最終回。M1サイクルの4 T-state構成、メモリリード/ライト、コールバック方式によるCPUコアとシステムの分離設計、zexdoc/zexallによる検証戦略を解説する。
lain-lab.com