03 Aventure

Objectifs

Créer un jeu en HTML/CSS.

• Estimer son temps de travail

Rendu

• GitHub Classroom : https://classroom.github.com/a/qLd4L0WG
  • ./report.md : Rapport individuel en Markdown.
• Délai : 1 semaine

Mise en place

• Cloner le nouveau dépôt Git dans le répertoire du cours.
• Ouvrir le répertoire du dépôt Git dans Visual Studio Code.

Estimation

• Estimer le temps nécessaire pour réaliser ce travail.
  • Découper le travail en tâches pour faciliter l'estimation.
• Une fois terminé, comparer le temps estimé avec le temps réellement passé.

Tâche	Temps estimé	Temps passé	Commentaire
Estimation	10m	15m	...
...	...	...	...
Total	2h	1h30	...

Une aventure

Le but est de créer un jeu d'aventure en HTML et CSS : à chaque étape, le joueur doit choisir entre plusieurs options qui le mèneront à une autre étape.

Une histoire peut être résumée par un organigramme tel que :

HTML

• Créer un fichier index.html dans le dossier sem03-aventure-{pseudo} :
  index.html

  <!doctype html>
  <html lang="fr">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Aventure</title>
    </head>
    <body>
      <h1>Rangement</h1>
      <p>
        Vous décidez de faire du rangement dans votre maison. Par où commencer ?
      </p>
      <ul>
        <li>Cave</li>
        <li>Grenier</li>
      </ul>
    </body>
  </html>

• Créer un fichier cave.html à côté de index.html avec le contenu suivant :
  cave.html

  <!doctype html>
  <html lang="fr">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Aventure</title>
    </head>
    <body>
      <h1>Cave</h1>
      <p>Vous êtes à la cave. Que voulez-vous faire ?</p>
      <ul>
        <li>Dépoussiérer</li>
        <li>Trier les affaires</li>
      </ul>
    </body>
  </html>

• Lorsqu'on clique sur la cave dans index.html, on aimerait être redirigé vers cave.html :
  index.html

  <li><a href="cave.html">Cave</a></li>

• De manière similaire, lorsqu'on choisit de dépoussiérer la cave, on aimerait être redirigé vers passage.html dont le contenu est :
  passage.html

  <!doctype html>
  <html lang="fr">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Aventure</title>
    </head>
    <body>
      <h1>Passage</h1>
      <p>
        En dépoussiérant, vous découvrez une petite trappe. En l'ouvrant, vous
        trouvez un passage secret qui vous mènera vers d'autres aventures...
      </p>
    </body>
  </html>

• Créer les fichiers tresor.html, grenier.html, souvenirs.html et lecture.html avec les contenus suivants :
  • tresor.html :
    • Vous tombez sur un coffre rempli de pièces d'or. Faites en bon usage !
  • grenier.html :
    • Vous êtes dans le grenier. Que voulez-vous faire ?
      • Trier les affaires
      • Trier les cartons
      • Trier les livres
  • souvenirs.html :
    • Vous retrouvez plein de souvenirs d'enfance !
  • lecture.html :
    • Vous vous plongez dans la lecture d'un vieux livre.
• À ce stade, le jeu doit être jouable et l'arborescence du projet doit ressembler à ceci :

  sem03-aventure-{pseudo}/
  ├── cave.html
  ├── grenier.html
  ├── index.html
  ├── lecture.html
  ├── souvenirs.html
  └── tresor.html

CSS

• Créer un fichier styles.css à côté de index.html avec le contenu suivant :
  styles.css

  body {
    background-color: #fdf6e3;
    color: #657b83;
  }
  p {
    font-size: 20px;
  }

• Appliquer le style à tous les fichiers HTML en ajoutant la ligne suivante dans le head :

  <link rel="stylesheet" href="styles.css" />

• Appliquer les changements suivants dans le style (rechercher avec un moteur de recherche comment faire) :
  • Couleur des titres : #268bd2 (bleu)
  • Couleur des liens : #dc322f (rouge)
  • Taille de police des liens : 18 pixels
  • Couleur des liens au survol : #6c71c4 (violet)
  • Enlever le soulignement des liens
  • Changer le symbole de la liste à puce en carré
  • Changer la police de caractères de toute la page (indice)
• Ajouter au moins une image dans l'aventure.
• Créer un commit avec le message ajouter exemple
• Lancer les tests pour vérifier que tout fonctionne correctement.
  • Installer Pytest : pip install -U pytest
  • Lancer les tests : pytest --tb=no -vv depuis le répertoire du dépôt Git.
• Pousser les commits sur le dépôt Git distant.

Votre aventure

• Commencer par dessiner l'organigramme de votre aventure avec environ 7 étapes.
  • Ajouter l'organigramme dans le rapport.
• Remplacer l'exemple par votre aventure.
  • Modifier et créer les fichiers HTML et CSS nécessaires pour votre aventure.
  • Renommer les fichiers pour correspondre à votre aventure.
  • Le jeu doit contenir au moins une image.
• Dans le rapport, expliquer les difficultés rencontrées et comment vous les avez résolues.
• Ne pas oublier de créer des commits et de les pousser sur le dépôt Git distant.
• Pour publier votre aventure, vous pouvez utiliser GitHub Pages.
  • Sur GitHub, dans le dépôt, aller dans Settings > Pages > Sous Branch, sélectionner main et / (root), puis cliquer sur Save.
    • Configuration d’une source de publication pour votre site GitHub Pages
  • Le site est maintenant accessible à l'adresse https://hepl-bs21inf5.github.io/sem03-aventure-{pseudo}/.
    • Revenir dans Code > Cliquer sur à côté de About > Sous Website, cocher Use your GitHub Pages website pour voir votre lien.
  • Ajouter le lien dans le rapport.