URL du site : http://votre-url-ici.com
- Emma Cassagnettes
- Amanda Tan
- Voici le cahier des charges que doit respecter au minimum le projet.
- Tout ce qui n'est pas précisé relève de vos choix personnels.
- Forkez ce repository et renommez-le selon la nommenclature
w1p2021-hero-amsellem-calou
, en remplaçant les noms par les vôtres. - Utilisez netlify ou le service de votre choix pour mettre votre projet en ligne.
- Remplacez la fausse URL en haut de ce fichier par l'URL de votre projet.
- Renseignez les membres de votre groupe en haut du fichier.
Le projet doit être construit avec le framework VueJS.
Se mettre dans un terminal dans le répertoire du projet forké, puis :
npm i
npm run dev
- Vue.js devtools pour Chrome, inspecteur vue
- Vue.js devtools pour Firefox, inspecteur vue
- Plugin vue pour VSCode, coloration syntaxique
- Plugin eslint pour VSCode, validation de code
Le projet doit contenir un fichier data.json
contenant l'intégralité des données nécessaires à la génération du jeu.
Avant d'écrire votre histoire, commencez par un jeu de données de test constitué ainsi :
phase n° | titre | action A | action B | Fin ? |
---|---|---|---|---|
1 | Bienvenue ! | avancer (-> vers 2) | ||
2 | Ou aller ? | à gauche (-> vers 3) | à droite (-> vers 4) | |
3 | Chemin tranquille | avancer (-> vers 5) | ||
4 | Chemin dangereux | revenir (-> vers 2) | avancer (-> vers 6) | |
5 | Arrivée | continuer (vers /win ) |
Victoire | |
6 | Piège mortel | continuer (vers /lose ) |
Échec |
- À vous de trouver comment représenter ces données sous forme d'un
json
exploitable par votre JavaScript. - Par la suite, vous écrirez une histoire complète constituée d'au moins 30 phases.
- Les chemins peuvent s'entremêler, et les victoires et les échecs peuvent être multiples.
- Chaque phase pourra offrir un ou plusieurs choix (sans se limiter à deux).
- Votre
json
s'enrichira de nouvelles informations pour chaque phase (texte(s), image(s)...).
Le projet doit contenir les pages suivantes :
url | description | paramètres | destination |
---|---|---|---|
/ |
Page d'accueil | /character |
|
/character |
Page de choix du personnage | /game/1 |
|
/game/:id |
Pages de l'aventure | id : identifiant de la phase | /game/:id ou /win ou /lose |
/win |
Page de victoire | / |
|
/lose |
Page d'échec | / |
- Commencez par créer des pages constituées d'un simple texte de test. Elles se construiront par la suite.
- Lorsque l'utilisateur recharge le navigateur, la page courante doit être restaurée correctement. Si je suis sur
game/3
et que je rafraîchi, je suis toujours surgame/3
.
Vide pour l'instant, sa logique sera approfondie au cours des semaines suivantes.
- Chaque phase est un
object
identifié par unid
dans le fichierdata.json
. - Lorsque la page est affichée, elle doit charger la phase de jeu correspondante.
- Au début, affichez seulement l'
object
brut. Le contenu des pages sera mis en place plus tard.
- Le passage d'une page à l'autre doit être fluide pour l'utilisateur.
- Utilisez les transitions et les animations de votre choix pour parvenir à cet effet.
- Les transitions ne seront pas toutes identiques.
Voici un exemple de trame :
- Loader (3 secondes fixes pour l'instant, logique à implémenter par la suite)
- Transition d'ouverture
- Page d'accueil
- Transition
- Page de sélection du personnage
- Transition du hors-jeu vers le jeu (ex: passage par un écran noir, comme un jeu vidéo - soyez inventifs !)
- Phase 1
- Transition de phase
- Phase 2
- Transition de phase
- Phase 3
- Transition du jeu vers le hors-jeu
- Page de victoire ou d'échec
Proposez vos idées de fonctionnalités pour la semaine 2 et votez pour celles des autres sur ce sondage collaboratif.