Porting Games to the Web with WebAssembly
How to port an Asteroids game from C to 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.
Why would you ever want to do that, you ask? One reason is portability: WebAssembly makes it easier to port existing games, desktop applications, and command-line tools to the web. Another reason is the potential for speeding up web apps by replacing slow JavaScript calculations with compiled WebAssembly.
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 \
--volume "$(pwd)":/src
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 529cad3Interestingly, if you try to compile this code as is to WebAssembly, your browser tab will crash because of the infinite loops in the code!
