Wie schreibe ich einen Simulator mit JS?
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1662
14
1418
52
1311
25
1261
29
1234
24
Einführung in die Verwendung des Joiplay-Simulators
May 04, 2024 pm 06:40 PM
Der Jojplay-Simulator ist ein sehr einfach zu bedienender Mobiltelefonsimulator. Er unterstützt Computerspiele und kann auf Mobiltelefonen ausgeführt werden. Einige Spieler wissen nicht, wie man ihn verwendet wie man es benutzt. So verwenden Sie den Joiplay-Simulator 1. Zuerst müssen Sie den Joiplay-Body und das RPGM-Plug-in herunterladen. Am besten installieren Sie sie in der Reihenfolge Body – Plug-in. Das APK-Paket erhalten Sie in der Joiplay-Leiste. Klicken Sie hier, um >>> zu erhalten. 2. Nachdem Android fertig ist, können Sie in der unteren linken Ecke Spiele hinzufügen. 3. Geben Sie den Namen nach und nach ein und drücken Sie bei der ausführbaren Datei auf „Auswählen“, um die Datei „game.exe“ des Spiels auszuwählen. 4. Das Symbol kann leer bleiben oder Sie können Ihr Lieblingsbild auswählen.
So aktivieren Sie VT auf dem MSI-Motherboard
May 01, 2024 am 09:28 AM
Wie aktiviere ich VT auf einem MSI-Motherboard? Welche Methoden gibt es? Diese Seite hat die MSI-Motherboard-VT-Aktivierungsmethoden für die Mehrheit der Benutzer sorgfältig zusammengestellt. Willkommen zum Lesen und Teilen! Der erste Schritt besteht darin, den Computer neu zu starten und das BIOS aufzurufen. Was soll ich tun, wenn die Startgeschwindigkeit zu hoch ist und ich das BIOS nicht aufrufen kann? Nachdem der Bildschirm aufleuchtet, drücken Sie weiter „Entf“, um die BIOS-Seite aufzurufen. Der zweite Schritt besteht darin, die VT-Option im Menü zu finden und zu aktivieren. Verschiedene Computermodelle haben unterschiedliche BIOS-Schnittstellen und unterschiedliche Namen für VT : 1. Geben Sie ein. Nachdem Sie die BIOS-Seite aufgerufen haben, suchen Sie die Option „OC (oder Übertaktung)“ – „CPU-Funktionen“ – „SVMMode (oder Intel Virtualization Technology)“ und ändern Sie die Option „Deaktiviert“.
So aktivieren Sie VT auf dem ASRock-Motherboard
May 01, 2024 am 08:49 AM
Wie aktiviert man VT auf dem ASRock-Motherboard, welche Methoden gibt es und wie wird es bedient? Diese Website hat die ASRock-Motherboard-VT-Aktivierungsmethode zusammengestellt, damit Benutzer sie lesen und teilen können! Der erste Schritt besteht darin, den Computer neu zu starten. Drücken Sie weiterhin die Taste „F2“, um die BIOS-Seite aufzurufen. Was soll ich tun, wenn die Startgeschwindigkeit zu hoch ist und ich das BIOS nicht aufrufen kann? Der zweite Schritt besteht darin, die VT-Option im Menü zu finden und zu aktivieren. Verschiedene Motherboard-Modelle haben unterschiedliche BIOS-Schnittstellen und unterschiedliche Namen für VT 1. Suchen Sie nach dem Aufrufen der BIOS-Seite nach „Erweitert“ – „CPU-Konfiguration“. (CPU-Konfiguration)“ – Option „SVMMOD (Virtualisierungstechnologie)“, ändern Sie „Deaktiviert“ in „Aktiviert“.
Empfohlener Android-Emulator, der flüssiger ist (wählen Sie den Android-Emulator, den Sie verwenden möchten)
Apr 21, 2024 pm 06:01 PM
Es kann Benutzern ein besseres Spiel- und Nutzungserlebnis bieten. Ein Android-Emulator ist eine Software, die die Ausführung des Android-Systems auf einem Computer simulieren kann. Es gibt viele Arten von Android-Emulatoren auf dem Markt, deren Qualität jedoch unterschiedlich ist. Um den Lesern bei der Auswahl des für sie am besten geeigneten Emulators zu helfen, konzentriert sich dieser Artikel auf einige reibungslose und benutzerfreundliche Android-Emulatoren. 1. BlueStacks: Hohe Laufgeschwindigkeit und ein reibungsloses Benutzererlebnis. BlueStacks ist ein beliebter Android-Emulator. Es ermöglicht Benutzern das Spielen einer Vielzahl mobiler Spiele und Anwendungen und kann Android-Systeme auf Computern mit extrem hoher Leistung simulieren. 2. NoxPlayer: Unterstützt mehrere Eröffnungen und macht das Spielen angenehmer. Sie können verschiedene Spiele in mehreren Emulatoren gleichzeitig ausführen
So installieren Sie das Windows-System auf einem Tablet-Computer
May 03, 2024 pm 01:04 PM
Wie flasht man das Windows-System auf einem BBK-Tablet? Die erste Möglichkeit besteht darin, das System auf der Festplatte zu installieren. Solange das Computersystem nicht abstürzt, können Sie das System betreten und Dinge herunterladen. Sie können die Festplatte des Computers verwenden, um das System zu installieren. Die Methode ist wie folgt: Abhängig von Ihrer Computerkonfiguration können Sie das Betriebssystem WIN7 installieren. Wir haben uns entschieden, das Ein-Klick-Neuinstallationssystem von Xiaobai in vivopad herunterzuladen, um es zu installieren. Wählen Sie zunächst die für Ihren Computer geeignete Systemversion aus und klicken Sie auf „Dieses System installieren“, um zum nächsten Schritt zu gelangen. Dann warten wir geduldig darauf, dass die Installationsressourcen heruntergeladen werden, und warten dann darauf, dass die Umgebung bereitgestellt und neu gestartet wird. Die Schritte zum Installieren von Win11 auf dem Vivopad sind: Überprüfen Sie zunächst mithilfe der Software, ob Win11 installiert werden kann. Geben Sie nach bestandener Systemerkennung die Systemeinstellungen ein. Wählen Sie dort die Option Update & Sicherheit. Klicken
Einführung in die Schriftarteinstellungsmethode des Joiplay-Simulators
May 09, 2024 am 08:31 AM
Der Jojplay-Simulator kann die Schriftarten des Spiels tatsächlich anpassen und das Problem fehlender Zeichen und umrahmter Zeichen im Text lösen. Ich vermute, dass viele Spieler immer noch nicht wissen, wie man ihn bedient Schriftart des Jojplay-Simulators vorstellen. So legen Sie die Schriftart des Joiplay-Simulators fest: 1. Öffnen Sie zunächst den Joiplay-Simulator, klicken Sie auf die Einstellungen (drei Punkte) in der oberen rechten Ecke und suchen Sie ihn. 2. Klicken Sie in der Spalte „RPGMSettings“ auf die benutzerdefinierte Schriftart „CustomFont“ in der dritten Zeile, um sie auszuwählen. 3. Wählen Sie die Schriftartdatei aus und klicken Sie auf „OK“. Klicken Sie nicht auf das Symbol „Speichern“ in der unteren rechten Ecke, da sonst die Standardeinstellungen wiederhergestellt werden. 4. Empfehlen Sie Founder und Quasi-Yuan Simplified Chinese (bereits in den Ordnern der Spiele Fuxing und Rebirth). joi
So öffnen Sie den Telnet-Befehl
Apr 17, 2024 am 04:48 AM
Sie können die Befehlszeile oder eine andere Software (z. B. PuTTY, Putty für Android, iTerm2) verwenden, um den Telnet-Befehl zu öffnen. Geben Sie in der Befehlszeile „telnet“ ein und drücken Sie zum Öffnen die Eingabetaste. Verwenden Sie dann „telnet [Hostname oder IP-Adresse] [Port]“, um eine Verbindung zum Remote-Gerät herzustellen. Nach einer erfolgreichen Verbindung wird die Eingabeaufforderung des Remote-Geräts angezeigt Gerät.
Wie lösche ich die Donner- und Blitzsimulatoranwendung? -Wie lösche ich Anwendungen im Thunderbolt Simulator?
May 08, 2024 pm 02:40 PM
Die offizielle Version von Thunderbolt Simulator ist ein sehr professionelles Android-Emulator-Tool. Wie lösche ich also die Donner- und Blitzsimulatoranwendung? Wie lösche ich Anwendungen im Thunderbolt Simulator? Lassen Sie sich vom Herausgeber unten die Antwort geben! Wie lösche ich die Donner- und Blitz-Simulator-Anwendung? 1. Klicken und halten Sie das Symbol der App, die Sie löschen möchten. 2. Warten Sie eine Weile, bis die Option zum Deinstallieren oder Löschen der App angezeigt wird. 3. Ziehen Sie die App auf die Deinstallationsoption. 4. Klicken Sie im daraufhin angezeigten Bestätigungsfenster auf OK, um den Löschvorgang der Anwendung abzuschließen.
