ホームページ > 記事 > ウェブフロントエンド > JSでシミュレータを書く方法

JSでシミュレータを書く方法

php中世界最好的语言オリジナル: 2018-03-10 15:29:153900ブラウズ

今回は、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 ? &#39;停止&#39; : &#39;播放&#39;;            if (!isPlay) chip8.speaker.stop();            else chip8.speaker.play(f.value);
        };    </script></body></html>

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php の他の関連記事に注目してください。中国語のサイトです！