Pour cette partie du projet, vous allez créer les différents chapitres qui constitueront votre histoire 📖.

Aperçu du résultat 👇

Requis

  1. Créez-vous un objet JavaScript correspondant à votre au premier chapitre de votre histoire.

  2. Dans cet objet, créez-vous une propriété intitulée “subtitle” correspondant au titre du chapitre en cours. Par exemple, l’élément "Sed ut perspiciatis" dans votre mise en page actuelle.

  3. Ajoutez une propriété “text” décrivant l’action que voit le joueur. Actuellement: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam".

  4. Créez une propriété nommée “img” stockant le nom d’une image 🏙 qui sera affichée lorsque le joueur sera rendu à cette étape de l'histoire. Pensez à ajouter cette image dans votre dossier "assets".

  5. Vous avez maintenant un objet de chapitre de réalisé. Il faudra cependant modifier sa structure puisque cet objet devra vivre à l'intérieur d'un objet plus grand contenant tous les chapitres de votre histoire.

    Pour ce faire, créez un nouvel objet JavaScript et nommez le “chaptersObj”. À l'intérieur de celui-ci, créez une propriété portant le même nom que la variable contenant votre premier chapitre. Vous pouvez maintenant copier la valeur de votre premier chapitre et la coller comme valeur de votre nouvelle propriété.

    À partir de ce moment, votre premier chapitre existe à l'intérieur de votre objet “chaptersObj”. Il est donc superflu de garder la variable originale qui peut être effacée.

  6. Créez-vous ensuite une fonction intitulée: “goToChapter”. Dans cette fonction, récupérez dans“chaptersObj” le chapitre que vous venez de créer et affichez son sous-titre et son texte dans la console.

    À ce stade, vous devriez être en mesure via la console de votre navigateur d'appeler la fonction "goToChapter()" et de voir les informations de votre premier chapitre apparaitre.

  7. Lorsque l'étape précédente fonctionne, créez tous les chapitres de votre histoire (chaque carré ou losange dans votre diagramme) à l'intérieur de votre objet “chaptersObj”. Oui, oui, c’est le moment où vous devez écrire l’histoire complète de votre jeu.

  8. Modifiez ensuite votre fonction “goToChapter” de sorte qu'elle accepte de recevoir un paramètre correspondant au nom du chapitre désiré. Nommez cedit paramètre “chapterName”. À partir de celui-ci, sélectionnez le bon chapitre dans votre objet “chaptersObj” et faites en sorte que les informations affichées dans la console (sous-titre et texte) correspondent au chapitre spécifié.

    À ce stade, vous devriez être en mesure via la console de votre navigateur d'appeler la fonction "goToChapter()" avec le nom du chapitre que vous désirez en paramètre et de voir les informations relatives à ce chapitre apparaitre.

  9. Pour chacun de vos chapitres, créez une dernière propriété nommée “options”. Cette propriété devra contenir un tableau. Ce tableau devra contenir à son tour des objets JavaScript; un par option de décision disponible.

    Par exemple dans la mise en page actuelle, le joueur à 3 options: "ullamco laboris", "nisi ut aliquip" et "ex ea commodo", il y aurait donc 3 objets dans le tableau. Pour chacun de ces objets, créez une propriété “text” contenant le texte de l’option. Par exemple: "ullamco laboris", ainsi qu’une propriété nommée “action” contenant le texte suivant: “goToChapter('X')” où X correspond au nom du chapitre à afficher si le joueur sélectionne cette option.

    Par exemple: "goToChapter('la_plage')".

Remise

Poussez vos modifications sur la branche "main" de votre projet GitHub et envoyez-moi un message privé sur Teams contenant l'url de votre répertoire.