Le CSS est un langage permettant de mettre du style dans nos pages web. C’est grâce à lui qu’avec la Fredzone vous voyez la vie en rose, notamment. C’est donc ce langage qui permet également de positionner les éléments d’une page web, et donc en particulier de les centrer.
Mais ceux qui ont déjà touché au CSS vous le diront : centrer en CSS n’est pas toujours chose aisée, surtout si on parle d’alignement vertical. C’est un peu pour ça que Flexbox est arrivée, cette nouvelle spécification nous aidant à positionner et aligner proprement nos éléments en CSS. L’ennui, c’est que cette spécification vient avec pas mal de nouvelles propriétés et valeurs, et il n’est pas évident de tout retenir dès le début.
C’est pourquoi Channing Allen a décidé de créer Flexbox Defense, un jeu qui va vous apprendre à utiliser les propriétés liées à Flexbox.
Flexbox Defense, un jeu pour apprendre à utiliser Flexbox
Flexbox Defense se présente en deux parties. La partie de droite est le plateau de jeu. Il est constitué d’un chemin sur lequel vont circuler un certain nombre d’ennemis qui défilent les uns derrière les autres. Ils viennent tous de la même extrémité du chemin, et le but est de les empêcher d’atteindre l’autre bout.
Comment ? Grâce à des canons qui, dès qu’un ennemi se présente à leur portée, se mettent automatiquement à tirer dessus. Au bout d’un certain nombre de tirs, les ennemis sont abattus.
Le but du jeu est donc d’utiliser la partie gauche de l’interface de Flexbox Defense. Elle propose en fait de modifier le CSS lié aux canons et à leurs groupes. Ce qu’il vous reste à faire est plutôt simple à dire : vous devez utiliser les propriétés de Flexbox pour positionner vos canons de sorte à abattre tous les ennemis.
La difficulté est donc double. D’une part, il vous faut trouver la bonne position pour chaque canon. D’autre part, une fois cette position imaginée, il faut la réaliser avec les propriétés Flexbox, et ce n’est pas aussi facile que ça quand on n’a jamais vraiment touché à ces propriétés.
Heureusement, le jeu vous rappelle les propriétés et leurs valeurs, donc vous n’êtes pas seuls. La difficulté du jeu va en s’accroissant, avec de plus en plus de propriétés à utiliser, plus de canons, et aussi deux types de canons au bout d’un moment.
Pour le moment Flexbox Defense est composé de 12 niveaux. Si vous les parcourez tous du début à la fin, vous ne devriez pas avoir trop de mal (ce n’est pas vraiment le but) et, surtout, vous devriez mieux comprendre comment Flexbox fonctionne.
Bref, un bon jeu à essayer, que vous soyez développeur ou non. Après tout, ça peut aussi être une bonne entrée en matière dans le monde du CSS. On a vu plus simple comme débuts en CSS, mais au moins c’est ludique.
À vous de placer les canons aux bons endroits pour protéger le bout du chemin !