Chipvuelto8/index.html

62 lines
1.3 KiB
HTML
Raw Normal View History

2024-09-01 15:52:46 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chip 8 emulator Test</title>
<style>
body {
background-color: #000;
2024-09-02 21:20:00 +01:00
color: #EEE;
}
#emulator-screen{
border: 1px solid pink;
2024-09-01 15:52:46 +01:00
}
</style>
2024-09-02 21:20:00 +01:00
<script src="./dist/revuelto8ts.js"></script>
2024-09-01 15:52:46 +01:00
</head>
<body>
2024-09-02 21:20:00 +01:00
<h1>Chip 8 emulator</h1>
<!-- Original screen is 64x32 -->
2024-09-04 20:38:54 +01:00
<canvas id="emulator-screen" width="512" height="256"></canvas>
2024-09-02 21:20:00 +01:00
<script>
const emulator = new Revuelto8ts.Chip8Emulator();
2024-09-04 20:38:54 +01:00
let fullDirRoms = [
'./roms/1-chip8-logo.ch8',
'./roms/2-ibm-logo.ch8',
'./roms/3-corax+.ch8',
'./roms/4-flags.ch8',
'./roms/5-quirks.ch8',
'./roms/6-keypad.ch8',
'./roms/7-beep.ch8',
'./roms/8-scrolling.ch8',
'./roms/Maze[David Winter, 199x].ch8',
];
// Load ROM
fetch(fullDirRoms[3])
2024-09-02 21:20:00 +01:00
.then(response => response.arrayBuffer())
2024-09-04 20:38:54 +01:00
.then(arrayBufferRom => {
let romData = new Uint8Array(arrayBufferRom);
emulator.loadRom(romData);
2024-09-01 15:52:46 +01:00
});
2024-09-02 21:20:00 +01:00
const emulatorCanvas = document.getElementById('emulator-screen');
2024-09-04 20:38:54 +01:00
setInterval(function() {
if(emulator.isRomLoaded()) {
//console.log(emulator.getCPUStatus());
emulator.emulateCycle();
emulator.drawToCanvas(emulatorCanvas, 8);
}
}, 5);
2024-09-02 21:20:00 +01:00
</script>
2024-09-01 15:52:46 +01:00
</body>
</html>