Master IFI - WebSciences - 2017/2018

S'inscrire aux trois MOOCS precedents, on va s'y referer souvent.

Outils

• NodeJS : l'installer et verifier que les commandes node et npm sont dans votre PATH
• Si vous etes sous windows: un bon terminal, git terminal, cmder, bash for windows etc.
• Un bon editeur de code comme Visual Studio Code, Sublime Text ou equivalent.

Exercices / live coding

Exercice 1 : coder une simple animation a 60 images par seconde a l'aide du canvas HTML5

• Cours Weeks 3 et 4 du MOOC HTML5 Coding essentials and best practices + Week 2 du MOOC HTML5 Apps and Games

Exercice 2 : gestion d'evenements souris / clavier

Exercice 3 : generation de sons

• Quelques rappels: https://pudding.cool/2018/02/waveforms/
• ex de generateur de son en WebAudio : http://jsbin.com/qelavukiba/edit?htm...console,output

Exercice 4 : JavaScript oriente objet

Exercice 5 : noeuds WebAudio interessants, visualiser la forme d'onde d'un son, les frequences

EXERCICE FAIT EN COURS CORRECTION: http://jsbin.com/jatogim/edit?js,console,output

A faire pour la semaine prochaine

Attention, ce sera la base du TP a rendre qui sera note (a rendre pour seance 4)

• Prendre le dernier exercice vu en cours et vous l'approprier:
  
  
  1. Ajouter un autre rectangle dont la taille varie pendant qu'il bouge: il grossit, il rapetisse.
      
  2. Ajouter un cercle plein. Faire une classe Cercle en vous inspirant du modele du rectangle. Voir le MOOC HTML5 Coding essentials and best practices, Week 3, pour voir comment dessiner des cercles.
      
  3. Ecrivez une fonction creerEnnemis(nb) qui permet de creer un tableau d'ennemis avec des tailles et des vitesses aleatoires. Quand on demarre le jeu, on appelle cette methode pour peupler le tableau des ennemis.
      
  4. Ok, on a vu comment deplacer le joueur au clavier, on aimerait le deplacer a la souris. Dans un premier temps, vous le dessinerez la ou se trouve le curseur. Vous pouvez momentanement desactiver le deplacement au clavier.
      
  5. Regardez comment dessiner un texte dans le MOOC. Vous afficherez en haut de l'ecran un score et un nombre de vies. Par defaut score = 0 et nombre de vies = 5
      
  6. Faites des cercles et des rectangles rouges (mechants) et des verts (bons a manger). On meurt quand on est touche par un objet rouge, on marque des points quand on mange des objets verts. Vous mettrez a jour le score et le nombre de vies en consequence.
      
  7. Ok, maintenant quand on mange un objet vert, il disparait. Quand tous les objets verts sont manges, on change de niveau et on augmente le nombre et la vitesse des objets rouges. Attention a ne pas recreer les ennemis sur le joueur sinon il y aura collision avant meme que le niveau ne commence.
     
      
  8. Ah, il est temps de decouper le programme en fichiers. Telechargez ou copiez/collez le code de jsbin (menu fichier/download), et faites en un "vrai" code maintenable avec les fichiers js, css et html separes. Si possible de maniere "logique". A partir de maintenant vous pourrez travailler avec Visual Studio Code, Sublime Text, Atom, WebStorm etc... pour travailler sur votre projet.
     
     
     • ICI l'exemple initial du cours decoupe en fichiers 
        
  9. Amelioration de gameplay : le joueur "suit" la souris comme dans l'exemple suivant tire du MOOC HTML5 Apps and Games: https://jsbin.com/soduko/edit?js,output, ca change le gameplay, il faudra peut-etre ralentir les ennemis.
      

Héritage en JavaScript

• Exemple JsBin avec les différentes syntaxes (objets singleton statiques, fonctions constructeurs, black box model, pseudo classes ES2016): http://jsbin.com/wawehis/edit?js,console

• 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 4 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

Synchroniser affichage / animation avec la musique

• Voir les exemples expliques dans la Week 1 du MOOC HTML5 Apps and Games partie WebAudio. Les explications concernant le dessin d'une waveform, des frequences et d'un vu-metre y sont, avec video de live coding et code source.
   
• Voir aussi cet exemple plus complique, qui montre comment utiliser l'API de SoundCloud pour prendre des musiques par genre au hasard, et utiliser des animations avancees, avec effets de symetrie, dans un canvas. Le fichier canvas.js est particulierement interessant.