JSでシミュレータを書く方法
今回は、JS を使用してシミュレーターを作成する方法と、JS でシミュレーターを作成する際の注意点について説明します。実際のケースを見てみましょう。
0x00 CHIP8 の紹介
CHIP8 Wiki から、CHIP8 がインタプリタ型のプログラミング言語であることがわかります。 1970 年代半ばに初めて使用されました。 CHIP8 プログラムは CHIP8 仮想マシンで実行され、その登場によりビデオ ゲームのプログラミングが (当時と比較して) より簡単になりました。 CHIP8 で実装される電子ゲームには、Bee、テトリス、パックマンなどが含まれます。詳細については、CHIP8 の Wiki にアクセスしてください。
0x01 CHIP8 オブジェクトを作成します
CHIP8 はプロセッサ、キーボード、ディスプレイ、スピーカーで構成されており、CPU が CHIP8 のコアであると仮定すると、コードは次のようになります:
<!DOCTYPE html><html><head>
<title>创建Chip8对象</title></head><body>
<script>
(function () { function CPU() {/*...*/ }; function Screen() {/*...*/ }; function Keyboard() {/*...*/ }; function Speaker(){/*...*/ }; window.CHIP8 = function () { var c8 = new CPU();
c8.screen = new Screen();
c8.speaker = new Speaker();
c8.input = new Keyboard(); return c8;
};
})(); </script></body></html>0x02 単純なディスプレイを書きます
CHIP8による Wikiによると、CHIP8のディスプレイ解像度は64X32ピクセルでモノクロです。ピクセルが 1 の場合は、対応するピクセルが画面上に表示され、0 の場合は表示されません。ただし、あるピクセルが存在から不在に変化すると、キャリー フラグが 1 に設定され、衝突検出に使用できます。
その後、コードは次のようになります:
function Screen() { this.rows = 32;//32行
this.columns = 64;//64列
this.resolution = this.rows * this.columns;//分辨率
this.bitMap = new Array(this.resolution);//像素点阵
this.clear = function () { this.bitMap = new Array(this.resolution);
} this.render = function () { };//显示渲染
this.setPixel = function (x, y) {//在屏幕坐标(x,y)进行计算与显示
// 显示溢出处理
if (x > this.columns - 1) while (x > this.columns - 1) x -= this.columns; if (x < 0) while (x < 0) x += this.columns; if (y > this.rows - 1) while (y > this.rows - 1) y -= this.rows; if (y < 0) while (y < 0) y += this.rows; //获取点阵索引
var location = x + (y * this.columns); //反向显示,假设二值颜色黑白分别用1、0代表,那么值为1那么就将值设置成0,同理0的话变成1
this.bitMap[location] = this.bitMap[location] ^ 1; return !this.bitMap[location];
}
};ディスプレイモジュールを作成した後、ディスプレイモジュールをテストするためにディスプレイ画面を作成します(オンラインで画面テストを表示します):
var chip8 = CHIP8();
chip8.screen.render = function () {//自定义实现显示渲染
var boxs = document.getElementById("boxs");
boxs.innerHTML = ""; for (var i of this.bitMap) { var d = document.createElement("span");
d.style = "width: 5px;height: 5px;float: left;";
d.style.backgroundColor = i ? "#000" : "#fff";
boxs.appendChild(d);
}
};/** 测试 **/chip8.screen.setPixel(2, 2);//设置x,y坐标像素chip8.screen.render();
chip8.screen.setPixel(2, 2);//设置x,y坐标像素0x03 スピーカーを作成します
を参照する必要があります。 Web API はこちら:
API https://developer.mozilla.org/en-US/docs/Web/API/AudioContext API https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode
例 https:/ /mdn.github.io/violent-theremin/
例 https://codepen.io/gregh/pen/LxJEaj
スピーカーも非常にシンプルです:
function Speaker() { var contextClass = (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext)
, context
, oscillator
, gain;
if (contextClass) {
context = new contextClass();
gain = context.createGain();
gain.connect(context.destination);
}
//播放声音
this.play = function (frequency) { //API https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode
//示例 https://mdn.github.io/violent-theremin/
if (context && !oscillator) {
oscillator = context.createOscillator();
oscillator.frequency.value = frequency || 440;//声音频率
oscillator.type = oscillator.TRIANGLE;//波形这里用的是三角波 查看示例：https://codepen.io/gregh/pen/LxJEaj
oscillator.connect(gain);
oscillator.start(0);
}
}
//停止播放
this.clear = this.stop = function () { if (oscillator) {
oscillator.stop(0);
oscillator.disconnect(0);
oscillator = null;
}
}
};スピーカーを作成した後、スピーカーをテストできます (スピーカーをオンラインで表示してテスト):
<!DOCTYPE html><html><head>
<title>编写扬声器</title></head><body>
频率： <input type="range" id="frequency" value="440" min="100" max="1000">
<label id="showfv">(440)</label>
<button id="play_btn">播放</button>
<script>
(function () { function CPU() {/*...*/ }; function Screen() {/*...*/ };//略...
function Keyboard() {/*...*/ }; function Speaker() {/*...*/};//略...
window.CHIP8 = function () { var c8 = new CPU();
c8.screen = new Screen();
c8.speaker = new Speaker();
c8.input = new Keyboard(); return c8;
};
})(); var chip8 = CHIP8(); //=======
var f = document.getElementById("frequency"); var isPlay = false; var play_btn = document.getElementById("play_btn");
f.onchange = function () { var v = Number(this.value); document.getElementById("showfv").innerHTML = "(" + v + ")"; if (isPlay) {
chip8.speaker.stop();
chip8.speaker.play(v);
}
};
play_btn.onclick = function () {
isPlay = !isPlay; this.innerHTML = isPlay ? '停止' : '播放'; if (!isPlay) chip8.speaker.stop(); else chip8.speaker.play(f.value);
}; </script></body></html> この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php の他の関連記事に注目してください。中国語のサイトです！
関連書籍:
プラグインツールを使用してES6コードをES5に変換する方法
以上がJSでシミュレータを書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7323
9
1625
14
1350
46
1262
25
1209
29
joiplayシミュレーターの使い方を紹介
May 04, 2024 pm 06:40 PM
jojplay シミュレータは、非常に使いやすい携帯電話シミュレータです。携帯電話で実行できるコンピュータ ゲームをサポートしており、一部のプレイヤーはその使い方を知りません。以下のエディタでその使い方を紹介します。 。 Joiplay シミュレーターの使用方法 1. まず、Joiplay 本体と RPGM プラグインをダウンロードする必要があります。本体、プラグインの順にインストールするのが最適です。apk パッケージは、Joiplay バー (クリック) で入手できます。 >>>)を取得します。 2. Android が完成したら、左下隅にゲームを追加できます。 3. 適当に名前を入力し、実行ファイルの選択を押してゲームの game.exe ファイルを選択します。 4. アイコンは空白のままにすることも、お気に入りの画像を選択することもできます。
MSIマザーボードでvtを有効にする方法
May 01, 2024 am 09:28 AM
MSI マザーボードで VT を有効にするにはどうすればよいですか?どのような方法がありますか?このサイトは、大多数のユーザー向けに MSI マザーボード VT 有効化方法を注意深くまとめています。読んで共有することを歓迎します。最初のステップは、コンピューターを再起動して BIOS に入ることであり、起動速度が速すぎて BIOS に入ることができない場合はどうすればよいですか?画面が点灯したら、「Del」を押し続けて BIOS ページに入ります。2 番目のステップは、コンピューターのモデルによって BIOS インターフェイスと VT の名前が異なります。 : 1. BIOS ページに入ったら、「OC (またはオーバークロック)」-「CPU 機能」-「SVMMode (または Intel Virtualization Technology)」オプションを見つけて、「無効」に変更します。
ASRock マザーボードで vt を有効にする方法
May 01, 2024 am 08:49 AM
ASRock マザーボードで VT を有効にする方法、その方法と操作方法は何ですか。この Web サイトでは、ユーザーが読んで共有できるように ASRock マザーボード vt 有効化方法をまとめました。最初のステップは、画面が点灯した後、「F2」キーを押し続けて BIOS ページに入ります。起動速度が速すぎて BIOS に入ることができない場合はどうすればよいですか? 2 番目のステップは、メニューで VT オプションを見つけてオンにすることです。マザーボードのモデルによって BIOS インターフェイスと VT の名前が異なります。1. BIOS ページに入ったら、[詳細] - [CPU 構成 (CPU)] を見つけます。構成)」 - 「SVMMOD (仮想化テクノロジ)」オプションで、「無効」を「有効」に変更します。
よりスムーズなおすすめの Android エミュレータ (使用したい Android エミュレータを選択してください)
Apr 21, 2024 pm 06:01 PM
ユーザーにより良いゲーム体験と使用体験を提供できます Android エミュレータは、コンピュータ上で Android システムの実行をシミュレートできるソフトウェアです。市場にはさまざまな種類の Android エミュレータがあり、その品質も異なります。読者が自分に合ったエミュレータを選択できるように、この記事ではいくつかのスムーズで使いやすい Android エミュレータに焦点を当てます。 1. BlueStacks: 高速な実行速度 優れた実行速度とスムーズなユーザー エクスペリエンスを備えた BlueStacks は、人気のある Android エミュレーターです。ユーザーがさまざまなモバイル ゲームやアプリケーションをプレイできるようにし、非常に高いパフォーマンスでコンピュータ上で Android システムをシミュレートできます。 2. NoxPlayer: 複数のオープニングをサポートし、ゲームをより楽しくプレイできます。複数のエミュレーターで同時に異なるゲームを実行できます。
タブレットコンピュータにWindowsシステムをインストールする方法
May 03, 2024 pm 01:04 PM
BBK タブレットで Windows システムをフラッシュするにはどうすればよいですか? 最初の方法は、システムをハードディスクにインストールすることです。コンピュータ システムがクラッシュしない限り、システムに入ってダウンロードしたり、コンピュータのハード ドライブを使用してシステムをインストールしたりできます。方法は次のとおりです。 コンピュータの構成に応じて、WIN7 オペレーティング システムをインストールできます。 Xiaobaiのワンクリック再インストールシステムをvivopadにダウンロードしてインストールすることを選択します。まず、お使いのコンピュータに適したシステムバージョンを選択し、「このシステムをインストールする」をクリックして次のステップに進みます。次に、インストール リソースがダウンロードされるまで辛抱強く待ち、環境がデプロイされて再起動されるまで待ちます。 vivopad に win11 をインストールする手順は次のとおりです。まず、ソフトウェアを使用して win11 がインストールできるかどうかを確認します。システム検出に合格したら、システム設定を入力します。そこで「更新とセキュリティ」オプションを選択します。クリック
ライフ リスタート シミュレーター ガイド
May 07, 2024 pm 05:28 PM
Life Restart Simulator は非常に興味深いシミュレーション ゲームです。このゲームにはさまざまな方法があります。以下に、Life Restart Simulator の完全なガイドを示します。戦略はあるのか？ライフ リスタート シミュレーター ガイド ガイド ライフ リスタート シミュレーターの特徴 プレイヤーが自由な発想で遊べる、非常にクリエイティブなゲームです。毎日完了すべきタスクがたくさんあり、この仮想世界で新しい生活を楽しむことができます。ゲーム内にはたくさんの曲があり、さまざまな人生があなたを待っています。ライフ リスタート シミュレーター ゲーム内容 才能カード抽選: 才能: 不滅になるためには、神秘的な小箱を選択する必要があります。途中で死んでしまうことを避けるために、さまざまな小さなカプセルが用意されています。クトゥルフは選ぶかもしれない
Telnetコマンドを開く方法
Apr 17, 2024 am 04:48 AM
コマンド ラインまたは他のソフトウェア (PuTTY、Putty for Android、iTerm2 など) を使用して Telnet コマンドを開くことができます。コマンド ラインで「telnet」と入力し、Enter キーを押して開き、「telnet [ホスト名または IP アドレス] [ポート]」を使用してリモート デバイスに接続します。接続に成功すると、リモートのコマンド プロンプトが表示されます。デバイス。
pycharmをapkにパッケージ化する方法
Apr 18, 2024 am 05:57 AM
PyCharm を使用して Android アプリを APK としてパッケージ化するにはどうすればよいですか?プロジェクトが Android デバイスまたはエミュレータに接続されていることを確認してください。ビルド タイプを構成する: ビルド タイプを追加し、[署名された APK を生成する] にチェックを入れます。ビルド ツールバーの [APK のビルド] をクリックし、ビルド タイプを選択してビルドを開始します。
