这次给大家带来怎样用js编写模拟器，用js编写模拟器的注意事项有哪些，下面就是实战案例，一起来看一下。
0x00 CHIP8简介
我们根据CHIP8的Wiki可以了解到CHIP8是一种解释性的编程语言。最初被应用是在1970年代中期。CHIP8的程序运行在CHIP8虚拟机中，它的出现让电子游戏编程变得简单些了（相对于那个年代来说）。用CHIP8实现的电子游戏有，比如小蜜蜂，俄罗斯方块，吃豆人等。更多可以前往CHIP8的Wiki了解。
0x01 创建CHIP8对象
我们假设CHIP8是由处理器、键盘、显示屏与扬声器组成，其中CPU是CHIP8核心，那么代码应该像这样的:
创建Chip8对象
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/
里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。
示例 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;
}
}
};编写好扬声器我们可以对扬声器进行测试(在线查看扬声器测试):
编写扬声器
频率：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
