[WEB App] SHARP PC-G850V Emulator — ブラウザで動くポケコンエミュレーター (Z80コア・144×48 LCD・IM1割り込み入力 実装)

[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

Z80 EMULATOR PROJECT

トップページのスタートメニューからも起動できます。(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 COREZ80A命令セット(IM1割り込み対応、レジスタ、全フラグ演算)
LCD DISPLAY144×48 ImageDataバッファ描画、5×7フォント制御、VRAMスクロール
ACIA / I/O PORTポート $81(データ)および $80(ステータス)のI/O制御、割り込み要求管理
KEY INPUT DRIVER物理キーボード/画面ソフトキー入力をシリアルASCIIコードへ変換・キューイング
SYSTEM BUS & ROMROM/RAM メモリマッピング(0x0000-0x7FFF ROM / 0x8000-0xFFFF RAM)
UI CONTROLLERCSSコンテナクエリ制御、レスポンシブレイアウトおよび各種ボタンイベント管理

使い方

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 およびソフトキーボードの実装

技術記事