Cours Miage d'Evry, 2016-2017

Pages récentes

Introduction

Dans ce cours nous allons vous présenter les grandes parties de HTML5 et d'autres librairies émergentes intéressantes, puis nous ferons quelques rappels sur JavaScript (objets, conceptions, callbacks, events, etc.), illustrés au travers de l'écriture d'un jeu vidéo tournant à 60 images/s.

Michel Buffa est l'auteur de deux MOOCs gratuits (en anglais) sur HTML5, couvrant toute la spécification HTML5, mais aussi avec des sections dédiées à l'écriture de jeux HTML5, au multimédia avancé (WebAudio, etc.), à AjaX et aux WebComponents:

Inscrivez-vous à ces deux cours (gratuits), et regardez la table des matières pour vous faire une idée. Par exemple, dans quel cours étudie-t-on la persistence côté client (attention, piège !).

Outils

Nous n'allons pas utiliser d'outils particuliers pour ce cours, uniquement des outils "standards" tels que Eclipse, Sublime Text, Atom Editor, Brackets, Notepad++ ou les outils que vous appréciez pour éditer du code. Néanmoins, de nombreux exemples HTML5/JS/CSS seront proposés sur des envrionnements de développement en ligne tels que https://plnkr.co/, http://jsbin.com/, http://jsfiddle.net/, http://dabblet.com/ ou http://codepen.io/, particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique).

Partie 1 : découverte des APIs de HTML5

Supports de cours :

Intro à HTML5

HTML5 Canvas (avancé) les exos sont dans les transparents. Ces transparents correspondent aux Week 3 et 4 du MOOC HTML5 part 1.

Autres ressources :

JavaScript :

CSS :

Les tutoriaux de codeacademy.com sont très bien et gratuits, parfaits pour les débutants

Le MOOC HTML5 intro sur W3Cx est très bien si vous ne vous sentez pas à l'aise.

Partie 2: écriture d'un moteur de jeu en HTML5/JavaScript

Cette partie est prétexte à faire du JavaScript, apprendre à débugger, apprendre à organiser son code, à faire de l'objet, etc. Pour la partie "manipulation du DOM" et autres joyeusetés plus classiques dans un site Web, on verra ça la semaine prochaine.

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.

Exemple du monstre avec les balles fait pendant le cours à Evry: http://jsbin.com/telufol/10/edit?js,console,output
Ici un exemple avec des rectangles fait en live pendant le cours à Nice : dans la partie JS les différentes manières de faire des objets en JavaScript, sans héritage ni manipulation des prototypes (objets singleton, fonctions constructeur -pseudo classes- et Black Box Model) : 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

TRAVAIL A FAIRE (TP à rendre pour les alternants) :

Transformer le monstre en objet JavaScript singleton,
Ajouter un "ennemi" : un rectangle ou un cercle qui se promène aléatoirement, aussi en singleton
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
On va fabriquer deux sortes d'ennemis (sans héritage) : les balles rouges sont méchantes, il faut les éviter, les vertes sont gentilles et rapportent des points. Une collision avec une 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.
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".

Facultatif (mais recommandé) : Voir les exemples de la Séance 2 un peu plus loin, inclure de l'héritage pour l'animation de certains ennemis, voir séance suivante. Par exemple, faire une classe ObjetGraphique avec une méthode draw() et une méthode move() ou updatePosition(), et des sous-classes (Balles, Score, etc.)

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.

Evaluation de ce cours

TP à rendre

ALTERNANTS : ce travail est à rendre pour le 7 Octobre 2016, ceci ne concerne que les étudiants en alternance, travail en binôme, avec les contraintes suivantes :

Faire preuve d'originalité (un petit monstre rigolo ?), ajouter au moins deux ou trois choses non demandés (images/sprites, sons, menu principal, gameplay original, support manette, etc. ?)
Vous avez le droit de développer un truc différent selon vos idées, mais en respectant le modèle du game framework (Black Box Model, animation par requestAnimationFrame, sauvegarde/restauration du contexte et translate/rotate etc.)
Je peux vous aider par mail / chat / visio si vous bloquez...

A rendre de la manière suivante :

Avec une version en ligne facile à corriger (sur jsbin.com, codepen, plunker ou même sur un de vos serveur, peu importe)
Avec un zip dans lequel le code est structuré en fichiers (monstre.js, ennemi.js, score.js, etc.), vous le poserez sur github et m'enverrez le lien pour que je le clone.

Vous enverrez ce travail à micbuffa at gmail dot com en indiquant clairement dans le sujet [EVRY BUFFA] TP binome XXX avec YYY

NON ALTERNANTS : vous rendrez avant dimanche 2/10 le travail que vous aurez effectué (celui correspondant au travail à faire en TP), si vous n'avez pas terminé ce n'est pas grave, chaque partie à faire compte des points, je serai plus indulgent qu'avec les alternants qui auront un délai pour faire l'exercice et pour qui j'attends de l'originalité dans le travail. Pas d'obligation de faire quelque chose d'original.

Séance 2 : on va un peu plus loin, héritage en JavaScript (JS classique, en ES6)

Ressources pour l'héritage :

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

Bonus pour le TP à rendre : utiliser l'héritage dans votre code pour généraliser la manipulation des objets graphiques. Je vous recommande de tester au moins deux syntaxes (je conseille d'inclure ES6 dans une des deux, c'est l'avenir).