Vue.js Monster Slayer

Introduction : le jeu du combat contre le monstre en Javascript

Aujourd’hui je vais commenter le code que j’ai écrit sur un projet de découverte des concepts Vue.js. Nous sommes obligés de passer par là en tant que développeur quand nous sommes confrontés à une nouvelle technologie.

Le but du projet est de créer un RPG simple. Un système d’attaque, de soin et de coup spécial. Une classique.

Cette application est très minimaliste car c’est un projet pensé pour les personnes n’ayant jamais utilisé de frameworks JavaScript. C’est pourquoi la structure des fichiers ne ressemble pas à un projet Vue.js plus classique. On utilise également la librairie via CDN et non via une installation avec Node.js.

Mon but avec cet article est de partager mes acquis en détaillant le code source.

Comment ça fonctionne : décryptage du code source

Cet article est à voir comme un partage de connaissances. Si une faute vous saute aux yeux, je vous invite vivement à me contacter sur LinkedIn.

Connexion entre Vue.js et notre HTML

Afin d’utiliser Vue.js rapidement, nous l’ajouterons au projet via une balise <script>. Pour fonctionner Vue.js doit être monté dans notre fichier HTML principal. Pour faire simple, on lui indique où travailler. Généralement on consacre une balise <div> avec l’identifiant app. Vous êtes libre sur le choix de l’identifiant. Ici, j’utilise l’identifiant game.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue Basics</title>
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <div id="game"></div>
  </body>
</html>

Une fois le fichier HTML créé et copié, vous pouvez l’ouvrir dans votre navigateur favori. Pour l’instant rien ne s’affiche, on peut juste vérifier que les paquets de Vue.js ont bien été téléchargés en allant dans la console du navigateur comme ceci.

La ligne a vérifier dans la console du navigateur

La deuxième étape pour permettre à Vue.js d’intéragir avec le DOM se passe côté JavaScript. J’ai nommé le fichier app.js, le choix du nom n’est pas important, il suffit juste qu’il corresponse à celui de la balise <script> du fichier HTML. On peut vérifier, comme avec le fichier de Vue.js, si notre fichier apparaît dans la console.

Viens donc le moment où l’on écrit un peu de JavaScript. Ici, on va initialiser l’application avec l’objet Vue. Pas besoin d’import, l’objet est rendu disponible grâce au fichier téléchargé précedemment.

1
2


const app = Vue.createApp({});
app.mount("#game");

Tadaaa, notre script est maintenant prêt à modifier le DOM.

La fonction getRandomValue()

1
2
3


function getRandomValue(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

Cette fonction permet de retourner un nombre aléatoire compris entre la variable min et max. Elle sera utilisée par plusieurs de nos fonctions par la suite.

Math.random() génère un nombre aléatoire entre 0 (inclus) et 1 (exclus). Ensuite, on multiplie le nombre généré pour avoir un plus grand interval. Si on multiplie par 3, le nombre généré sera compris entre 0 et 3.

Mais attention, si on utilise que la fonction random(), le nombre généré sera un nombre décimal. Afin d’éviter ce comportement, on utilise la fonction Math.floor() qui permet d’arrondir un nombre à l’entier inférieur ou égal.

Les données disponibles

Pour cette application il y a deux types de données. L’un dans la propriété data (réservée aux données simples) et l’autre dans la propriété computed. (réservée aux données ayant de la logique)

Données dans `data`

1
2
3
4
5
6
7
8
9


data() {
    return {
      playerHealth: 100,
      monsterHealth: 100,
      currentRound: 0,
      winner: null,
      logMessages: []
    };
}

playerHealth : représente la vie actuelle du joueur.
monsterHealth : représente la vie actuelle du monstre.
currentRound : numéro de la manche en cours.
winner : nom du vainqueur.
logMessages : liste des messages du journal.

Données dans `computed`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


computed: {
    monsterHealthStyles() {
      return {
        width: this.monsterHealth <= 0 ? "0%" : this.monsterHealth + "%",
      };
    },
    playerHealthStyles() {
      return {
        width: this.playerHealth <= 0 ? "0%" : this.playerHealth + "%",
      };
    },
    mayUseSpecialAttack() {
      return this.currentRound % 3 !== 0;
    },
}

monsterHealthStyles() et playerHealthStyles() : détermine le style (niveau) de la barre de vie du monstre et du joueur. La propriété s’assure que la valeur ne soit jamais inférieure à zéro.
mayUseSpecialAttack() : détermine si l’attaque spéciale du joueur peut être lancée. Tous les 3 rounds, la condition est vraie, alors l’attaque est rendue disponible.

Les fonctions disponibles

Afin de permettre certaines actions au joueur et au monstre, il faut implémenter des fonctionnalités. La logique et les conséquences de ces actions sont codées dans les fonctions de notre composant Vue.

Les fonctions suivantes se trouvent dans la propriété methods.

1
2
3
4
5
6
7
8


attackMonster() {
  this.currentRound++;

  const attackValue = getRandomValue(5, 12);
  this.monsterHealth -= attackValue;
  this.addLogMessage("player", "attack", attackValue);
  this.attackPlayer();
}

this.currentRound++ permet d’incrémenter le nombre de rounds. Il apparaîtra dans chaque action faite par le joueur. On génère également une valeur aléatoire comprise entre 5 et 12 qui représente la puissance de notre attaque. this.addLogMessage() permet d’ajouter cette action aux logs, puis on lance l’attaque du monstre en appelant this.attackPlayer().

1
2
3
4
5


attackPlayer() {
    const attackValue = getRandomValue(8, 15);
    this.playerHealth -= attackValue;
    this.addLogMessage("monster", "attack", attackValue);
},

Cette fonction a la même logique que la précédente sauf qu’on décremente la vie du joueur à la place de celle du monstre. Ne vous méprenez pas, chaque action a des conséquences.

1
2
3
4
5
6
7
8


specialAttack() {
  this.currentRound++;

  const attackValue = getRandomValue(11, 19);
  this.monsterHealth -= attackValue;
  this.addLogMessage("player", "attack", attackValue);
  this.attackPlayer();
},

L’attaque spéciale est sensiblement identique à l’attaque basique. La différence se fait dans la génération du nombre aléatoire, allant de 11 à 19 au lieu de 8 à 15.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


healPlayer() {
  this.currentRound++;
  const healValue = getRandomValue(8, 20);

  if (this.playerHealth + healValue > 100) {
    this.playerHealth = 100;
  } else {
    this.playerHealth += healValue;
  }

  this.addLogMessage("player", "heal", healValue);
  this.attackPlayer();
},

La fonction de guérison permet de soigner le joueur uniquement. Elle s’assure également que la vie du joueur ne dépasse jamais 100. Cette action est également enregistrée dans les logs.

1
2
3
4
5
6


startNewGame() {
  this.playerHealth = this.monsterHealth = 100;
  this.winner = null;
  this.currentRound = 0;
  this.logMessages = [];
},

La fonction startNewGame() réinitialise toutes les données du jeu. Ce sont les données qui se trouve dans la propriété data().

1
2
3


surrender() {
  this.winner = "monster";
},

Il est également possible d’abandonner .. mais personne a besoin de ce bouton. 👎

1
2
3
4
5
6
7


addLogMessage(who, what, value) {
  this.logMessages.unshift({
      actionBy: who,
      actionType: what,
      actionValue: value
  });
}

addLogMessage() permet d’ajouter les actions effectuées dans les logs.

Petite précision, unshift() est une méthode permettant d’ajouter du contenu au début d’un tableau.

À quoi ça ressemble ?

Nous sommes arrivés à la partie finale de cet article : la révélation du contenu, la levée des rideaux, le grand reveal.

À la première connexion sur l’application, voici ce à quoi ressemble l’écran.

Écran du jeu à l’état initial

Une interface des plus basiques. En premier, on retrouve les points de vie de notre héros et du monstre. Ensuite on a le “bloc d’actions” où se regroupe toutes les actions possibles.

Ce que j’apelle le “bloc d’actions”

Et enfin en cours de partie, lors de nos premières actions, l’écran de log du champ de bataille apparaît. Il permet de voir l’historique des actions menées par le joueur et le monstre. Ainsi que la valeur associée à chaque action.

L’écran de log du champ de bataille

Conclusion

C’est déjà la fin de mon premier article sur mon blog. Grâce à ce projet on apprend les premiers concepts de Vue.js. On ne rentre pas dans les détails du fonctionnement du framework mais ça peut-être un bon premier projet à reproduire pour les débutants.

On peut imaginer des améliorations comme la possibilité de mettre des niveaux d’expériences, combattre plusieurs ennemis à la suite, acheter de l’équipement pour améliorer nos statistiques. Je laisse libre court à votre imagination.

Comme dit en introduction, n’hésitez pas à me contacter sur LinkedIn si vous avez une remarque.

Il me semble également important de créditer la personne qui est à l’origine de ce projet, que j’ai suivi à mes débuts sur Vue.js (cours de qualité) :

Et bien sûr le lien du dépôt GitHub : vuejs-monster-slayer