Introduction

Requis

1. Commencez par vous créer une classe JavaScript intitulée Game.

2. Créez-vous ensuite une variable nommée game et stockez-y une nouvelle instance de votre classe.
   
   Attention à la casse. La classe doit avoir un "G" majuscule et la variable un "g" minuscule.

3. Créez-vous différentes propriétés dans le constructeur de votre classe:

   • round et score: ayant tous deux la valeur initiale 0.

   • Ainsi que des propriétés permettant de faire référence aux éléments HTML ayant les classes .dog, .round-value et .score-value.

4. Créez-vous une méthode intitulée newRound. Dans cette méthode, augmentez la valeur de la propriété round de 1 et remplacer le texte dans l'élément .round-value par la nouvelle valeur de la propriété round.
   
   Si votre méthode est bien implémentée, vous devriez être en mesure de l'appeler dans la console CodePen via la commande game.newRound(). Le tout devrait mettre à jour le nombre de rondes affichées dans le jeu.

5. Créez-vous une méthode intitulée updateScore. Dans cette méthode, augmentez la valeur de la propriété score de 100 et remplacer le texte dans l'élément .score-value par la nouvelle valeur de score.
   
   Si votre méthode est bien implémentée, vous devriez être en mesure de l'appeler dans la console CodePen via la commande game.updateScore(). Le tout devrait mettre à jour le pointage affiché dans le jeu

6. Créez-vous une nouvelle méthode intitulée success. À l'intérieur de celle-ci, créez-vous une animation GSAP utilisant une timeline afin d'animer le chien 🐕. Ce dernier a été déplacé vers le bas d'une hauteur équivalente à lui-même afin de le cacher derrière les herbes. Faite le remonter en une demi-seconde à sa position normale sur les Y. Attendez 1 seconde complète et faite le redescendre à sa position initiale afin de le cacher à nouveau. Ceci devrait permettre de voir le chien apparaitre avec un canard 🦆 à la main, prendre une légère pause et disparaitre à nouveau.
   Testez via la console CodePen que vous êtes en mesure d'appeler cette méthode et de déclencher votre animation.

7. Lorsque l'animation du chien est terminée, appelez-les méthodes updateScore et newRound. Ainsi, dorénavant lorsque vous appellerez la méthode success, celle-ci devrait déclencher l'animation du chien, mais aussi incrémenter le nombre de rondes et le pointage du jeu.

8. Créez-vous une nouvelle méthode intitulée fail. À l'intérieur de celle-ci, ajoutez la classe .laughing au chien 🐕 et créez-vous une animation GSAP utilisant une timeline afin d'animer ce dernier. Comme dans l'animation de l'étape success, faites remonter le chien, prenez une pause d'une seconde et faites-le redescendre. L'ajout de la classe .laughing fera en sorte que le chien se moquera du joueur plutôt que de tenir un canard à la main.
   Testez via la console CodePen que vous êtes en mesure d'appeler cette méthode et de déclencher votre animation.

9. Lorsque l'animation du chien est terminée dans la méthode fail, retirez la classe laughing au chien et appelez la méthode newRound.
   
   Puisque l'usager a échoué sa mission et que le chien se moque de lui, nous n'augmentons pas son pointage contrairement à la méthode success.

10. Appelez-la méthode newRound à partir de votre constructeur de sorte qu'une première ronde soit déclenchée au chargement de la page.

Bonus

Vous avez fini rapidement? Pourquoi ne pas en profitez pour bonifier votre jeu!

Voici trois effets sonores à ajouter 🔊:

1. Lorsque la méthode success est appelée, déclenchez le son de réussite:

2. Lorsque la méthode fail est appelée, déclenchez le rire du chien.

3. Finalement, écoutez le clic sur l'élément .game. À chaque fois que l'usager clique sur cet élément, déclenchez un effet sonore de fusil 🔫.