Amusons-nous avec Javascript !

 

Plus que manipuler le DOM, nous allons ici jouer avec :

• ➡️ Les sélecteurs
• ➡️Les fonctions
• ➡️Les boucles (forEach et while)
• ➡️Les variables et mettre à jour l'affichage
• ➡️Les écouteurs d'évènements
• ➡️Les ajouts/retraits d eclasses CSS

 

Projet fini sur CodePen ICI

 

 

Vidéo 1

(optionnelle : mise en place html/css)

 

 

 

Vidéo 2

Mise en place du Javascript et du prompt  (choix des personnages)

 

 

 

Vidéo 3

Les sélecteurs pour repérer notre HTML dans notre JS 

 

 

Vidéo 4

La logique du jeu

 

En résumé, nous avons vu (en plus du projet précédent) :

 

Un écouteur d'évènement :

atkJoueur1.addEventListener("click", () => {
  fight(player_1, player_2);
  toggleBtn();
});

Ici, au "click" sur le bouton atkJoueur1, nous déclenchons un évènement.
Dans notre cas, nous lançons 2 fonctions.

 

La commande prompt pour "discuter" avec notre programme :

const response = prompt(
      text +
        " quel personnage souhaites-tu choisir ?
           \n1 - Sauron\n2 - Elliot\n3 - Dudulle\n4 - Kikiksan\n5 - Legolas"
    );

Nous indiquons quel peronnage chaque joueur souhaite incarner.

Très utile en complément des commandes

alert  qui envoie un message à l'utilisateur.

confirm qui demande une validation à l'utilisateur.

 

 

A bientôt Compagnon de Code