:: Enseignements :: ESIPE :: E3INFO :: 2020-2021 :: Programmation Web avec JavaScript ::
[LOGO]

Baba is You


Objectif général

Le but de ce projet est de développer un jeu du type « Baba Is You » qui est un jeu où chaque niveau est une énigme qu’il nous faut résoudre en modifiant les règles de l’environnement.
Pour se faire, vous trouverez, dans chaque niveau, des phrases composées de mots (exclusivement en anglais) qui s’avèrent être des blocs déplaçable par le joueur. Chacun de ses mots va définir les propriétés de l’environnement.

Condition de rendu

Ce projet est à faire par binôme qui sont créer par les chargés de TPs.
Le TP est a déposé sur elearning avant le 13 juin 23h59 sur elearning.

Cahier des charges

  1. Les mots
    Il existe trois catégories de mots que vous trouverez au cours de la partie: les noms, les opérateurs et les propriétés Vous y trouverez par exemple (listes non exhaustives) :
    Des noms tels que « Baba », « Flag », « Wall », « Water » ou « Rock »
    Les opérateurs tels que « Is » (d'autres existent tel que « On », « Has » ou « And » mais on ne vous demande pas de les implanter)
    Les propriétés tels que « You », « Win », « Stop » ou « Push »

    Les mots précédents sont requis pour les 3 premiers niveaux que vous aurez à faire (les 00, 01 et 02), voici quelques explications quand aux propriétés de chacun de ses mots:
    • Flag, Wall, Water et Rock sont des élements du décor
    • Is permet d'associer un nom à une propriété ou un nom à un nom
    Pour ce qui est des propriétés:
    • You, représente les éléments du décor que vous jouez
    • Win, représente les éléments de victoire, c'est à dire un des éléments du décor sur lequel vous devrez marcher pour gagner
    • Stop, représente l'élément du décor qui ne peut être traversé
    • Push, représente l'élément du décor qui peut être poussé horizontalement ou verticalement
  2. Les règles changeantes
    Vous débutez chaque niveau avec des combinaisons de ses mots-clefs déjà formées qui vous donnent les règles de l’environnement.
    Une règle est dite valide si elle peut se lire de gauche à droite OU de haut en bas, c’est à dire que ...
    	  |------|
    	  | Rock |
    	  |------|
    	  | Is   |
    	  |------|
    	  | You  |
    	  -------
    	 
    et
              |-----|----|-----|
              |Rock | Is | You |
              |-----|----|-----|
             

    ... sont deux règles valides qui disent que vous jouerez donc le ou les rochers dans le niveau (car le rocher c’est vous!).
     
    En revanche...
    	  |------|
    	  | You  |
    	  |------|
    	  | Is   |
    	  |------|
    	  | Rock |
    	  -------
    	 
    et
              |----|----|------|
              |You | Is | Rock |
              |----|----|------|
             

    ... ne fonctionnent pas ! Les diagonales ne sont pas non plus acceptées.

    Un mot peut être utilisé plus d'une fois si la règle ainsi formée respecte les conditions plus haut, par exemple
                         |------|
                         | Flag |
                         |------|
                         | Is   |
              |-----|----|------|
              |Rock | Is | You  |
              |-----|----|------|
             

    Vous jouerez donc (en simultané) les drapeaux et les rochers
                     |-------|
                     | Baba  |
              |------|-------|------|
              | Wall | Is    | Stop |
              |------|-------|------|
                     | You   |
                     |-------|
             

    Vous jouerez donc l’eau (toutes les cases d’eau), et les murs ne seront pas franchissables
    Il vous est possible d'ajouter plusieurs propriétés à un même nom, par exemple
    	  |------|----|------|
              | Baba | Is | You  |
              |------|----|------|
              | Is   |
              |------|
              | Win  |
              |------|
    	 

    ou
                     |-------|
                     | Wall  |
              |------|-------|-----|
              | Wall | Is    | You |
              |------|-------|-----|
                     | Win   |
                     |-------|
             

    Avec ces deux exemples, vous jouerez donc les murs et tous les murs permettent de finir le niveau (ah oui, vous avez donc gagné, félicitations!)
  3. Les règles immuables
    Il existe aussi des règles qui doivent régir chaque niveau, ces règles-là ne peuvent pas être changée.
    • « You » représentant le joueur, si aucun nom n'est associé à « You », ou qu'il n'y a plus d'élément en jeu représentant ce nom, alors la partie est perdue (si « Rock is You » mais qu'il n'y a plus de rocher en jeu... c'est fini!)
    • « Win » représentant l'élément qui déclenche la victoire, si aucun nom n'est associé à « Win », ou qu'il n'y a plus d'élément en jeu représentant ce nom, alors il n'est pas possible de finir le niveau (il vous faudra associer cette propriété à un autre nom)
    • Chaque niveau est d'une taille fixée, pas la même pour chaque niveau et reste borné, ce qui empêche quelconque élément de quitter la zone de jeu
      Pensez que votre jeu doit fonctionner même sur un écran "rétina" genre 3000x2000 pixels, donc les cases ne doivent pas avoir une taille fixe !
    • Un élément qui contient du texte, les blocs, sont implicitement poussable (Push). En fait, morsqu'ils sont en ligne ou en colonne, si on pousse le premier block, cela pousse les blocs suivant (c'est une rêgle avancé à implanter de façon optionelle)
    • Un élément dont le nom n'a plus de propriété, reste figé en jeu et il peut être traversé
    • Chaque niveau peut avoir des éléments décoratifs qui n'ont aucun nom les représentants (vous pouvez avoir des fleurs sur le monde sans que celles-ci aient un bloc "Flower" de présent), dans ce cas-là ils suivent les règles ci-dessus.
    • Il y a un ordre entre tous les élements, donc quand le petit lapin est sur un mur ou une fleur il est affiché devant (pas derrière) la fleur ou le mur.
  4. Les niveaux
    Il vous faudra représenter à l'identique les 3 premières énigmes (les niveaux numérotés 00, 01 et 02) que vous trouverez dans la vidéo YouTube dont le lien se trouve dans la section référence ci-dessous.
    Les niveaux doivent être au format JSON, le format exact les laissé à votre apréciation, par contre si c'est le même qu'une autre équipe, les deux équipes auront 0.
    De façon optionnel, vous pouvez ajouter les 3 niveaux suivant les 3 premiers niveaux.
  5. Jouabilité
    Vous débutez chaque niveau en ayant nécessairement un élément associé à « You ». Les déplacements se feront aux touches directionnelles et entraîneront le déplacement d'une case horizontalement ou verticalement en respectant les règles actives dans le niveau et la délimitation de celui-ci.
  6. Affichage
    Pour l'affichage, la page Web doit contenir un canvas occupant 80% de la largeur et 80% de la hauteur de la page Web.
  7. Indications d'implantation
    Il vous ait demandé d'écrire le code en utilisant la norme EcmaScript 6 (pas au dela).
    On peut remarquer que pour que les rêgles changent il faut qu'il y ait un mouvement de l'utilisateur donc le jeu à plusieurs phases.
    • On attend le mouvement du jouer.
    • Une fois le mouvement du jouer effectuer, on change l'état du tableau en fonction des rêgles courantes puis on l'affiche
    • On calcul les nouvelles rêgles en fonction de l"état tableau qui s'appliqueront au prochain mouvement
    Le code doit être écrit en Anglais (US) avec des noms de variables en Anglais et de la documentation en Anglais pour chaque fonction/classe/methode. Pas de commentaire à l'intérieur du code, à part si il y a une astuce à expliquer.
  8. Rapport de developpement
    Vous devz forunir un rapport au format HTML indiquant pourquoi votre jeu a été organisé de cette façon et quels sont les problèmes que vous avez surmontés et comment ou pas réussi à résoudre.
    Le rapport doit être écrit en francais avec des phrases ayant un sujet, un verbe et un complément.
  9. Notation
    En plus du respect du sujet, attention à ne pas faire de hors sujet par exemple en implantant un comportement pas attendu, il vous est demandé de,produire un code propre avec des fonctions/classes/méthodes.
    Avoir un jeu qui marchouille avec un code pas propres, des fonctions/classes/méthodes trop longues ou trop complexes sera sanctionné sévèrepment.
    Un code qui ne marche qu'avec un navigateur, une version particulière de navigateur, que chez vous, ou utilise une version supérieur à EcmaScript 6 sera sanctionné par un 0.
    Ne pas avoir de rapport ou avaoir un torchon en terme de rapport sera sanctionné par un 0.
    De plus, nous allons utiliser le logiciel SAFE pour la détection de plagiat. En cas de plagiat même d'une seule fonction avec variations, entre le code de deux groupes ou entre le code d'un groupe et un projet trouvé sur Internet, la note sera 0.

Références

Page Wikipedia de Baba is You
Vidéo YouTube découverte - Baba Is You
Baba Is You Wiki (non officiel) qui contient les images