MBDS ESTIA 2020-2021

Introduction

Dans ce cours nous verrons blah blah....

Séance 1 :

Supports de cours :

• Etat des lieux des standards du Web (en 2019) 
   
• Vidéo  du cours (8h30-10h30) 
   
• Fichier zip des logiciels vus en cours en live coding.

 A FAIRE POUR PROCHAINE SEANCE :

1. Vous inscrire aux MOOCs :
   • HTML5 coding essentials and best practices et regarder les chapitres 3 et 4 sur le dessin dans le canvas et l'animation.
   • Utiliser différentes de ces options pour dessiner votre monstre ou du décors....
     
      
   • Inscrivez-vous au MOOC "JavaScript Introduction" pour l'avoir en référence.

 Séance 2 : gestion des événements, programmation orientée objets

Supports de cours :

• Module 4 (partie "interactions") du MOOC HTML5 coding essentials and best practices
• Module 2 ("adding interactivity", gestion des événements) du MOOC "JavaScript Introduction".
• Module 2.5.3 du MOOC "HTML5 Apps and Games" pour la partie sur la detection de collisions (avec fonctions rectangle-rectangle etc.)
   
• Version du jeu faite en live coding pendant la session de cours (avec collisions, clavier, souris, etc.)
  
   
• Vidéo du cours 2 (8h30-12h30) 

Séance 3 : on avance sur le jeu, gestion des états (écrans intermédiaires), collisions etc.

• Vidéo du cours 3 (14h-17h) 
• Zip du projet squelette avec collisions, hierarchie de classes, gestion états du jeu, balle à tête chercheuse etc. 
  
   
• Meilleurs outils pour le développeur Web (y compris outils sur les images, virer le fond, réduire la taille etc.) 

 Séance 4 et 5 : Utilisation d'un asset loader pour images/sons/musiques

• Vidéo du cours 4 du matin (8h30-12h30) avec héritage.... 
• Vidéo du cours 5 (TP) de l'après-midi (14h-17h) (asset loader musiques, sons, images)

Travail à faire :

1. intégrer le fichier assets.js dans votre projet
2. Modifier les valeurs dans le tableau d'assets à charger (dans ce même fichier), les musiques en général ont met buffer:true (pour les streamer) et les effets sonores ont mettra buffer:false et loop:false
3. Regarder dans le fichier script.js comment c'est utilisé (note: on joue un son avec play(), on utilise une ilmage avec drawImage standard).
4. Pour les sons, ça utilise la librairie HowlerJS, il faudra donc l'importer ou la copier localement. Dans l'exemple j'ai rajoute dans index.html la ligne suivante :     <scriptsrc="https://cdnjs.cloudflare.com/ajax/li.../howler.min.js"></script>
    

Séance 6 : on continue... timers, comptes à rebours, etc.

• Ici des exemples de timers, schedulers, compte à rebours etc. 
• Ici exemple d'un char qui tire, et on peut régler le temps minimum entre les tirs. Utiliser barre d'espace ou click souris
• Utiliser une spritesheet avec des caractères dessinés dans un canvas