Inspirations et techniques pour intégrateurs : Créer de l’interactivité sans Javascript #4

Troisième article de nos techniques pour intégrateursde mars centrés sur les créations sans Javascript. Au programme, les jeux !

La doctrine NoJS : Créer sans Javascript

Cet article est le dernier d'une série initiée avec l'article Inspirations et techniques pour intégrateurs : Créer de l'interactivité sans Javascript #1. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article.

Comme pour les deux séries précédentes, la compréhension de cette série d'articles vous demandera quelques connaissances préliminaires.

Pour commencer, il sera indispensable de bien comprendre comment cibler les éléments en fonction de leurs voisins (les selecteurs combinateurs) ainsi qu'en fonction de leurs etats (les pseudo-classes et les selecteurs d'attrubuts), car c'est le mécanisme principale que nous avons en CSS pour créer de la logique. L'article inspirations et techniques pour intégrateurs : Créer de l'interactivité sans Javascript #2 étant fait de deux exemples de ce principe, je recommande vraiment de le lire si ce n'est pas encore fait.

Enfin, sachez aussi que je ne vais pas retirer les préprocesseurs des exemples, et que très peu simplifier leurs usages, simplement documenter les choses qui sortent de l'ordinaire. Si vous n'êtes pas à jour sur ce sujet, je vous ai préparé deux petits articles pour vous simplifier le démarrage.

Petit guide d'utilisation des pré-processeurs CSS #1 Les bases

Petit guide d'utilisation des pré-processeurs CSS #2 Un peu d'algorithmique

Maintenant que tout est dit, commençons.

Maze par Marco Barría

Commençons par résoudre un gros manque de mon premier article présentant une liste d'exemple, avec un des moyens les plus simples de faire un jeu en CSS : jouer sur les hovers.

See the Pen MAZE – CSS game by Marco Barría (@fixcl) on CodePen.

Je vais complètement faire impasse sur le HTML cette fois-ci, je pense que vous avez tous compris le concept et si vous avez déjà lu les articles précédents de ce dossier, vous avez déjà les connaissances nécessaires pour vous en sortir seul. Du coup, passons tout de suite au CSS.

See the Pen MAZE – CSS game by Marco Barría (@fixcl) on CodePen.

La premiere partie interessante a voir dans ce CSS est a retrouver dans le bloc present de la ligne 53 a la ligne 59, que j'aurais personellement ecris de cette maniere : 

li:hover ~ .error, .error:hover{
    display:block;
}

Son rôle est très simple : au survol d'un li (donc d'un des murs du labyrinth, les rebords du labyrinthe sont tous des lis), le bloc .error passe d'un display: none a un display: block. Vu que ce dernier prend toute la place et est au-dessus du labyrinth, une fois affiche il le reste tant que la souris reste au-dessus de lui (et n'est donc pas sorti du labyrinthe).

La deuxième partie intéressante du CSS se retrouve à partir de la ligne 163, et représente l'animation des murs, pour ajouter un peu de challenge.

Cet exemple n'était pas présent dans la liste d'exemples à traiter, mais ce genre de fonctionnement par survol est vraiment très frequent sur Codepen (et dans les exemples de jeux en CSS de manière générale), donc je trouvais important d'en étudier au moins un.

Pure css game – maze v1.2 par Andrew Crook

Notre second exemple est un petit peu spécial dans le sens ou il fait planter le navigateur Google Chrome lors de son intégration à travers le module Codepen. Je ne l'intègre donc pas comme pour les autres pens, et vous encourage à cliquer sur l'image ci-dessous pour aller voir directement sur Codepen.

Commençons avec le HTML, qui présente un excellent exemple de comment utiliser un préprocesseur ou un moteur de template pour gagner en temps et en visibilité.

La première ligne est donc le "niveau" présent, et il suffit de changer cette ligne pour modifier totalement le layout du niveau.

Ensuite, vous trouverez deux boucles, la première permettant de créer les inputs qui permettront de contrôler le jeu, de manière exactement semblable a la technique présent la semaine dernière dans l'article de la semaine dernière (si vous ne l'avez pas lu, il vous attend ! Inspirations et techniques pour intégrateurs : Créer de l'interactivité sans Javascript #3 ).

La seconde boucle construit le niveau lui-meme, sous forme de nombreux labels contrôlant les inputs précédents.

Pour le CSS, la partie intéressante à retrouvé se trouve de la ligne 140 à la fin du fichier (ligne 1500 environ, donc c'est très long, oui).

Son rôle est simple : détecter si le personnage est présent sur la ligne ou la colonne de chaque label, pour les afficher si oui. Ce bloc aurait pu être bien plus simple et compréhensible avec un préprocesseur (et a certainement été fait avec un préprocesseur d'ailleurs, mais je n'ai pas réussi à en retrouver la source).

Pour information, cet exemple et tout simplement un des plus complexes que vous puissiez imaginer utilisant cette technique, si vous arrivez à le comprendre vous aurez tout compris ! 

Si vous avez quelques difficultés, je vous propose de retrouver la même technique utilisée dans un autre exemple, un puissance 4 fait par DEGRYSE Alexis (@twogrey), l'auteur de l'exemple de la semaine dernière. Son exemple est bien plus clair, concis et lisible, mais utilise un tout petit peu de Javascript (ce qui fait que ce ce n'est pas l'exemple étudié ici.dura lex sed lex)

—