TP3 : petit jeu JS dans un Canvas, organiser fichiers et hiérarchie de classes

Introduction

Dans le cours, nous avons vu plusieurs exemples de dessin et animation dans un canvas HTML5 :

1. Cet exemple fait en live coding pendant le dernier cours : https://jsbin.com/vagigil/edit cependant le code n'est pas très bien organisé.
    
2. Ici un autre exemple plus riche, avec des tests de collision, des obstacles, un déplacement du joueur au clavier : https://jsbin.com/gacezog/edit?html,js,output là aussi, il s'agit de code fait en live coding, à une époque ou le langage JavaScript de permettait pas de faire des classes (on faisait à la place des fonctions avec des fonctions internes qui faisaient office de méthodes)... Par contre il est intéressant car il montre comment gérer des collisions rectangle/rectangle (monstre avec obstacles) et cercle/rectangle (balles et obstacles).
    

Dans le cours 2 j'ai mis des liens vers d'autres petits exemples pour montrer comment faire un objet qui suit la souris : https://jsbin.com/jegamas/edit?js,output ou encore https://jsbin.com/voyowo/3/edit?js,output et même un exemple de char qui tire (souris + barre espace et bouton 1 souris) :Projet zip avec un char qui tire et suit la souris. 

Le but de ce TP sera de créer avec Visual Studio Code et des fichiers bien organisés, un projet de jeu dans un canvas, en s'inspirant très fort de l'exemple 2 ci-dessus (https://jsbin.com/gacezog/edit?html,js,output).

Travail à faire

1. Créer un projet VSCode comme ceux qu'on a vu en classe, avec les dossiers css, js, lib, assets etc.
2. On veut un fichier ObjetGraphique.js quiu exporte  une classe ObjetGraphique qui contiendra les caractéristiques communes de tous les objets graphiques (x, y, couleur, largeur, hauteur etc.) et des méthodes comme draw(ctx), move(), etc.
3. Dans script.js vous mettrez la fonction init déjà vue, une boucle d'animation classique avec requestAnimationFrame, qui appelle une fonction draw() et une méthode update() qui feront tout le travail de dessin et de mise à jour des objets.
4. Vous commencerez par afficher uniquement un monstre, comme celui que vous avez fait en cours. Pour cela, dans le fichier Monstre.js, vous exporterez une classe Monstre extends ObjetGraphique. Vous redefinierez la méthode draw et la méthode move, vous ajouterez éventuellement de nouvelles propriétés propres au monstre (vitesse, angle, ?). 
5. Vous créerez une instance de ce monstre dans la méthode init de script.js et dans la boucle d'animation vous appellerez dans draw / update monstre.draw(ctx) et monstre.move()
6. J'espère que vous avez pensé à ajouter une vitesse de déplacement en x et en y pour le monstre, et fait this.x += this.vx et this.y += this.vy dans la méthode move du monstre ! Essayez donc de mettre vx à 1 ou vy à 1 et voyez le monstre se déplacer à l'écran, à 60 images/s !
7. Maintenant ajouter un écouteur de clavier pour déplacer le monstre avec les flèches ou avec ZQSD. On avait fait cela en cours, vous vous rappelez ? C'est dans le repository GiutHub, dans COURS/ExempleJeuCanvas1 regardez comment on avait défini un écouteur d'événements de type keyup et keydown pour déplacer le rectangle horizontalement. Cette fois-ci on voudrait les 4 directions.
8. Ok, essayez d'empêcher le monstre d'aller plus loin que les bords de l'écran.
9. Ajout d'obstacles rectangulaires. Exportez dans Obstacle.js une classe Obstacle extends ObjetGraphique qui permette de créer des obstacles rectangulaires à une position donnée (le constructeur prendra x, y, largeur, hauteur, couleur) par exemple. Creéz deux murs comme dans l'exemple https://jsbin.com/gacezog/edit?html,js,output
10. Regardez dans ce même exemple comment on a géré les collisions entre le monstre et les murs. Vous mettrez les fonctions de détection de collision dans un fichier collisions.js et vous exporterez les fonctions circleCollide, rectsOverlap et circRectsoverlap. Importez les dans script.js et ajoutez une fonction de detection de collision entre le monstre et un obstacle qui sera appelée dans la fonction update. 
11. Faites une classe CercleAnime extends ObjetGraphique pour créer les cercles qui se déplacent. Regardez l'exemple pré-cité pour créer un tableau de cercles et faire en sorte qu'ils rebonsissent sur les bords de l'écran.
12. Idem mais pour qu'ils rebondissent aussi sur les obstacles.
13. Ajoutez un cercle jaune avec un contours noir, fixe, en bas à droite du canvas, qui symbolisera la sortie. Vous le créerez à l'aide d'une classe Sortie.js qui elle aussi extends ObjetGraphique. Si le joueur atteint la sortie, il passe au niveau suivant.
14. Ah, on n'a pas fait de classe Niveau. Et bien réfléchissez-y, que mettre dedans ? (la liste des obstacles, la position de la sortie etc.)
15. Et si on voulait une classe ObstacleAnime extends Obstacle pour des murs qui bougent horizontalement ou verticalement ?