Pour cet exercice nous allons créer un générateur d’extra-terrestres inspiré d’un des jeux les plus célèbres et influents de l’histoire, l’archétype du shoot them up: Space Invaders 👾.
Le but de cet exercice est de créer des invaders qui partageront les mêmes caractéristiques de base, mais qui auront de légères variations (forme et couleur) en fonction de l'objet JavaScript qui leur sera passé.
Requis
Créez-vous une nouvelle classe JavaScript intitulée Invader.
Écoutez le clic sur les boutons. Au clic, créez une nouvelle instance de la classe Invader et passez au constructeur l'objet correspondant dans le array invadersList. Par exemple, le premier bouton devrait passer le premier objet, le deuxième bouton, le deuxième objet et ainsi de suite.
Dans votre constructeur, sauvegardez dans une propriété l'objet reçu en paramètre afin de pouvoir y accéder plus tard.
Pigez une couleur parmi les couleurs fournies dans l'objet et sauvegardez-la.
Créez un div et attribuez-lui les classes .invader pour lui attribuer les styles communs à tous les invaders, ainsi que la classe .invader-X où X correspond au type dans l'objet reçu.
Ajoutez la couleur sauvegardée comme couleur de fond du div, ainsi l'espace transparent dans l'image prendra la couleur en question.
Faites en sorte d'ajouter la classe .exploded aux invaders lorsqu'ils se font cliquer dessus. Ceci déclenchera une animation d'explosion déjà réalisée pour vous en CSS.