« Alea jacta est » veut dire en latin ; « le sort en est jeté« , ou autrement dit, « les dés sont jetés » ! En entendant cette expression, je me suis dit, pourquoi pas coder un petit jeu de dé qui fonctionnerait ainsi : au clic sur un bouton, un dé affichant un chiffre de 1 à 6 s’affiche. C’est parti !
Passons directement au code :
See the Pen Lancement de dé ! by Merlin (@lintermediaire) on CodePen.
Comme vous pouvez le voir, réaliser un jet de dé ne prend pas beaucoup de lignes de code.
C’est en fait assez facile. Au chargement de la page ou au clic sur un bouton, j’appelle une fonction qui affiche un des 6 dés codés au préalable en HTML & CSS. Cet affichage doit par contre se faire au hasard.
Pour cela, j’utilise la fonction mathématique Math.random (vous vous souvenez ?), combiné à la fonction Math.floor. Cette dernière est plus qu’utile puisqu’elle permet d’arrondir les valeurs de 1 à 6 à l’unité, soit d’enlever tous les chiffres à virgules compris entre 1 à 6 pour donner comme résultat un entier. La fonction Math.random est un peu spéciale, puisque vous devez multiplier le chiffre à mélanger pour obtenir le résultat. Et puis après ; Alea jacta est ! Le Dieu du hasard s’occupe du reste.
Et après ?
Par la suite, je réalise une condition. Si mon chiffre au hasard est égale à l’index de l’élément HTML, alors, je l’affiche. L’index de l’élément HTML c’est en quelque sorte l’ordre dans lequel l’élément en question se positionne dans l’architecture (le DOM) de l’HTML. Ici, le dé 1 arrive en première position, le dé 2 en deuxième etc. Je cible ces éléments grâce à la classe « .de », mentionné dans l’HTML. Pour en connaître l’index, j’utilise la fonction jQuery « each« , afin de réaliser la condition sur chaque élément. Mais j’aurais pu utiliser la fonction « eq() », ou même cibler l’élément HTML avec Javascript avec les pseudo-classes. Différentes méthodes étaient donc possibles, comme toujours dans ce milieu !
Coté CSS
Côté CSS, j’ai tenté de coder 6 dés différents le plus efficacement possible. Pour ce faire, j’ai utilisé les flex-boxes. Je ne sais pas encore si c’était la meilleure solution, mais je suis une fois de plus étonné de l’efficacité de cette méthode de positionnement.
Voilà, c’était tout pour aujourd’hui !
