Compiling collider.html

The command we use to compile our collider.html file is similar to our compile command in the last chapter. We will need to add a new collider.cpp file into the command line, but other than that it should be the same. Here is the command you use to compile collider.html:

em++ main.cpp collider.cpp ship.cpp enemy_ship.cpp player_ship.cpp projectile.cpp projectile_pool.cpp -std=c++17 --preload-file sprites -s USE_WEBGL2=1 -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS=["png"] -o collider.html

Now that we have collider.html compiled, we can serve it from our web server of choice, or run it with emrun, and load it into a web browser. Here is what it looks like:

_{The enemy spaceship explodes when hit by a projectile}

Please remember that you must run WebAssembly apps using a web server, or with emrun. If you would like to run your WebAssembly app using emrun, you must compile it with the --emrun flag. The web browser requires a web server to stream the WebAssembly module. If you attempt to open an HTML page that uses WebAssembly in a browser directly from your hard drive, that WebAssembly module will not load.

I did not take a screenshot of the entire browser as I have in previous screenshots of the game because I wanted to zoom in on the player ship destroying the enemy ship. As you can see, we now have colliders that can detect when a projectile collides with a spaceship and can destroy that spaceship when the collision happens by running an explosion animation.