怎樣用JS寫模擬器-js教程-PHP中文網

首頁

web前端

js教程

怎樣用JS寫模擬器

php中世界最好的语言

Mar 10, 2018 pm 03:29 PM

javascript模擬器編寫

這次帶給大家怎樣用JS寫模擬器，用JS寫模擬器的注意事項有哪些，下面就是實戰案例，一起來看一下。

0x00 CHIP8簡介

我們根據CHIP8的Wiki可以了解CHIP8是一種解釋性的程式語言。最初被應用是在1970年代中期。 CHIP8的程式運行在CHIP8虛擬機器中，它的出現讓電子遊戲程式設計變得簡單了（相對於那個年代來說）。用CHIP8實現的電子遊戲有，例如小蜜蜂，俄羅斯方塊，吃豆人等。更多可以前往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 APIs:

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中文網其它相關文章！

#相關閱讀：

ES6的字串模板詳解

ES6的變數的作用域與宣告詳解

怎麼利用外掛工具將ES6的程式碼轉換成ES5

以上是怎樣用JS寫模擬器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。