Comment écrire un simulateur avec JS
Cette fois je vais vous montrer comment utiliser JS pour écrire un simulateur. Quelles sont les précautions pour écrire un simulateur en JS Voici un cas pratique, jetons un oeil.
0x00 Introduction à CHIP8
Nous pouvons apprendre du wiki CHIP8 que CHIP8 est un langage de programmation interprété. Sa première utilisation remonte au milieu des années 1970. Le programme CHIP8 s'exécute dans la machine virtuelle CHIP8 et son émergence a simplifié la programmation des jeux vidéo (par rapport à cette époque). Les jeux électroniques implémentés avec CHIP8 incluent Bee, Tetris, Pac-Man, etc. Vous pouvez en savoir plus sur le wiki de CHIP8.
0x01 Créer un objet CHIP8
Nous supposons que CHIP8 est composé d'un processeur, d'un clavier, d'un écran et d'un haut-parleur, où le CPU est le cœur de CHIP8, alors le code devrait être comme ceci :
<!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 Écriture d'un écran d'affichage simple
Selon le Wiki CHIP8, on peut apprendre que la résolution d'affichage du CHIP8 est de 64X32 pixels et est monochrome. Si un pixel vaut 1, le pixel correspondant sera affiché à l'écran, et s'il vaut 0, il ne sera pas affiché. Cependant, lorsqu'un certain pixel passe de la présence à l'absence, l'indicateur de retenue est défini sur 1, ce qui peut être utilisé pour la détection de collision.
Ensuite, le code devrait ressembler à ceci :
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];
}
};Après avoir écrit le module d'affichage, nous écrivons l'écran d'affichage pour tester le module d'affichage (voir le test d'écran en ligne) :
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 Écrivez l'orateur
Vous devez vous référer aux API Web ici :
API https://developer.mozilla.org/en-US/docs/Web/API/AudioContext API https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode
Exemple https://mdn.github.io/violent-theremin/
Exemple https://codepen.io/ gregh/pen/LxJEaj
Le haut-parleur est également très simple :
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;
}
}
};Après avoir écrit le haut-parleur, on peut tester le haut-parleur (voir le test du locuteur en ligne) :
<!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> Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !
Lecture connexe :
Explication détaillée des modèles de chaînes dans ES6
Explication détaillée de la portée et de la déclaration des variables dans ES6
Comment utiliser les outils plug-in pour convertir le code ES6 en ES5
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Introduction à l'utilisation du simulateur joiplay
May 04, 2024 pm 06:40 PM
Le simulateur jojplay est un simulateur de téléphone mobile très facile à utiliser. Il prend en charge les jeux informatiques et peut être exécuté sur les téléphones mobiles, et la compatibilité est très bonne. Certains joueurs ne savent pas comment l'utiliser. comment l'utiliser. Comment utiliser le simulateur joiplay 1. Tout d'abord, vous devez télécharger le plug-in Joiplay body et RPGM. Il est préférable de les installer dans l'ordre body - plug-in. Le package apk peut être obtenu dans la barre Joiplay (. cliquez pour obtenir >>>). 2. Une fois Android terminé, vous pouvez ajouter des jeux dans le coin inférieur gauche. 3. Remplissez le nom avec désinvolture et appuyez sur CHOISIR sur le fichier exécutable pour sélectionner le fichier game.exe du jeu. 4. L'icône peut rester vide ou vous pouvez choisir votre image préférée.
Comment activer Vt sur la carte mère MSI
May 01, 2024 am 09:28 AM
Comment activer VT sur la carte mère MSI ? Quelles sont les méthodes ? Ce site a soigneusement compilé les méthodes d'activation VT de la carte mère MSI pour la majorité des utilisateurs. Bienvenue à lire et à partager ! La première étape consiste à redémarrer l'ordinateur et à accéder au BIOS. Que dois-je faire si la vitesse de démarrage est trop rapide et que je ne parviens pas à accéder au BIOS ? Une fois l'écran allumé, continuez d'appuyer sur "Suppr" pour accéder à la page du BIOS. La deuxième étape consiste à rechercher l'option VT dans le menu et à l'activer. Différents modèles d'ordinateurs ont des interfaces BIOS différentes et des noms différents pour VT. : 1. Entrez Après être entré dans la page du BIOS, recherchez l'option "OC (ou overclocking)" - "Fonctionnalités du processeur" - "SVMMode (ou Intel Virtualization Technology)" et modifiez le "Désactivé"
Comment activer vt sur la carte mère ASRock
May 01, 2024 am 08:49 AM
Comment activer VT sur la carte mère ASRock, quelles sont les méthodes et comment le faire fonctionner. Ce site Web a compilé la méthode d'activation du vt de la carte mère ASRock que les utilisateurs peuvent lire et partager ! La première étape consiste à redémarrer l'ordinateur. Une fois l'écran allumé, continuez d'appuyer sur la touche « F2 » pour accéder à la page du BIOS. Que dois-je faire si la vitesse de démarrage est trop rapide et que je ne parviens pas à accéder au BIOS ? La deuxième étape consiste à rechercher l'option VT dans le menu et à l'activer. Différents modèles de cartes mères ont des interfaces BIOS différentes et des noms différents pour VT. 1. Après avoir accédé à la page BIOS, recherchez « Avancé (Avancé) » - « Configuration du processeur ». (CPU) Configuration)" - Option "SVMMOD (Virtualization Technology)", remplacez "Disabled" par "Enabled".
Émulateur Android recommandé et plus fluide (choisissez l'émulateur Android que vous souhaitez utiliser)
Apr 21, 2024 pm 06:01 PM
Il peut offrir aux utilisateurs une meilleure expérience de jeu et d'utilisation. Un émulateur Android est un logiciel qui peut simuler le fonctionnement du système Android sur un ordinateur. Il existe de nombreux types d’émulateurs Android sur le marché, mais leur qualité varie. Pour aider les lecteurs à choisir l'émulateur qui leur convient le mieux, cet article se concentrera sur certains émulateurs Android fluides et faciles à utiliser. 1. BlueStacks : Vitesse d’exécution rapide Avec une excellente vitesse d’exécution et une expérience utilisateur fluide, BlueStacks est un émulateur Android populaire. Permettant aux utilisateurs de jouer à une variété de jeux et d'applications mobiles, il peut simuler des systèmes Android sur des ordinateurs dotés de performances extrêmement élevées. 2. NoxPlayer : prend en charge plusieurs ouvertures, ce qui rend les jeux plus agréables. Vous pouvez exécuter différents jeux dans plusieurs émulateurs en même temps.
Comment installer le système Windows sur une tablette
May 03, 2024 pm 01:04 PM
Comment flasher le système Windows sur la tablette BBK ? La première façon est d'installer le système sur le disque dur. Tant que le système informatique ne tombe pas en panne, vous pouvez accéder au système et télécharger des éléments, vous pouvez utiliser le disque dur de l'ordinateur pour installer le système. La méthode est la suivante : Selon la configuration de votre ordinateur, vous pouvez installer le système d'exploitation WIN7. Nous choisissons de télécharger le système de réinstallation en un clic de Xiaobai dans vivopad pour l'installer. Tout d'abord, sélectionnez la version du système adaptée à votre ordinateur, puis cliquez sur « Installer ce système » pour passer à l'étape suivante. Nous attendons ensuite patiemment que les ressources d'installation soient téléchargées, puis attendons que l'environnement soit déployé et redémarré. Les étapes pour installer win11 sur vivopad sont les suivantes : utilisez d’abord le logiciel pour vérifier si win11 peut être installé. Après avoir réussi la détection du système, entrez les paramètres du système. Sélectionnez-y l’option Mise à jour et sécurité. Cliquez sur
Guide du simulateur de redémarrage de la vie
May 07, 2024 pm 05:28 PM
Life Restart Simulator est un jeu de simulation très intéressant. Ce jeu est devenu très populaire récemment. Il existe de nombreuses façons de jouer au jeu. Ci-dessous, l'éditeur vous propose un guide complet de Life Restart Simulator. les stratégies existent-elles ? Guide du Life Restart Simulator Guide Caractéristiques du Life Restart Simulator Il s'agit d'un jeu très créatif dans lequel les joueurs peuvent jouer selon leurs propres idées. Il y a de nombreuses tâches à accomplir chaque jour et vous pouvez profiter d'une nouvelle vie dans ce monde virtuel. Il y a de nombreuses chansons dans le jeu et toutes sortes de vies différentes vous attendent. Contenu du jeu Life Restart Simulator Cartes de dessin de talents : Talent : Vous devez choisir la mystérieuse petite boîte pour devenir un immortel. Une variété de petites capsules sont disponibles pour éviter de mourir à mi-chemin. Cthulhu peut choisir
Comment ouvrir la commande telnet
Apr 17, 2024 am 04:48 AM
Vous pouvez utiliser la ligne de commande ou un autre logiciel (tel que PuTTY, Putty pour Android, iTerm2) pour ouvrir la commande Telnet. Dans la ligne de commande, tapez « telnet » et appuyez sur Entrée pour ouvrir, puis utilisez « telnet [nom d'hôte ou adresse IP] [port] » pour vous connecter au périphérique distant. Après une connexion réussie, vous pouvez voir l'invite de commande de la télécommande. appareil.
Comment empaqueter Pycharm dans apk
Apr 18, 2024 am 05:57 AM
Comment packager une application Android sous forme d’APK à l’aide de PyCharm ? Assurez-vous que le projet est connecté à un appareil ou un émulateur Android. Configurer le type de build : ajoutez un type de build et cochez "Générer un APK signé". Cliquez sur « Construire l'APK » dans la barre d'outils de construction, sélectionnez votre type de construction et commencez à créer.
