Consignes - Jeu du 27

Pour cet exercice, vous devez compléter un jeu de cartes déjà entamé. Le joueur doit piger 3 cartes dans le but d’obtenir un pointage supérieur à celui du casino. Cependant attention, il ne faut pas dépasser 27.

Aperçu du résultat 👇

Matériels Pen de départ Couleurs 🎨

Gris pâle	#f5f5f5
Cuivré	#AC9494
Noir fumée	#2B2A2F

Requis CSS Le fond du site doit être gris pâle. Le jeu (game) doit-être centré verticalement ↕️ et horizontalement ↔️ dans la page (via la technique flexbox). Le titre "Jeu du 27" doit avoir une taille de 36px, être en gras, en majuscule, être centré et utiliser la couleur cuivrée. Les règles (rules) doivent-être de couleur cuivré, avoir une marge intérieure de 5px verticalement et de 10px horizontalement, en plus d'avoir un espace uniforme (égale) entre elles (flexbox). Le bouton "Commencez" doit-être centré horizontalement ↔️ (via flexbox), avoir une couleur de fond noir fumée, une couleur de texte cuivrée, une taille de 16px, être en majuscule, ne pas avoir de bordure, avoir des coins arrondis de 8px et une marge intérieure de 6px verticalement et 8px horizontalement. Au survol, la couleur de fond du bouton "Commencez" devrait devenir complètement noir. Requis JavaScript Stockez tous les éléments qui contiennent la classe .card dans une variable. Bouclez ensuite sur chacun de ces éléments et attribuez-leur la classe .noX où X représente un nombre de 1 à 3 basé sur l'index courant de la boucle. Ceci devrait faire apparaitre l'as (1), le 2 et le 3 de carreau ♦️. Faites en sorte que votre boucle s'exécute que lorsque le bouton "Commencez" est cliqué. Plutôt que de vous baser directement sur l'index d'itération de la boucle afin d'afficher les cartes, utilisez les valeurs dans le tableau existant cardsValues afin d'afficher les 3 premières valeurs de ce tableau (donc 13, 12 et 11). Suite à quoi, vous devriez voir le roi, la reine et le valet de carreau ♦️ affichés à l'écran. Afin de ne pas toujours afficher les mêmes 3 cartes, vous devez mélanger de façon aléatoire l'ordre des cartes du tableau cardsValues en utilisant adéquatement l'objet Array. Puisque les 3 premières cartes du tableau varient, vous devriez maintenant avoir des cartes aléatoires au clic du bouton "Commencez".
Assurez-vous qu'à chaque fois que le bouton "Commencez" est cliqué, que chaque carte ne contienne que les classes "card" et son numéro (noX) et non plusieurs numéros de carte, sinon l'affichage de la carte pourrait être erroné.
🚫 div class="card no3 no6 no4" Lorsque le bouton "Commencez" est cliqué, créez-vous une variable correspondant au pointage du joueur, soit 0 par défaut. Ajoutez la valeur de chaque carte tirée par le joueur à ce pointage et faites un console log de cette variable. Le nombre obtenu devrait correspondre à la somme des trois cartes affichées (bref additionnez les trois valeurs aux index 0, 1 et 2 du tableau cardsValues). Toujours lorsque le bouton "Commencez" est cliqué, créez-vous une variable correspondant au pointage du casino, soit 0 par défaut. Additionnez la valeur des trois cartes suivantes dans cardsValues (bref, additionnez les trois valeurs placées aux positions 3, 4 et 5 du tableau cardsValues). Si le joueur dépasse 27pts, remplacez le texte du message "Jeu du 27" par "X vous dépassez, le casino gagne". Si le casino dépasse 27pts, affichez le message "Le casino dépasse, vous gagnez". (Dans la phrase précédente, X doit être le score du joueur). Si le joueur et le casino ne dépassent pas, comparer leurs pointages. En cas d'égalité, remplacez le message par "Égalité! X à Y". Si le joueur a le plus haut pointage, affichez le message: "Vous avez gagné X à Y", dans le cas inverse: "Vous avez perdu X à Y". (Dans les phrases précédentes, X doit être le score du joueur et Y par le score du casino). Notes de cours 📚