TD4エミュレータ 📖

『CPUの創りかた』で題材となっている4ビットCPU「TD4」のエミュレータを作りました。CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja ライセンスとします。

プログラム: (→大)
●(タイトルの)グループボックス作成とは 　変数 グループボックスは「fieldset」のDOM部品作成。 　変数 タイトル要素は「legend」のDOM要素作成。 　それに(「document」の「createTextNode」を[タイトル]でJSメソッド実行)をDOM子要素追加。 　グループボックスにタイトル要素をDOM子要素追加。 　グループボックスを戻す。 ここまで。 ●(グループでタイトルの)ラジオボタン作成とは 　タイトルのチェックボックス作成。 　それの「type」に「radio」をDOM属性設定。 　それの「name」にグループをDOM属性設定。 　それを戻す。 ここまで。 ●改行禁止上揃え箱作成とは 　「div」のDOM部品作成。 　それに{ 　　"white-space": "nowrap", 　　"display": "inline-block", 　　"vertical-align": "top" 　}をDOMスタイル一括設定。 　それを戻す。 ここまで。 ●テーブル箱作成とは 　「div」のDOM部品作成。 　それの「display」に「table」をDOMスタイル設定。 　それを戻す。 ここまで。 ●(タイトルでビット数の)レジスタ作成とは 　変数 初期親要素はDOM親要素。 　変数 行要素は「div」のDOM部品作成。 　それの「display」に「table-row」をDOMスタイル設定。 　それにDOM親要素設定。 　タイトルラベルはタイトルのラベル作成。 　タイトルラベルの「display」に「table-cell」をDOMスタイル設定。 　もし、タイトルが空と等しく無いならば 　　タイトルラベルの「padding-right」に「0.5em」をDOMスタイル設定。 　ここまで。 　「span」のDOM部品作成。 　それの「display」に「table-cell」をDOMスタイル設定。 　それにDOM親要素設定。 　(ビット数)回繰り返す 　　「」のチェックボックス作成。 　ここまで。 　初期親要素にDOM親要素設定。 　行要素を戻す。 ここまで。 ●(レジスタ要素を)レジスタ読取とは 　変数 レジスタ配列はレジスタ要素の「input[type=checkbox]」をDOM子要素全取得。 　変数 結果は0。 　変数 天井ビットは1<<(レジスタ配列の配列要素数から1を引く)。 　レジスタ配列を反復 　　もし、(対象の「checked」をDOM属性取得)がはいならば 　　　結果を(天井ビット>>対象キー)だけ増やす。 　　ここまで。 　ここまで。 　結果を戻す。 ここまで。 ●(レジスタ要素に値を)レジスタ設定とは 　変数 レジスタ配列はレジスタ要素の「input[type=checkbox]」をDOM子要素全取得。 　変数 天井ビットはレジスタ配列の配列要素数から1を引く。 　レジスタ配列を反復 　　対象の「checked」に((値>>(天井ビットから対象キーを引く))を2で割った余りが0と等しく無い)をDOM属性設定。 　ここまで。 ここまで。 デフォルト親要素はDOM親要素。 改行禁止上揃え箱作成。 それにDOM親要素設定。 「ROM」のグループボックス作成。 それにDOM親要素設定。 テーブル箱作成。 それにDOM親要素設定。 ROMは空配列。 16回繰り返す 　HEX(回数-1)を大文字変換。 　それで8のレジスタ作成。 　ROMにそれを配列追加。 ここまで デフォルト親要素にDOM親要素設定。 改行禁止上揃え箱作成。 それの「margin-left」に「1em」をDOMスタイル設定。 それにDOM親要素設定。 右箱はそれ。 「レジスタ・ポート」のグループボックス作成。 それにDOM親要素設定。 テーブル箱作成。 それにDOM親要素設定。 Aレジスタは「A」で4のレジスタ作成。 Bレジスタは「B」で4のレジスタ作成。 フラグレジスタは「C」で1のレジスタ作成。 プログラムカウンタは「PC」で4のレジスタ作成。 出力ポートは「OUT」で4のレジスタ作成。 入力ポートは「IN」で4のレジスタ作成。 右箱にDOM親要素設定。 「自動クロック」のグループボックス作成。 それにDOM親要素設定。 自動クロック名は「auto-clock」。 クロック停止ボタンは自動クロック名で「停止」のラジオボタン作成。改行作成。 クロック1Hzボタンは自動クロック名で「1Hz」のラジオボタン作成。改行作成。 クロック10Hzボタンは自動クロック名で「10Hz」のラジオボタン作成。改行作成。 クロック100Hzボタンは自動クロック名で「100Hz」のラジオボタン作成。 クロック停止ボタンの「checked」に「true」をDOM属性設定。 右箱にDOM親要素設定。 「操作」のグループボックス作成。 それにDOM親要素設定。 クロックボタンは「クロック」のボタン作成。 リセットボタンは「リセット」のボタン作成。 ●(数に位置の)ビット立とは 　(数>>位置)を2で割った余りが0と等しく無いかを戻す。 ここまで。 ●TD4ステップとは 　# 命令をROMからフェッチする 　変数 フェッチ位置はプログラムカウンタをレジスタ読取。 　変数 命令はROM[フェッチ位置]をレジスタ読取。 　# 命令に基づき、加算するデータを選択する 　変数 データ選択Aは(命令に7のビット立つ)または(命令に4のビット立つ)。 　変数 データ選択Bは命令に5のビット立つ。 　加算データとは変数。 　もし、データ選択Aがはいならば 　　もし、データ選択Bがはいならば 　　　加算データは0。 　　違えば 　　　加算データはBレジスタをレジスタ読取。 　　ここまで。 　違えば 　　もし、データ選択Bがはいならば 　　　加算データは入力ポートをレジスタ読取。 　　違えば 　　　加算データはAレジスタをレジスタ読取。 　　ここまで。 　ここまで。 　# 選択したデータを即値と加算する 　変数 即値は命令を16で割った余り。 　変数 加算結果は加算データに即値を足す。 　次フラグとは変数。 　もし、加算結果が16以上ならば 　　次フラグは1。 　違えば 　　次フラグは0。 　ここまで。 　変数 新データは加算結果を16で割った余り。 　# 命令に基づき、加算の結果をレジスタに書き込む 　変数 書込判定Aは命令に6のビット立つ。 　変数 書込判定Bは命令に7のビット立つ。 　変数 書込判定A否定は書込判定A=いいえ。 　変数 フラグ判定は(フラグレジスタをレジスタ読取が0と等しい)または(命令に4のビット立つ)。 　もし、(書込判定A)または(書込判定B)でなければ 　　Aレジスタに新データをレジスタ設定。 　ここまで。 　もし、(書込判定A否定)または(書込判定B)でなければ 　　Bレジスタに新データをレジスタ設定。 　ここまで。 　もし、(書込判定A否定)かつ(書込判定B)ならば 　　出力ポートに新データをレジスタ設定。 　ここまで。 　もし、(書込判定A)かつ(書込判定B)かつ(フラグ判定)ならば 　　プログラムカウンタに新データをレジスタ設定。 　違えば 　　変数 次位置はフェッチ位置に1を足して16で割った余り。 　　プログラムカウンタに次位置をレジスタ設定。 　ここまで。 　フラグレジスタに次フラグをレジスタ設定。 ここまで。 クロックボタンをクリックした時には 　TD4ステップ。 ここまで。 リセットボタンをクリックした時には 　Aレジスタに0をレジスタ設定。 　Bレジスタに0をレジスタ設定。 　フラグレジスタに0をレジスタ設定。 　プログラムカウンタに0をレジスタ設定。 　出力ポートに0をレジスタ設定。 ここまで。 自動クロック予約済はいいえ。 自動クロック間隔はNULL。 自動クロック次時刻はNULL。 ●自動クロック予約とは 　もし、自動クロック予約済みでなければ 　　「自動クロック」を画面更新時実行。 　　自動クロック予約済ははい。 　ここまで。 ここまで。 ●自動クロックとは 　自動クロック予約済はいいえ。 　もし、自動クロック次時刻がNULLでなければ 　　現在時刻はシステム時間ミリ秒。 　　自動クロック次時刻が現在時刻以下の間 　　　TD4ステップ。 　　　自動クロック次時刻を自動クロック間隔だけ増やす。 　　ここまで。 　　自動クロック予約。 　ここまで。 ここまで。 ●(間隔の)自動クロック開始とは 　自動クロック間隔は間隔。 　自動クロック次時刻はシステム時間ミリ秒に間隔を足す。 　自動クロック予約。 ここまで。 ●自動クロック停止とは 　自動クロック間隔はNULL。 　自動クロック次時刻はNULL。 ここまで。 クロック停止ボタンをクリックした時には 　自動クロック停止。 ここまで。 クロック1Hzボタンをクリックした時には 　1000の自動クロック開始。 ここまで。 クロック10Hzボタンをクリックした時には 　100の自動クロック開始。 ここまで。 クロック100Hzボタンをクリックした時には 　10の自動クロック開始。 ここまで。