Cours HTML5/NodeJS/Angular etc. Master 2 NTDP 2016-2017

Séance 1

• Ici la page qui contient toutes les infos sur ce long TP  
• Pour ceux qui veulent avoir tous les détails, avec vidéos etc, voir la Week2 du mooc HTML5 part 2.

• Ici une présentation des meilleurs modules pour Sublime Text(emmet, color picker, bracker highlighter etc.)

Ici exemple avec les rectangles fait en live pendant le cours : dans la partie JS les différentes manières de faire des objets en JavaScript : http://jsbin.com/qodisu/edit

Ici exemple d'un monstre et dans le code il y a les trois manières de créer des objets bien documentées : http://jsbin.com/kafehi/edit

Séance 2 : on continue le TP en modifiant le code pour mettre des objets et séparer en fichiers

Aujourd'hui on va faire les choses suivantes :

• Transformer le monstre en objet JavaScript singleton,
   
• Ajouter un "ennemi" : un rectangle ou un cercle qui se promène aléatoirement sur l'écran, lui aussi en objet. Dans un premier temps on en fera aussi un objet singleton, avec méthodes draw, move, etc. Lorsqu'il sort de l'écran, on le fera réapparaitre sur le côté opposé.
   
• Regarder dans le MOOC HTML5 part 2, Week 2 sur "game programming", la partie collision detection. Prendre la ou les fonctions dont vous aurez besoin (rectangle/rectangle et/ou rectangle/cercle). Il faudra pour voir détecter lorsque le monstre touche l'ennemi. Dans ce cas, on incrémentera le score et on replacera l'ennemi à un autre endroit aléatoire sur le canvas, mais loin du monstre. On augmentera la vitesse de déplacement de l'ennemi (c'est comme si on passe au niveau suivant).
   
• Faire un objet "score" avec des méthodes increment(inc), reset, draw (x,y), et des propriétés value, color, etc. On incrémentera le score lorsqu'on touche l'ennemi
  
   
• Rajouter un bouton pour démarrer ou remettre à zéro le jeu, des sliders pour modifier la difficulté du jeu, un input type=color pour choisir la couleur, etc. Vous vous inspirerez de l'exemple situé dans le MOOC HTML5 part 1, Week 5 sur les formulaires, live coding video 1 & 2 sur "using input elements as widgets to control a Web Application".
   
• On réfléchira à la possibilité de créer non pas 1 ennemi, mais n ennemis, les rouges sont méchants, il faut les éviter, les verts sont gentils et rapportent des points. Une collision avec un rouge enlève une vie au monstre (il en a 3 au départ d'une nouvelle partie). Lorsque le nombre de vies atteint zéro le jeu est en game over.

Les plus curieux peuvent suivre l'intégralité de la semaine 2 du MOOC HTML5 part 2 sur la programmation de jeux, pour voir comment gérer des écrans (états du jeu : écran de départ, écran game over, etc.), dessiner des images, des sprites animées etc.

Ce travail est à rendre pour le lundi 26 Septembre, individuel. A rendre de la manière suivante :

1. Avec une version en ligne facile à corriger (sur jsbin.com, codepen, plunker ou même sur un de vos serveur, peu importe)
2. Avec un zip dans lequel le code est structuré en fichiers (monstre.js, ennemi.js, score.js, etc.)

Séance 3 : on va un peu plus loin en JavaScript : manipulation du DOM et héritage (en JS classique, en ES6)

Ressources:

• Le plus simple pour commencer est de tester des exemples simples que je vous ai préparé sur JsBin:
  
  
  1. Exemple 1 qui couvre les cas "classiques" : classes et sous-classes, héritage de propriété et de méthodes. Différentes syntaxe d'appel des constructeurs hérités (avec et sans utilisation de la méthode call)
     
      
  2. Exemple 2 qui montre comment redéfinir une méthode héritée sans changer son nom, et en gardant la possibilité d'appeler la méthode de la classe dont on hérite (équivalent du super.methode...)
      
  3. Exemple 3 avec le Black Box model (qui n'est pas de l'héritage mais de la composition, on peut quand même simuler l'héritage et la redéfinition, vous verrez, mais l'opérateur instanceof ne donnera plus l'appartenance des instances à plusieurs types en même temps).
      
  • Pour en savoir plus sur la l'héritage et la définition de pseudo-classes avec la syntaxe JavaScript classique, voir ce cours en français sur le Mozilla Developer Network

• Exemples avec ES6, la nouvelle version de JavaScript. Attention, ES6 ne support pas vraiment les classes, il s'agit ici d'un "sucre syntaxique" permettant d'avoir une syntaxe plus proche de ce que l'on connait en Java/C#, mais en coulisse, on a toujours affaire à des "prototypes".
  
  
  
  1. Ici un tutoriel plus détaillé pas trop dur à digérer... 
      
  2. Et ici un article très détaillé si vous voulez connaitre toutes les subtilités de cette syntaxe