Compiling gameloop.html

Now that we have written our code, we can go ahead and compile our game loop app. Before you run this command, I want to reiterate that you need to have downloaded the project from GitHub (https://github.com/PacktPublishing/Hands-On-Game-Development-with-WebAssembly) because you will need the PNG files located in the /Chapter06-game-loop/sprites folder in order to build this project.

Once you have your folders set up properly, compile the app with the following command:

emcc game_loop.c -o gameloop.html --preload-file sprites -s NO_EXIT_RUNTIME=1 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS=["png"] -s EXTRA_EXPORTED_RUNTIME_METHODS="['cwrap', 'ccall']" -s USE_SDL=2

Serve the directory where you compiled it with a web server, or build and run it with emrun, and it should look like this when loaded into a web browser:

After the app has compiled, you should be able to move the spaceship around the canvas using the arrow keys. Now that we have a basic game loop, in the next section, we will be adding some game objects to our app, making it more of a game.