怎样用JS编写模拟器
这次给大家带来怎样用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 ? '停止' : '播放'; if (!isPlay) chip8.speaker.stop(); else chip8.speaker.play(f.value);
}; </script></body></html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci 怎样用JS编写模拟器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1663
14
1420
52
1313
25
1266
29
1237
24
Pengenalan kepada cara menggunakan simulator joiplay
May 04, 2024 pm 06:40 PM
Simulator jojplay ialah simulator telefon mudah alih yang sangat mudah digunakan Ia menyokong permainan komputer untuk dijalankan pada telefon mudah alih dan mempunyai keserasian yang sangat baik Beberapa pemain tidak tahu cara menggunakannya . Cara menggunakan simulator joiplay 1. Mula-mula, anda perlu memuat turun pemalam Joiplay body dan RPGM Sebaik-baiknya pasangkannya mengikut urutan pemalam badan Pakej apk boleh didapati di bar Joiplay (klik untuk mendapatkan >>>). 2. Selepas Android selesai, anda boleh menambah permainan di sudut kiri bawah. 3. Isikan nama secara santai, dan tekan CHOOSE pada executablefile untuk memilih fail game.exe permainan. 4. Ikon boleh dibiarkan kosong atau anda boleh memilih gambar kegemaran anda.
Bagaimana untuk mendayakan vt pada papan induk MSI
May 01, 2024 am 09:28 AM
Bagaimana untuk mendayakan VT pada papan induk MSI? Apakah kaedahnya? Laman web ini telah menyusun kaedah pemboleh VT papan induk MSI dengan teliti untuk kebanyakan pengguna Selamat datang untuk membaca dan berkongsi! Langkah pertama ialah memulakan semula komputer dan masuk ke BIOS Apakah yang perlu saya lakukan jika kelajuan permulaan terlalu cepat dan saya tidak boleh memasuki BIOS? Selepas skrin menyala, teruskan menekan "Del" untuk memasuki halaman BIOS Langkah kedua ialah mencari pilihan VT dalam menu dan menghidupkannya Model komputer yang berbeza mempunyai antara muka BIOS yang berbeza dan nama yang berbeza untuk VT : 1. Enter Selepas memasuki halaman BIOS, cari pilihan "OC (atau overclocking)" - "CPU Features" - "SVMMode (atau Intel Virtualization Technology)" dan tukar pilihan "Disabled"
Bagaimana untuk mendayakan vt pada papan induk ASRock
May 01, 2024 am 08:49 AM
Bagaimana untuk membolehkan VT pada papan induk ASRock, apakah kaedah dan cara mengendalikannya. Laman web ini telah menyusun kaedah ASRock motherboard vt enable untuk pengguna membaca dan berkongsi! Langkah pertama adalah untuk memulakan semula komputer Selepas skrin menyala, teruskan menekan kekunci "F2" untuk memasuki halaman BIOS. Langkah kedua ialah mencari pilihan VT dalam menu dan menghidupkannya Model papan induk yang berbeza mempunyai antara muka BIOS yang berbeza dan nama yang berbeza untuk VT 1. Selepas memasuki halaman BIOS, cari "Advanced (Advanced)" - "CPU Configuration (CPU) Konfigurasi)" - pilihan "SVMMOD (teknologi penmayaran)", tukar "Dilumpuhkan" kepada "Didayakan"
Emulator Android disyorkan yang lebih lancar (pilih emulator Android yang anda mahu gunakan)
Apr 21, 2024 pm 06:01 PM
Ia boleh memberikan pengguna pengalaman permainan dan pengalaman penggunaan yang lebih baik Emulator Android ialah perisian yang boleh mensimulasikan perjalanan sistem Android pada komputer. Terdapat banyak jenis emulator Android di pasaran, dan kualitinya berbeza-beza, walau bagaimanapun. Untuk membantu pembaca memilih emulator yang paling sesuai untuk mereka, artikel ini akan memfokuskan pada beberapa emulator Android yang lancar dan mudah digunakan. 1. BlueStacks: Kelajuan larian yang pantas Dengan kelajuan larian yang sangat baik dan pengalaman pengguna yang lancar, BlueStacks ialah emulator Android yang popular. Membenarkan pengguna bermain pelbagai permainan dan aplikasi mudah alih, ia boleh mencontohi sistem Android pada komputer dengan prestasi yang sangat tinggi. 2. NoxPlayer: Menyokong berbilang bukaan, menjadikannya lebih menyeronokkan untuk bermain permainan Anda boleh menjalankan permainan yang berbeza dalam berbilang emulator pada masa yang sama
Bagaimana untuk memasang sistem Windows pada komputer tablet
May 03, 2024 pm 01:04 PM
Bagaimana untuk menyalakan sistem Windows pada tablet BBK Cara pertama ialah memasang sistem pada cakera keras. Selagi sistem komputer tidak ranap, anda boleh memasuki sistem, dan memuat turun perkara, anda boleh menggunakan cakera keras komputer untuk memasang sistem. Kaedahnya adalah seperti berikut: Bergantung pada konfigurasi komputer anda, anda boleh memasang sistem pengendalian WIN7. Kami memilih untuk memuat turun sistem pemasangan semula satu klik Xiaobai dalam vivopad untuk memasangnya Mula-mula, pilih versi sistem yang sesuai untuk komputer anda, dan klik "Pasang sistem ini" ke langkah seterusnya. Kemudian kami menunggu dengan sabar untuk sumber pemasangan dimuat turun, dan kemudian menunggu persekitaran digunakan dan dimulakan semula. Langkah-langkah untuk memasang win11 pada vivopad ialah: mula-mula gunakan perisian untuk menyemak sama ada win11 boleh dipasang. Selepas melepasi pengesanan sistem, masukkan tetapan sistem. Pilih pilihan Kemas Kini & Keselamatan di sana. klik
Pengenalan kepada kaedah tetapan fon simulator joiplay
May 09, 2024 am 08:31 AM
Simulator jojplay sebenarnya boleh menyesuaikan fon permainan, dan boleh menyelesaikan masalah kehilangan aksara dan aksara berkotak dalam teks Saya rasa ramai pemain masih tidak tahu cara mengendalikannya fon simulator jojplay. Cara menetapkan fon simulator joiplay 1. Mula-mula buka simulator joiplay, klik pada tetapan (tiga titik) di sudut kanan atas, dan cari. 2. Dalam lajur RPGMSettings, klik untuk memilih fon tersuai CustomFont dalam baris ketiga. 3. Pilih fail fon dan klik OK Berhati-hati untuk tidak mengklik ikon "Simpan" di sudut kanan bawah, jika tidak tetapan lalai akan dipulihkan. 4. Pengasas dan Quasi-Yuan aksara Cina ringkas disyorkan (sudah dalam folder permainan Fuxing dan Rebirth). joi
Bagaimana untuk membuka arahan telnet
Apr 17, 2024 am 04:48 AM
Anda boleh menggunakan baris arahan atau perisian lain (seperti PuTTY, Putty untuk Android, iTerm2) untuk membuka arahan Telnet. Dalam baris arahan, taip "telnet" dan tekan Enter untuk membuka, kemudian gunakan "telnet [nama hos atau alamat IP] [port]" untuk menyambung ke peranti jauh Selepas sambungan berjaya, anda boleh melihat gesaan arahan alat kawalan jauh peranti.
Bagaimana untuk memadam aplikasi simulator guruh dan kilat? -Bagaimana untuk memadam aplikasi dalam Simulator Thunderbolt?
May 08, 2024 pm 02:40 PM
Versi rasmi Thunderbolt Simulator ialah alat emulator Android yang sangat profesional. Jadi bagaimana untuk memadam aplikasi simulator guruh dan kilat? Bagaimana untuk memadam aplikasi dalam Simulator Thunderbolt? Biarkan editor memberi anda jawapan di bawah! Bagaimana untuk memadam aplikasi simulator guruh dan kilat? 1. Klik dan tahan ikon apl yang ingin anda padamkan. 2. Tunggu sebentar sehingga pilihan untuk menyahpasang atau memadam aplikasi muncul. 3. Seret apl ke pilihan nyahpasang. 4. Dalam tetingkap pengesahan yang muncul, klik OK untuk menyelesaikan pemadaman aplikasi.
