JS로 시뮬레이터를 작성하는 방법-JS 튜토리얼-php.cn

JS로 시뮬레이터를 작성하는 방법

php中世界最好的语言

풀어 주다： 2018-03-10 15:29:15

원래의

3939명이 탐색했습니다.

이번에는 JS를 사용하여 시뮬레이터를 작성하는 방법과 JS에서 시뮬레이터를 작성할 때 어떤 노트를 사용해야 하는지 보여드리겠습니다. 다음은 실제 사례입니다.

0x00 CHIP8 소개

CHIP8 Wiki에서 CHIP8이 해석된 프로그래밍 언어라는 것을 알 수 있습니다. 1970년대 중반에 처음 사용됐다. CHIP8 프로그램은 CHIP8 가상 머신에서 실행되며, 그 출현으로 인해 비디오 게임 프로그래밍이 그 시대에 비해 더 단순해졌습니다. CHIP8로 구현된 전자 게임에는 Bee, Tetris, Pac-Man 등이 있습니다. CHIP8의 위키에 대해 더 자세히 알아볼 수 있습니다.

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 스피커 작성

을 참조해야 합니다. 여기에 웹 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의 다른 관련 기사에 주목하세요. 중국사이트!