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

Aujourd'hui le BlogDuWebdesign vous propose de découvrir une des réalisations CSS et HTML les plus impressionnantes qu'il m'ai été donné de voir : The Mine

The Mine: No JS, CSS only adventure game

The Mine est la création de Jamie Coulter, alias @jcoulterdesign (sur Twitter @jamiecoulter89), et est tout simplement comme son nom l'indique un jeu d'aventure fait en CSS. Et quand je dis en CSS, je veux dire SEULEMENT en CSS, pas la moindre ligne de JS dans ce pen.

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

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

Le secret ? Plein de checkboxes 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 checkboxes check et quels sont les checkbox 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 ou plein de hack incompréhensible, il sagit 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'interessant à l'interactivité CSS. D'ailleurs, il est à noter que les autres pen de l'auteur sont tout aussi impressionnant et intéressant, donc si vous ne savez pas quoi faire de votre prochaine pause, je vous conseille vraiment d'aller vous y perdre !