GithubHelp home page GithubHelp logo

kastorcode / chip-8-emulator-typescript Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 107 KB

CHIP-8 emulator that runs on a browser developed with TypeScript

Home Page: https://kastorcode.github.io/chip-8-emulator-typescript

JavaScript 70.95% HTML 6.26% TypeScript 20.49% CSS 2.30%
binary brazilian browser ch8 chip-8 chip8 code emulator engineering hexadecimal

chip-8-emulator-typescript's Introduction

CHIP-8 Emulator TypeScript

👷 Developed by Matheus Ramalho de Oliveira
🔨 Brazilian Software Engineer
🏡 Goiânia, Goiás, Brasil
✉️ [email protected]
👍 instagram.com/kastorcode


This software runs programs written for the CHIP-8 computing architecture directly in the browser. This is the first emulator I program to improve my software engineering skills.

Architected and programmed during the Build a Chip-8 Emulator in JavaScript that runs on a browser course.


Screenshots


Controls

|1|2|3|C| = |1|2|3|4|
|4|5|6|D| = |Q|W|E|R|
|7|8|9|E| = |A|S|D|F|
|A|0|B|F| = |Z|X|C|V|

ArrowLeft | Numpad4 = scroll to canvas
ArrowRight | Numpad6 = pause and scroll to rom info
Backspace | Escape = stop
Enter | Space = toggle pause
Numpad0 | Numpad5 = full screen


Tools used

Chip-8 Technical Reference
Git
TypeScript
Visual Studio Code
Webpack


Topics covered

  1. Understanding what is Chip-8;
  2. Creating our Chip-8 virtual microprocessor;
  3. Creating our Display;
  4. Creating the support code and live server;
  5. Connecting the Display to the HTML and scaling up the resolution;
  6. Creating our Memory;
  7. Creating the Registers;
  8. Creating the Keyboard;
  9. Create our char set sprites from 0-F and load into memory;
  10. Drawing sprites in the display;
  11. Implement Delay Timer;
  12. Implement Sound Timer;
  13. Understanding binary files;
  14. Creating our Disassembler and our first Chip-8 instruction CLR;
  15. Creating our instruction set file;
  16. Loading our first ROM into Chip-8 memory;
  17. Understanding opcode, how Chip-8 stores data, Big Endian vs Little Endian;
  18. Disassembling opcodes and sending for execution;
  19. Implementing all 35 Chip-8 instructions.

8️⃣ Installation and execution

  1. Make a clone of this repository;
  2. Open the project folder in a terminal;
  3. Run yarn to install dependencies;
  4. Run yarn build to start Webpack module bundler;
  5. Launch one live server to serve the app and open it in a browser.

<kastor.code/>

chip-8-emulator-typescript's People

Contributors

kastorcode avatar

Stargazers

 avatar

Watchers

 avatar

chip-8-emulator-typescript's Issues

Some glitches in some ROMs

In Airplane.ch8 ROM, the first gameplay is normal:

ss0

But in the second, we have some glitches on the canvas:

ss1


The Addition Problems [Paul C. Moews].ch8 ROM does not work appositely:

ss2


Why? How to solve this?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.