Porting Games to the Web with WebAssembly
WebAssembly is a new language for the web. Much like low-level assembly languages, however, very few people write WebAssembly by hand; instead, you can compile code written in other languages (e.g. C, C++ and Rust) to WebAssembly and run that code in the browser.
In this article, we’ll focus on how to port an open-source clone of the classic Asteroids game from C to WebAssembly.
For a preview of the final result, check out this live demo.
Let’s get started!
To compile this game, we’ll use Emscripten, a tool that helps you compile C and C++ programs to WebAssembly. As we’ll see, developing in WebAssembly is not easy, but Emscripten provides many tools and features that make it much easier.
To install Emscripten, you can pull this Docker image I put together that contains all the tools you’ll need for this article (you can also install Emscripten from scratch, but that may take a while):
# Fetch docker image containing Emscripten
$ docker pull robertaboukhalil/emsdk:1.38.26# Create a container from that image and
# mount ~/wasm to /src inside the container
$ mkdir ~/wasm
$ cd ~/wasm
$ docker run -dt -name wasm \
robertaboukhalil/emsdk:1.38.26# Enter the container
$ docker exec -it wasm bash
Inside the container, let’s clone the repo. We’ll check out a specific commit ID, in case the code changes after this article is published:
$ git clone "https://github.com/flightcrank/asteroids.git"
$ cd asteroids
$ git checkout 529cad3
Interestingly, if you try to compile this code as is to WebAssembly, your browser tab will crash because of the infinite loops in the code!