La puissance du CSS avec The Mine : un jeu d’aventure sans la moindre ligne de JS

The Mine est la création de Jamie Coulter. Elle est tout simplement comme son nom l'indique un jeu d'aventure fait en CSS. 

Au programme tout ce que vous pouvez attendre d'un jeu d'aventure : un inventaire, des interactions avec le décors, de la dynamite et des caisses en bois. Et pas de JavaScript évidemment.

See the Pen The Mine: No JS, CSS only adventure game by Jamie Coulter (@jcoulterdesign) on CodePen.

Le secret ? Plein de checkboxs et de radio, ainsi qu'un judicieux usage des selecters CSS tels que ~ et +, qui permettent de savoir très précisément quels sont les checkboxs check et quels sont les checkboxs uncheck. En résulte un CSS d'une grande poésie et d'une lisibilité sans failles, comme vous pouvez le voir ci-dessous :

input#interactiveObject14:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + input + div + div + div > .game_segment:nth-of-type(47) .tiles .tile:nth-of-type(13) img {
  pointer-events: none;
}

Le plus impressionnant dans tout cela est que le SCSS permettant de créer ce pen n'est même pas particulièrement complexe à lire, il s'agit réellement d'un usage très ingénieux de ces techniques de bases et de beaucoup de boucles. 

Cela plus l'aspect particulièrement impressionnant du résultat fait de ce pen un cas vraiment indispensable à lire pour toute personne s'intéressant à l'interactivité CSS. D'ailleurs, il est à noter que les autres pen de l'auteur sont tout aussi impressionnants et intéressants.