Build a Chip-8 Emulator in JavaScript that runs on a browser

Build a Chip-8 Emulator in JavaScript that runs on a browser

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6h 48m | 3.38 GB

The ultimate project to have on your Portfolio, dominate an interview having talking about your amazing Chip-8 Emulator

Did you ever wonder how video games work? What goes inside that little box when you press the power button? How do that tiny silicon chips talk with each other to create the amazing graphics we see on the screen and respond to each press we make on the controllers?

If you want to not only have a complete understanding of how the microprocessor talks to the memory, display, keyboard, and sound card, but also what happens inside with all the registers, so that is the course for you.

In this advanced course, you will learn how to create your very own emulator for the Chip-8 in the JavaScript that runs in any browser, so you can add it to your portfolio page and mesmerize job interviews with all your new knowledge.

The Chip-8 is a virtual machine from the mid-1970s designed to make game development easier. There are a number of classic video games ported to CHIP-8, such as Pong, Space Invaders, Tetris, and Pac-Man. There are also applications like a random maze generator and Conway’s Game of Life.

This course is ideal for anyone who has programming experience and always dreamed of creating their own emulator one day, or would love to create an emulator but just does not know where to start. Even someone who has attempted to create an emulator in the past and fail can greatly benefit from this course.

In this course, we will create new classes in JavaScript for each piece of hardware, to emulate the memory, the display, the sound card, and the keyboard, after that, we will jump into the so expect Chip-8, we will first implement its registers and then we will implement each of its 35 opcodes

After you complete this course you will have a fully functioning Chip-8 emulator that is capable to run hundreds of rooms available freely on the internet.

What you’ll learn

  • How a emulator works and how to create one
  • How microprocessor works and how to emulate them
  • Understand how machines work
  • Understand how devices talk wich it other
  • How to emulate actual hardware such as memory, display, microprocessor, sound card and keyboard
Table of Contents

Understanding what is Chip-8
1 Understand what Chip-8 is and the challenges we will face

Starting our journey creating our Chip-8 microprocessor
2 Creating our Chip-8 virtual microprocessor

Creating our Chip-8 Display
3 Creating our Display

Creating the support code (Webpack) and servers (Live Server)
4 Setting up Webpack so we can use modern JavScript on the Browser
5 Creating a webserver to serve our Chip-8 emulator

Connecting the Display to the HTML and Scaling up the resolution
6 Connecting the display to the HTML
7 Creating a multiplier to make our Display larger
8 Creating our screen and our screen buffer
9 Drawing our Frame Buffer on the screen

Creating our Chip-8 Memory
10 Creating our memory

Creating our Chip-8 Registers
11 Creating the Registers
12 Adding and removing values from Stack using Push and Pop
13 Checking for Stack Overflow and Stack Underflow errors

Creating our Chip-8 Keyboard
14 Creating our Chip-8 Keyboard
15 Mapping the Keyboard
16 Using the mapping in our Virtual Keyboard
17 Creating all the keyboard functions
18 Detecting and storing key presses

Create our Chip-8 charset sprites from 0-F and loading into memory
19 Creating the Chip-8 charset
20 Loading character set to Chip-8 memory

Drawing sprites in the display
21 Drawing a character on the display
22 Understanding the Pixel Position and writing on the screen

Implement our Chip-8 Delay Timer
23 Implement the Delay Timer for Chip-8

Implement our Chip-8 Sound Timer
24 Creating our Chip-8 Sound Card
25 Fixing our Sound Card and making it beep
26 Implement the sound on the main loop

Understanding Binary Files
27 Running our Binary code manually

Creating a Dissembler for Chip-8
28 Creating our Disassembler and our first Chip-8 Instruction CLR

Creating our Chip-8 Instruction Set file
29 Creating a new simple Chip-8 instruction RET
30 Implement Chip-8 Jump (JP) and creating arguments
31 Returning the argument nnn from Jump (JP)
32 Implementing the Chip-8 Call instruction
33 Adding the Skip VX NN on the instruction set and shifting bits
34 Refactoring our code to make easier to understand and continue
35 Adding another Chip-8 instruction Skip next instruction – SNE VX KK
36 Adding Chip-8 instruction LD VX KK
37 Adding Chip-8 Instruction Add VX KK
38 Adding Chip-8 Instruction Set VX VY
39 Adding the Chip-8 instructions OR, AND, XOR, ADD, SUB, SHR, SUBN, SHL
40 Testing the Chip-8 instructions OR, AND, XOR, ADD, SUB, SHR, SUBN, SHL
41 Adding the Chip-8 instructions SNE, SET JUMP and Random
42 Adding the Chip-8 instructions Draw DRW and introducing the nibble
43 Adding the Chip-8 instructions Skip if key pressed (SKP)
44 Adding the Chip-8 instructions Set Delay Timer, Set Sound Timer, and more
45 Testing the Chip-8 instructions Set Delay Timer, Set Sound Timer and more

Loading the Chip-8 ROM into the Chip-8 Memory
46 Loading our first ROM into Chip-8 memory

Understanding opCode. How Chip8 stores the data Big Endian vs Little Endian
47 Understand the opcode structure
48 Getting the Opcode from the Chip-8 Memory

Disassembling the opCodes and sending to Chip-8 for execution
49 Disassembling our opcode to get the Chip-8 Instruction

Implementing all 35 Chip-8 Instructions
50 Implementing Chip-8 instruction CLS
51 Implementing Chip-8 instruction RET
52 Implementing Chip-8 instruction Jump to Address
53 Implementing Chip-8 instruction Call to Address (CALL)
54 Implementing Chip-8 instruction Skip if equals (SE VX KK)
55 Implementing Chip-8 instruction Skip if different (SNE VX KK)
56 Implementing Chip-8 instruction Skip if registers are equal (SE VX VY)
57 Implementing Chip-8 instruction Set registers (LD VX NN)
58 Implementing Chip-8 instruction Add (ADD VX KK)
59 Implementing Chip-8 instruction Load registers (LD VX VY)
60 Implementing Chip-8 instruction OR (OR VX VY)
61 Implementing Chip-8 instruction AND (AND VX VY)
62 Implementing Chip-8 instruction Exclusive OR XOR (XOR VX VY)
63 Implementing Chip-8 ADD with Carry (ADD VX VY with C)
64 Implementing Chip-8 SUB with not Borrow (SUB VX VY)
65 Implementing Chip-8 Shift bits to Right (SHR VX)
66 Implementing Chip-8 SUBN with not Borrow (SUBN VX VY)
67 Implementing Chip-8 Shift bits to Left (SHL VX)
68 Implementing Chip-8 Skip (SNE VX VY)
69 Implementing Chip-8 Load I (LD NNN)
70 Implementing Chip-8 Jump (JP V0 NNN)
71 Implementing Chip-8 Ramdon (RND VX NN)
72 Implementing Chip-8 Drawing (DRW VX VY nibble)
73 Debugging our display problem
74 Wrapping around the display Horizontal and Vertical (just like Pac-Man)
75 Creating and testing a collision on the Display
76 Implementing Chip-8 Skip is Key Pressed (SKP VX)
77 Implementing Chip-8 Skip is Key is not Pressed (SKNP VX)
78 Implementing Chip-8 Set from Delay Timer (LD VX DT)
79 Implementing Chip-8 Wait for a Key(LD VX DT0)
80 Implementing Chip-8 Wait for a Key(LD VX K)
81 Implementing Chip-8 Set Delay Timer(LD DT VX)
82 Implementing Chip-8 Set Sound Timer(LD ST VX)
83 Implementing Chip-8 Add I(ADD I VX)
84 Implementing Chip-8 Set I to a Sprite (LD I VX)
85 Implementing Chip-8 Store BCD (Binary Coded Decimal) (LD B VX)
86 Implementing Chip-8 Store V0-VX (LD B VX)
87 Implementing Chip-8 Read V0-VX (LD VX I)

Cleaning up the code before starting the fun
88 1
Running the opcodesl

Exercices
Checking your knowledge on bitwise operator symbols
Checking your knowledge on bitwise operator

Coding Exercises
Checking your knowledge on bitwise operator in Code (AND)
Checking your knowledge on bitwise operator in Code (XOR)
Checking your knowledge on bitwise operator in Code

Final Challenge
Embed the Chip-8 emulator you created on your own portfolio page

Final test
89 Chip-8 hardware and instructions