ホームページ >ウェブフロントエンド >jsチュートリアル >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 サイトの他の関連記事を参照してください。