Dieses Mal zeige ich Ihnen, wie Sie einen Simulator mit JS schreiben und welche Vorsichtsmaßnahmen beim Schreiben eines Simulators mit JS gelten. Hier ist ein praktischer Fall, schauen wir uns das an.
0x00 Einführung in CHIP8
Aus dem CHIP8-Wiki können wir lernen, dass CHIP8 eine interpretierte Programmiersprache ist. Der erste Einsatz erfolgte Mitte der 1970er Jahre. Das CHIP8-Programm läuft in der virtuellen CHIP8-Maschine und seine Entstehung hat die Programmierung von Videospielen einfacher gemacht (im Vergleich zu damals). Zu den mit CHIP8 implementierten elektronischen Spielen gehören Bee, Tetris, Pac-Man usw. Weitere Informationen finden Sie im Wiki von CHIP8.
0x01 CHIP8-Objekt erstellen
Wir gehen davon aus, dass CHIP8 aus Prozessor, Tastatur, Display und Lautsprecher besteht und die CPU der Kern von CHIP8 ist, dann sollte der Code so aussehen:
<!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 Schreiben eines einfachen Anzeigebildschirms
Laut dem CHIP8-Wiki können wir erfahren, dass die CHIP8-Anzeigeauflösung 64 x 32 Pixel beträgt und monochrom ist. Wenn ein Pixel 1 ist, wird das entsprechende Pixel auf dem Bildschirm angezeigt, und wenn es 0 ist, wird es nicht angezeigt. Wenn jedoch ein bestimmtes Pixel von Anwesenheit zu Abwesenheit wechselt, wird das Übertragsflag auf 1 gesetzt, was zur Kollisionserkennung verwendet werden kann.
Dann sollte der Code so aussehen:
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];
}
};Nachdem wir das Anzeigemodul geschrieben haben, schreiben wir den Anzeigebildschirm, um das Anzeigemodul zu testen (sehen Sie sich den Bildschirmtest online an):
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 Schreiben Sie den Sprecher
Sie müssen hier auf Web-APIs verweisen:
API https://developer.mozilla.org/en-US/docs/Web/API/AudioContext API https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode
Beispiel https://mdn.github.io/violent-theremin/
Beispiel https://codepen.io/ gregh/pen/LxJEaj
Der Sprecher ist auch sehr einfach:
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;
}
}
};Nachdem wir den Sprecher geschrieben haben, können wir den Sprecher testen (Ansicht der Sprechertest online):
<!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 ? '停止' : '播放'; if (!isPlay) chip8.speaker.stop(); else chip8.speaker.play(f.value);
}; </script></body></html> Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Detaillierte Erläuterung der String-Vorlagen in ES6
Detaillierte Erläuterung des Umfangs und der Deklaration von Variablen in ES6
So verwenden Sie Plug-in-Tools, um ES6-Code in ES5 zu konvertieren
Das obige ist der detaillierte Inhalt vonWie schreibe ich einen Simulator mit JS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
