I made a game in C run in a web browser and so can you Vitor Leal Follow Apr 23 · 6 min read

It is undoubtedly true that most of the web is powered by Javascript nowadays; however, recent technologies such as WebAssembly are to change this scene — or, perhaps, some of it, as for reasons that will be noted later. In this article I will be demonstrating how I ported the well-known Snake game built with only C and SDL to web browsers utilizing the aforementioned technology.

What is WebAssembly?

You have most likely heard of the Assembly language — a low-level language with a strong link to the machine code instructions — as this sort of old and cryptic programming language; in simple terms, WebAssembly is the same thing (though not exactly Assembly), but capable of running in most modern web browsers. One of the reasons it shines is the fact it is decoded and compiled to machine code, thus providing a way to run code on the web at near-native speed. Not only that, even though you could learn how to code WebAssembly by hand — which wouldn’t be efficient — , WebAssembly is rather used as a compilation target for low-level languages such as C, C++ and Rust; in Layman’s term, that means you can code in one of these languages, compile it to WebAssembly, and run it in the browser.

Although it is tempting to ditch Javascript — either because you hate it like I do or you want to see new technologies powering the web — and start using WebAssembly for all your web applications, it is important to note that WebAssembly is not a substitute for Javascript. Rather, you can think of JS and WASM as a couple, each taking care of specific parts of your web application. And no, WASM won’t replace Javascript in the near-future, and if it ever does, you will probably be retired by then. Therefore, when should we use WebAssembly? Per its official documentation:

CPU intensive tasks such as games with heavy assets, math calculations, image/video editing, etc.

Porting old other languages’ libraries and applications, thus providing portability and promoting cross-platform.

Live video augmentation, VR and augmented reality (due to its low-latency).

Or, in this case, porting a simple Snake game from C and SDL for the sake of it.

It is believed that the “script” in Javascript — which makes JS seem like a scripting language at first glance — will begin to be a reality with WASM doing the heavy-lifting and JS serving as a complement.

Porting our Snake game built with C and SDL to WebAssembly

Enough with introductions — let’s actually learn how to compile our Snake game to WebAssembly and deploy it on the web. Recall I said compile, therefore we will need another tool that helps us convert our C code to WASM; that is Emscripten, a toolchain that helps us compile C and C++ code into WebAssembly — in Layman’s term, if you ever coded in C or C++, you can think of it as a Clang or GCC that, instead of compiling to machine code, it compiles to WebAssembly. But… what about the SDL library? Lucky for us, since SDL is quite renowned in the game development industry, Emscripten supports it right off the bat.

Setting up Emscripten

First, let’s install the prerequisites.

Windows

You will need Python 2.7 or newer. You can easily download it through this page.

Mac

You will need XCode and its command line tools. Also, you will need to have Git and CMake installed.

Linux