uriel avalos

Video game landing page (aka what's a comic book?)

Recently, after purchasing some classic comic books (some vintage Avenger's comics), I got nostalgic and was inspired to redo this website to look like a comic book. But when I showed off the POC to my six-year old, they basically said, "What's a comic book, dad?"

😭

That's when I realized that the modern equivalent is the video game, and so drumroll...the landing page is now a mini-browser game. To clarify, comic books are a thing of the past post 2022 😱

Note: The video game is enabled only on desktop for reasons mentioned below.

Enter the Quintus

  • Quintus is an old library for browser video games.
  • It's main selling point is that it's under 64k. So it's perfect for a landing page. (Compare this to modern dynamic content libraries, like PixiJS or PhaserJS, that are huge).
  • Game levels are just ascii files.
// actual level

   22                                               11
   1                22                              11
   1   22         2 11  22              2           11
   11        222  1 112                 1  2        11
   111       111  1 111222  222  2   2  1  1  2     11
   11111111                             1  1  1 2   11
   11111111                             1  1  1    211
   11111111                             1  1  1   2211
   11111111    222                   2           21111
   111111112222111222222222222222222212222222222211111
   111111111111111111111111111111111111111111111111111
   111111111111111111111111111111111111111111111111111
   111111111111111111111111111111111111111111111111111
   111111111111111111111111111111111111111111111111111
   111111111111111111111111111111111111111111111111111

The Future

In case you haven't noticed, the game has many "quirks". As I'm writing this, I'm realizing that Quintus is no longer production ready. Here are the limitations:

  • The project is currently dead. This is important because...
  • The mobile version is broken.
  • Quintus completely takes over the page. For example, "find" stops working while the game is running.
  • It implements it's own UI using Canvas primitives. These not only look bad but they don't work with the landing page (the position absolute breaks it 🤷).
  • It doesn't use ES6 modules. That means it's likely larger than necessary because it doesn't tree shake.
  • It implements lodash helpers that are unnecessary in a modern browser environment. Again, this adds unnecessary bloat.
  • It implements it's own asset loader. In a modern environment, you can just use dynamic imports to load assets.
  • It has insufficient unit tests.
  • It's not typed.
  • There's tons of code that is either broken or never worked properly.

So in the future, I'll likely fix Quintus so that ordinary HTML elements can be used as the game UI. This has an added bonus of fixing the mobile version. Oh then I'll make the fork public.