Chip8Emulator

Devlog #015

Deployed!!

I deployed the calculator and pushed the README to the repository. Everything is great to work now!

Devlog #014 [EPILEPSY ALLERT - Chip 8 xor logic flickers the image blazzingly fast so it may cause some visual discomfort]

Sound implemented!

All the chip8 logic was ready but the sound was missing, so i took some time to think. I searched and found the MDN p[age about the browser audio api.

It is complicated, it is like an opengl with pipes but for sound processing. I created Also the classes name does not help
I read and found a liiitle solution tha isn’t ideal and wrapped it into a Speakers class.

But makes sense. That architecture allows complex audio processing and is useful at all. You create an oscilator node, makes it point to a gain node to change volume and then point the gain’s node output to the computer.

Devlog #013 [EPILEPSY ALERT - The video contains flickering images since CHIP 8 uses XOR sprite rendering]

FInnally bug corrected!!

I was having a strange bug with the CHIP 8 engine where the pong logic was inverted. I passed almost 40 minutes trying to rewrite the code to the canvas (since the VF register is used to descrive collisions). But the bug had nothing to deal with collisions, was a underflow flag that i inversed the logic without wanting.
I pasted some part of the code onto the AI to debug after that and after this it took me only 1 minute to fix it. I’m sad to break the streak of not using AI.

Devlog #012

Streched up the ROM cards and added this little about-me section. I also updated the Page’s title and i drawed this weird icon that someway feels off.

I plan to make the final adjustments like:

• Fix: Pong ROM not loading
• add: Sound implementation
• add: Some mobile support (The keys of the keyboard are not capable of handling multiple pressed strokes and that makes undefined behavior as the keyboard forget what key to clear)

Hope y’all are finding thiss new style a little better :)

Devlog #011

Sooo Now the project is getting a liiitle less weird

I added this white borders, refactored the file input style, added this ROMs section and all the components necessary to make this whole thing work.

I also added a raw coded console-printing of the ROM in base64 at the terminal for uploading this ROMs.

Some of them are actually weeird because the console of chip8 wasn’t created actually. Chip8 was never a reaaal console, it is more like an entire programming lang. So i tried my best making the keyboard, but some games were designed in another layouts.

I hope this retro-style looks great!!!

Devlog #010

FINNALLY A PRESENTABLE STYLE

It still ugly, but i refactored the fonts, the buttons and speccially the colors. I also added a reactivity-based system that tracks the current rom and display it’s names.

I also added the ROM template so the examples will be displayed soon.

My next steps is probably to organize some ready-to-use ROMS, a LocalStorage system to allow ROM uploading persistance, the sound system and some historical context of this virtual console

Devlog #009 [EPILEPSY ALERT - Since Chip 8 uses XOR rendering logic, the images are flickering]
Console remade!

I added some fonts and forked into this braanch for refactoring the visual components.

I moved a lot of components, and it stills ugly.

I reaally tryed to make height the same as width but i didn’t find in stack overflow or any website, and i didn’t wanted to use AI.

So i changed the screen size, the button, alll the keyboard was re-written and i thiink it will eventually be working fine in mobile screens.

Devlog #008
Speed and bug fix

I made the game repond faster by splitting it in 3 timers. I also added a clearInterval feat so the button “InitGame” doesn’t speed the game more and more.
I tried optimizing the canvas by only updating the changed pixels. Was a total failure. So i forget about it.

I also added keyboard mapping so clicking on the UI layer at the right isn’t needed.

I also corrected the bitshifiting bug thsat were buggin all the draw. The game is already playable!! :)

But this website is a crap of UI

Idk if i try to style it or use vuetify componnt lib.

Devlog #007

FINALLY IT WORKS

I had a lot of headache fixing bugs. The first one was a opcode that wasn’t being captured (0xF007, which gives the timer, so the game was being paused becs i wasn’t capturing it)

After, i realized none of the sprites were beign rendered correctly (as is seen at my previous devlogs). But debbugging on the browser i saw that the getAsset() function were returning the entire rom, not the sprites.

So i fixed it using a simple slice.

I don’t why, but everything seens to be rendering by inverse. Probably is some crazy bitshift that i made and need to fix. Also, the game runs at 60 fps, but that’s slow to the time. Only the timers shall run at 60 fps as i saw.

XD

Devlog #006
FINALLUYYSIJKURFHYIUADSHJIUFKLHJNDJLKOFH

After 5 hours of pure and incessive headaache,without any clue about why nothing was being rendered, i finally make up to render my first rom in chip8

That took me the most painful experience i’ve saw in my life. Not even kidding, Binary in JS is like harder than assembly.

After 2 hours i realized that trhe Mdn docs on my language was also not updated. So my file reader wasn’t even using promises. I realized only when i took the entire html to gemini and asked how i would figure it out without using AI?

I also used ai to help me debug because i was 4 hours without seeiing anything on the screen, is just like a blind pinata write a big switch in js

But i used AI only at the end, on the past 10 minutes. And none of any other code was written by ai. Every single opcode was weirtten by hand. I used to exactly: know about endianness (why in my machine the bytes were in x-order and in the file api of my btowser was in y order, detect rom loading bugs and for the text fonts. Only)

I am so stressed that neither the keyboard was done neither the loading window are styled.

Devlog #005

ROM loading added!

I added this raw-styled rom loader so the user can input their own files(none ready-to-use rom added yet). I’ll probably make fetch to a chip8 repo in github for that.

Handling with promises is always complicated, but i think the most difficult part is done./ I created a ROM Loader helper class that will Receive a FIle object, load inside it and will have methods stream-like (getByte) etc.

Devlog #004
Added The keyboard functionality!

Now the keyboard can listen to user input and only a key is pressed at a time. It does not handle mobile yet, so i’ll need to add this later.

I also had to handle with a hard time trying to style this keyboard.

Devlog #003
Canvas class finally added!

I spent a lot of time trying to undestand how the canvas API works on JS. So i scaffolded a wrapper class to make the code reusable. I tested and played around and everything seems to work.

I added a clear and a render method. Next step is to create the XOR logic that chip 8 have and start working on the Chip8 Engine class.

Devlog #002

FInaalllly i discovered why the canvas div was a little greater than expected. I raw-searched with google and found a rabbit hole but this Reddit post from 3 years ago saved me without recurring for AI.

I also added the keyboard. As there’s 16 buttons i didn’t harded coded it, i added a simple function (with on-mounted vue property) that creates and appends the buttons to the keyboard (used toString with radix 16 to display hex). None functionality added yet XD

Devlog #001

I’ve scaffolded this project! It is supposed to be a simple CHIP8 emulator with ready to play ROMS and custom ROM uploading.

So, i set all the vue boilerplate and configured vite. After i started workling on the window and it simply gave me a lot of headache because a margin collapse feature that happened to be on my browser.

I added the component in a reusable way and it is just this simple. I added some CSS Variables (to make dark themes after) and media queries so the main window scale propperly.

I spent more time that i wanted debuigging.