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.
     1. Ici un exemple pour suivre la souris et tirer: http://jsbin.com/viwekol/edit?js,output
          

Héritage en JavaScript

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.