 |
Cours HTML5/NodeJS/Angular etc. Master 2 NTDP 2016-2017
De $1
Introduction
Dans ce cours nous allons vous présenter les grandes parties de HTML5, puis nous ferons des rappels sur JavaScript. Enfin, nous développerons des exemples utilisant les APIs de HTML5 en JavaScript.
Michel Buffa est l'auteur de deux MOOCs gratuits (en anglais) sur HTML5, couvrant toute la spécifications, mais aussi avec des sections dédiées à l'écriture de jeux HTML5 et au multimédia avancé:
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 cette formation, uniquement des outils "standards" tels que Eclipse, Sublime Text 2, 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).
ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT DES OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale :
Partie 1 : découverte des APIs de HTML5
Supports de cours :
Autres ressources :
JavaScript :
CSS :
- http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS
- Les tutoriaux de codeacademy.com sont très bien et gratuits, parfaits pour les débutants
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 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 :
- 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.)
Séance 3 : on va un peu plus loin en JavaScript : héritage (en JS classique, en ES6) et persistence simple
Héritage
Ressources pour l'héritage :
- Le plus simple pour commencer est de tester des exemples simples que je vous ai préparé sur JsBin:
- 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)
- 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...)
- 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
Exercice à faire : utiliser l'héritage dans votre code pour généraliser la manipulation des objets graphiques. Obligation de tester au moins deux syntaxes (je conseille d'inclure ES6 dans une des deux, c'est l'avenir).
Persistence
Resources pour la persistence : semaine 5 du Mooc HTML5 part 1, et semaine 3 du MOOC HTML5 part 2 sur IndexedDB
Dans un premier temps on étudiera l'api WebStorage qui se compose de LocalStorage et SessionStorage. Vous regardez les vidéos et exemples du MOOC, mais en attendant, on va commencer par ce petit exemple qui montre comment saisir des couples nom/prenom puis les sauvegarder dans le LocalStorage. On verra aussi que ce bout de code récupère les données sauvegardées lorsque la page est rechargée.
Exercice à faire : générer un tableau contenant les personnes saisies. Si on reloade la page on veut retrouver le tableau dans l'état où il était.
Deuxième exercice à rendre pour la semaine prochaine:
- Penser à faire l'exercice de la section précédente (utiliser l'héritage dans votre code pour généraliser la manipulation des objets graphiques. Obligation de tester au moins deux syntaxes, je conseille d'inclure ES6 dans une des deux, c'est l'avenir).
- ajouter la sauvegarde / restauration des high-scores dans votre jeu vidéo à l'aide de LocalStorage, présentation des dix meilleurs scores dans un tableau qui sera écrit et lu dans LocalStorage (lu au chargement du jeu, mis à jour pendant qu'on joue, si plus tard on recharche la page sur le même navigateur, on retrouve les scores)
Présentations à faire par les étudiants
Master 2 NTDP Casablanca
Séances du lundi et du mardi
- Vous inscrire aux deux MOOCs sur HTML5 (HTML5 part 1 et HTML5 part 2, vous les trouverez en cherchant "W3Cx" sur Google, c'es gratuit. Il y a aussi d'autres MOOCs sur CSS, HTML5 intro et bientôt sur JavaScript)
- On a utilisé les supports de cours suivants :
- On a vu en classe des exemples codés live:
- Manipulation du DOM et exemples simples d'événements (bouton qui change un titre et qui change sa couleur) : http://jsbin.com/gahimad/edit?js,output
- Petite animation dans un canvas avec une tête qui rebondit et un objet singleton ("tete"): http://jsbin.com/bulume/edit?html,js,output
- Exemples de gestion d'événements avec slider, champ de texte, choix de couleur, souris, clavier: http://jsbin.com/loyuyos/1/edit?output
Travail à faire pendant la séance du mercredi
Exemples vus en classe :
- En vous servant de l'exemple 3, ajouter dans l'exemple 2 (ou dans votre version de la tête animée) :
- Un selecteur de couleur. Quand on choisit une couleur ça change la couleur de la tête, ou la couleur des yeux, etc. à vous de voir...
- Un slider, il permettra de modifier la vitesse de déplacement par exemple, ou l'épaisser du trait autours de la tête...
- Ajoutez un écouteur de souris sur le document (c'est plus simple que juste sur le canvas), et quand on clique la souris, le monstre arrête de rebondir mais à la place apparait là où est le curseur, tant qu'on garde le bouton appuyé. Si on relache il continue à rebondir. Mettre un écouteur sur les évenements
mouseup, mousedown et mousemove.
- Si on appuie sur une fleche, le monstre se déplace dans le sens de la flèche. Si on relache il continue à rebondir. Il faudra pour cela des écouteurs sur les évenements
keyup et keydown.
Séance du Jeudi
Etude des objets en JavaScript...
Ici le JsBin fait en cours qui montre les différentes manières de créer des objets : http://jsbin.com/jamenuj/edit?js,console,output
Etude des événements et propriétés qui se produisent pendant la lecture d'une vidéo.
Travail à faire sur le jeu
- Ajouter des balles qui rebondissent dans votre exemple de la tête animée. Ici le jsbin avec la pseudo-classe Ball : http://jsbin.com/waqewe/edit?js,output
- Pouvoir régler le nombre de balles dans l'exemple, avec un slider
- Réfléchir à comment on peut en faire un jeu.
Pour ceux qui veulent :
- reprendre l'exemple avec la vidéo de foot et les flèches et faire une pseudo-classe "flèches" similaire aux balles, pour créer des flèches, etc.
- Ajouter un écouteur sur la video pour l'événement timeupdate, récupérer le temps courant et le temps total de la vidéo. Dessiner dans le canvas un rectangle qui grandit faisant office de barre de progression.
- Réfléchir à comment, dans cet écouteur, on pourra déclencher l'affichage ou la disparition de flèches dessinées, en fonction des attributs de chaque flèche, notamment le temps à partir duquel une flèche doit être affichée et sa disparition.
ICI CVs que je vous ai montrés en classe :
- http://edouardg.fr/
- http://www.pas-sages.org/_preview/ma.../timeline.html (marche que sous firefox)
Mon simulateur d'ampli guitare : https://mainline.i3s.unice.fr/AmpSim3/
Séance du vendredi
Exemple d'obstacles générés en bas du canvas + comment implémenter le contrôle d'un petit bonhomme (detecter sur quel obstacle il tombe, accélérations verticale avec la barre d'espace) : http://jsbin.com/bulume/edit?js,console,output
Travail à rendre pour le dimanche 27/11 au soir :
- reprendre l'exemple de la tête, et essayer de le modifier pour en faire un petit jeu:
- mettez des balles rouges et des balles vertes (ajouter une propriété aux balles et quand vous les créez utiliser un Math.random() pour en générer des vertes et des rouges)
- On contrôle le monste avec les touches du clavier pour le déplacer (voir dans le MOOC si vous n'arrivez pas à le faire)
- Vous pouvez utiliser les fonctions suivantes pour détecter des collisions (elles sont aussi présentées dans le MOOC HTML5 part 2, dans la semaine 2 sur l'écriture de jeux HTML5), pour détecter des collisions. Essayez de faire en sorte que si on touche des balles rouges on meure, alors que les balles vertes rapportent des points.
Autre sujet possible : faites ce que vous voulez avec l'exemple du moment que vous faites quelque chose d'original et de personnel. Peu importe que ce soit un jeu ou juste des animations, je veux que vous fassiez du JavaScript !!!
Ne me refilez pas un truc pris sur le Web ou sur des étudiants de l'an dernier -> zéro assuré si je m'en aperçois, vous n'apprenez rien et ça me fait perdre du temps !
Les fonctions pour tester des collisions sont ici :
- function circleCollide(x1, y1, r1, x2, y2, r2) {
- var dx = x1 - x2;
- var dy = y1 - y2;
- return ((dx * dx + dy * dy) < (r1 + r2)*(r1+r2));
- }
- / Collisions between aligned rectangles
- function rectsOverlap(x1, y1, w1, h1, x2, y2, w2, h2){
-
- if ((x1 > (x2 + w2)) || ((x1 + w1) < x2))
- return false; // No horizontal axis projection overlap
-
- if ((y1 > (y2 + h2)) || ((y1 + h1) < y2))
- return false; // No vertical axis projection overlap
-
- return true; // If previous tests failed, then both axis projections
- // overlap and the rectangles intersect
- }
- // Collisions between rectangle and circle
- function circRectsOverlap(x0, y0, w0, h0, cx, cy, r) {
- var testX=cx;
- var testY=cy;
-
- if (testX < x0) testX=x0;
- if (testX > (x0+w0)) testX=(x0+w0);
- if (testY < y0) testY=y0;
- if (testY > (y0+h0)) testY=(y0+h0);
-
- return (((cx-testX)*(cx-testX)+(cy-testY)*(cy-testY))< r*r);
- }
|
Vous n'êtes pas connecté. Connexion