for March, 2013

Space Invaders

Intel 8080 CPU emulation in JavaScript

Space InvadersThis week end, I wanted to try a real world project to play more with TypeScript. Why TypeScript? Because I wanted to leverage a few ES6 features but also type checking. Note that I did not use strong typing, but just relied on the inference of types provided by the TypeScript compiler.

A few years ago, I wrote an Intel 8080 CPU emulator in ActionScript 3 and thought this would be a great fit for a TypeScript exercise. For the context, the Intel 8080 is a 2Mhz 8bit CPU. Through an Uint8Array (typed array), we can read each instruction (byte per byte) coming from a ROM and fully emulate the CPU.

So which game could we run to test the CPU? The Intel 8080 CPU was used inside the famous Space Invaders arcade machine, so using the original Space Invaders ROM, we can emulate the whole arcade system entirely in JavaScript (CPU/RAM/Input/Screen). Check the different files on the github repo. The CPU is the most important part, but I recommend you guys checking the other pieces, really fun to see how things work and how hardware is emulated.

The tricky thing is that because of the lack of byte type (ActionScript 3 has the same limitation), CPU registers (which are originally 8-bit) use the Number type, which is 64-bit, so each register needs to be masked constantly (register & 0xFF) to avoid overflow.

Here is the game playable here. It runs nicely on most browsers on desktop, it even runs nicely on mobile, except on UIWebView based browsers, where the lack of jitting seriously impacts performance.

(Space Invaders art by Alfimov)

Posted on March 18, 2013 by Thibault Imbert · 1 comment Read More
JavaScript refresh

A JavaScript refresh


We will cover here some of the key concepts of JavaScript to get us started. If you have not checked JavaScript for the past few years or if you are new to JavaScript, I hope you find this useful.

We will start by covering the language basics like variables, functions, scope, and the different types, but we will not spend much time on the absolute basics like operators, or what is a function or a variable, you probably already know all that as a developer. We will discover JavaScript by going through simple examples and for each of these, highlight specific behaviors and approach the language from an interactive developer standpoint, coming from other technologies like Flash (ActionScript 3), Java, C# or simply native (C++).

Like other managed languages, JavaScript runs inside a JavaScript VM (Virtual Machine), one key difference to note is that unlike executing bytecode, JavaScript VMs are source based, translating JavaScript source code directly to native code by using what is called a JIT (Just in Time compiler) when available. The JIT performs optimization at runtime (just in time) to leverage platform specific optimizations depending on the architecture the code is being run on. Of course, most browsers available today run JavaScript, the list below highlights the most popular JavaScript VMs today in the industry:

JavaScript can provide some serious advantages over low-level languages like automatic memory allocation and collection through garbage collectors. This, however comes at the cost of speed. But managed languages provides so much value in terms of productivity and platform reach that developers today tend to favor them over low-level languages, despite the loss of performance because of the higher cost for those languages when it comes to targeting multiple platforms.

Posted on March 16, 2013 by Thibault Imbert · 31 comments Read More