The tips behind the 'Mutant HTML Invasion”
On October 17, I hosted a workshop at devFest Nantes entitled “The Invasion of Mutant HTML”.
A workshop must by definition involve the participants, I chose to create a mini-game as support. It's a static site available online, open-sourced on GitHub — so you can improve it!
When I say static, I mean static: the repository has a single dependency, server, responsible for providing a basic HTTP server for working locally and server itself has no dependencies. The rest is just HTML, CSS and JavaScript.
It allowed me to get back to basics and considerably gain efficiency; but above all… discover a whole bunch of tips and tricks!
Game mechanics
When you start the game, you will start by customizing your character. The sole objective of this step is to discover the visual structure of a level, allowing you to get personally involved in the game. The chosen values will be applied as soon as possible to all the characters in the game, in a sort of mirror representation .
After choosing your character, a training level familiarizes you with the very simple mechanics of the game: a portion of code to complete and submit, executed live, which affects the area gradually invaded by mutants! This code is in most levels the options passed to a mutationObserver, but sometimes also in the callback function.
In case of failure or success, a modal window will inform you. Let’s talk about this modal window!
The particularities of
I talked about it in 2022 at Paris Web then at devFest Nantes in my topic “Discover “good HTML” and save JS and CSS”, the