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衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7722
15
1642
14
1396
52
1289
25
1233
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 がインストールできるかどうかを確認します。システム検出に合格したら、システム設定を入力します。そこで「更新とセキュリティ」オプションを選択します。クリック
joiplayシミュレーターのフォント設定方法の紹介
May 09, 2024 am 08:31 AM
jojplay シミュレーターは実際にゲームのフォントをカスタマイズすることができ、テキスト内の文字抜けや囲み文字の問題を解決できます。おそらく、多くのプレイヤーは操作方法を知らないと思います。次のエディターは、その設定方法を提供します。 jojplayシミュレータのフォントを紹介します。 joiplay シミュレーターのフォントを設定する方法 1. まず、joiplay シミュレーターを開き、右上隅にある設定 (3 つの点) をクリックして見つけます。 2. [RPGMSettings] 列で、3 行目の CustomFont カスタム フォントをクリックして選択します。 3. フォント ファイルを選択し、[OK] をクリックします。右下隅の [保存] アイコンをクリックしないように注意してください。クリックしないと、デフォルト設定が復元されます。 4. 創始者および準元の簡体字中国語文字が推奨されます (ゲーム Fuxing および Rebirth のフォルダにすでに入っています)。攘夷
ライフ リスタート シミュレーター ガイド
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 アドレス] [ポート]」を使用してリモート デバイスに接続します。接続に成功すると、リモートのコマンド プロンプトが表示されます。デバイス。
