이번에는 JS를 사용하여 시뮬레이터를 작성하는 방법과 JS에서 시뮬레이터를 작성할 때 어떤 노트를 사용해야 하는지 보여드리겠습니다. 다음은 실제 사례입니다.
0x00 CHIP8 소개
CHIP8 Wiki에서 CHIP8이 해석된 프로그래밍 언어라는 것을 알 수 있습니다. 1970년대 중반에 처음 사용됐다. CHIP8 프로그램은 CHIP8 가상 머신에서 실행되며, 그 출현으로 인해 비디오 게임 프로그래밍이 그 시대에 비해 더 단순해졌습니다. CHIP8로 구현된 전자 게임에는 Bee, Tetris, Pac-Man 등이 있습니다. CHIP8의 위키에 대해 더 자세히 알아볼 수 있습니다.
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 스피커 작성
을 참조해야 합니다. 여기에 웹 API가 있습니다:
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의 다른 관련 기사에 주목하세요. 중국사이트!
관련 읽기:
플러그인 도구를 사용하여 ES6 코드를 ES5로 변환하는 방법
위 내용은 JS로 시뮬레이터를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
