How to go about building a browser-based minigame

I am enamored with the latest XKCD, where you can fly a rocket ship around a tiny universe filled with interesting planets: xkcd: Gravity

Now, being a total rube when it comes to web technologies, could someone help me understand roughly what kind of technologies/acronyms I would need to learn in order to build something similar? Using Erlang in the backend as much as possible.

2 Likes

The rocket minigame is a lot of fun. Took me a bit to realize it was keyboard based. The initial screen could be mistaken for a picture lol!

Unfortunately, this game as it has been designed is perfect for client side only implementation. Which means you are only using erlang to serve the html and js files. Even that could be accomplished with just Github Pages or any other static site. You can do all the animations with canvas in JS, Canvas tutorial - Web APIs | MDN.

Now where you could make erlang helpful is if you wanted to save user state like a score into a database. Thus showing the high score etc. This is assuming no authentication or authorization.
Cowboy user guide is a good place to start with getting a web app running.

You’ll want to use cowboy to make a json api for saving a score, and getting top scores.

The routes being something like this:
POST /score
GET /scores

Use thoas for decoding json requests and encoding json responses.
Use fetch in the browser to do the api calls.

When it comes to storage you could just use DETS, which is persistent ETS. I think this is okay, but I would personally choose sqlite instead.

https://ninenines.eu/docs/en/cowboy/2.9/guide/

I’ve been working on a few libraries to make this a bit easier, you can try to search for some of my previous posts tagged with Libraries.

I would start with the JS animation first, and see if you want to expand from there.

3 Likes

Thank you so much, exactly the sort of answer I was hoping for! :smiley:

2 Likes