怎樣用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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7819

Java教學

1647

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

joiplay模擬器使用方法介紹 May 04, 2024 pm 06:40 PM

jojplay模擬器是一款非常好用的手機模擬器，它支援電腦遊戲可以在手機上運行，而且相容性非常好，有些玩家不知道怎麼使用，下面小編就為大家帶來了使用方法介紹。 joiplay模擬器怎麼使用1、首先需要下載Joiplay本體及RPGM插件，最好按本體-插件的順序進行安裝，apk包可在Joiplay吧取得（點擊取得>>>）。 2.安卓完成後，就可以在左下角加入遊戲了。 3.name隨便填，executablefile按CHOOSE選擇遊戲的game.exe檔。 4.Icon可以留空也可以選擇自己喜歡的圖片

微星(MSI)主機板vt開啟方法 May 01, 2024 am 09:28 AM

微星主機板怎麼開啟VT？有哪些方法？本站為廣大用戶精心整理了微星(MSI)主機板vt開啟方法供大家參看，歡迎閱讀分享！第一步、重新啟動電腦，進入BIOS，開啟速度太快無法進入BIOS怎麼辦？螢幕亮起後不斷按下「Del」進入BIOS頁面，第二步、在選單中找到VT選項並開啟，不同型號的電腦，BIOS介面不相同，VT的叫法也不相同情況一：1、進入BIOS頁面後，找到「OC（或叫overclocking）」－「CPU特徵」－「SVMMode（或叫Intel虛擬化技術）」選項，把「Disabled（禁止）

華擎(ASRock)主機板vt開啟方法 May 01, 2024 am 08:49 AM

華擎主機板怎麼開啟VT，有哪些方法，怎麼操作。本站為大家整理了華擎(ASRock)主機板vt開啟方法供使用者閱讀分享！第一步，重新啟動電腦，螢幕亮起後不斷按下「F2」鍵，進入BIOS頁面，開啟速度過快無法進入BIOS怎麼辦？第二步，在選單中找到VT選項並開啟，不同型號的主機板，BIOS介面不相同，VT的叫法也不相同1、進入BIOS頁面後，找到「Advanced（高級）」－「CPUConfiguration（CPU配置）”——“SVMMOD（虛擬化技術）”選項，把“Disabled”都修改為“Enabled

比較流暢的安卓模擬器推薦（選用的安卓模擬器） Apr 21, 2024 pm 06:01 PM

它能夠提供使用者更好的遊戲體驗和使用體驗，安卓模擬器是一種可以在電腦上模擬安卓系統運作的軟體。市面上的安卓模擬器種類繁多，品質參差不齊，然而。幫助讀者選擇最適合自己的模擬器、本文將重點放在一些流暢且好用的安卓模擬器。一、BlueStacks：運行速度快速具有出色的運行速度和流暢的用戶體驗、BlueStacks是一款備受歡迎的安卓模擬器。使用戶能夠暢玩各類行動遊戲和應用，它能夠在電腦上以極高的性能模擬安卓系統。二、NoxPlayer：支援多開，玩遊戲更爽可以同時在多個模擬器中運行不同的遊戲、它支援

平板電腦怎麼裝windows系統 May 03, 2024 pm 01:04 PM

步步高平板怎麼刷windows系統第一種是硬碟安裝系統。只要電腦系統沒有崩潰，能進入系統，並且能下載東西就可以使用電腦硬碟安裝系統。方法如下：依照你的電腦配置，完全可以裝WIN7的作業系統。我們選擇在vivopad中選擇下載小白一鍵重裝系統來安裝，先選擇好適合你電腦的系統版本，點選「安裝此系統」下一步。然後我們耐心等待安裝資源的下載，等待環境部署完畢重啟即可。 vivopad裝win11步驟是：先透過軟體偵測一下是否可以安裝win11。通過了系統檢測，進入系統設定。選擇其中的更新和安全選項。點選

joiplay模擬器字體設定方法介紹 May 09, 2024 am 08:31 AM

jojplay模擬器其實可以自訂遊戲字體的，而且可以解決文字出現缺字、方框字的問題，想必不少玩家還不知道怎麼操作，下面小編就為大家帶來了joiplay模擬器字體設定方法介紹。 joiplay模擬器字體怎麼設定1、先開啟joiplay模擬器，點選右上角的設定（三個點），找到。 2.在RPGMSettings一欄，第三行CustomFont自訂字體，點選選擇。 3.選擇字體文件，點擊ok就行了，注意不要按右下角「儲存」圖標，不然會原預設設定。 4.推薦方正準圓簡體（已在復興、重生遊戲資料夾內）。 joi

telnet指令怎麼打開 Apr 17, 2024 am 04:48 AM

您可以使用命令列或其他軟體（如PuTTY、Putty for Android、iTerm2）開啟Telnet命令。在命令列中，鍵入「telnet」並按Enter即可打開，然後使用「telnet [主機名稱或IP位址] [連接埠]」連接到遠端設備，成功連接後即可看到遠端設備的命令提示字元。

人生重開模擬器攻略大全 May 07, 2024 pm 05:28 PM

人生重開模擬器是一款非常有趣的模擬小遊戲，這款遊戲最近非常的火，遊戲中有很多的玩法，下面小編就大家帶來了人生重開模擬器攻略大全，快來看看都有哪些攻略吧。人生重開模擬器攻略大全人生重開模擬器特色這是一款非常有創意的遊戲，遊戲裡玩家可以依照自己的想法進行遊戲。每天都會有許多的任務可以完成，在這個虛擬的世界裡享受全新的人生。遊戲裡擁有許多的歌曲，各種不同的人生等著你來感受。人生重開模擬器遊戲內容天賦抽卡：天賦：必選神秘的小盒子，才能修仙子。各種各樣的小膠囊可選，避免中途死掉。克蘇魯選了可能會

See all articles

怎樣用JS寫模擬器

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題