怎样用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中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7748

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

显示更多

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

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

人生重开模拟器是一款非常有意思的模拟小游戏，这款游戏最近非常的火，游戏中有很多的玩法，下面小编就大家带来了人生重开模拟器攻略大全，快来看看都有哪些攻略吧。人生重开模拟器攻略大全人生重开模拟器特色这是一款非常有创造力的游戏，游戏里玩家可以根据自己的想法进行游戏。每天都会有许多的任务可以去完成，在这个虚拟的世界里享受全新的人生。游戏里拥有许多的歌曲，各种各样不一样的人生等候你来感受。人生重开模拟器游戏内容天赋抽卡：天赋：必选神秘的小盒子，才能修仙。各种各样的小胶囊可选，避免中途死掉。克苏鲁选了可能会

雷电模拟器怎么删除应用？-雷电模拟器删除应用的方法？ May 08, 2024 pm 02:40 PM

雷电模拟器版本官方版是一款相当专业的安卓模拟器工具。那么雷电模拟器怎么删除应用？雷电模拟器删除应用的方法？下面就让小编给大家解答下吧!雷电模拟器怎么删除应用？1、点击并长按你想要删除的应用图标。2、等待一段时间，直到出现卸载或删除应用的选项。3、将应用拖到卸载选项处。4、在弹出的确认窗口中，点击确定就可以完成应用的删除。

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版

热门话题