HTML5 pour la L3 Pro (2013)

Ressources utilisées en cours:

• Transparents: http://slides.html5rocks.com/ et aussi ceux du tutorial que M.Buffa a présenté à la conférence WWW 2012.
• Exemples interactifs: http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial

Autres cours intéressants pour vous:

 Ressources externes diverses

• Dernière version de la spécification HTML5.1 : http://www.w3.org/TR/html51/ (si une version plus récente apparait, il y aura un lien en haut de la page)
• http://www.html5rocks.com/en/ : un des principaux sites de référence sur HTML
• http://caniuse.com/ : pour savoir quelles features de html5 sont implémentées sur les divers navigateurs
• http://w3schools.com/ : un site pour apprendre les technos web, pas toujours conformes aux bonnes pratiques mais intéressant.
• Page de ressources HTML5 compilée par Michel Buffa (pas forcément à jour)

Démos montrées en cours:

• Paint multiparticipants : http://paint.gexsoft.com/ et tutorial complet sur http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/Tutorial_WWW_2012
• Jeu de foot avec web sockets : http://dl.madjawa.net:8081/ (sources dispos sur la page)

TP: ecriture d'un logiciel de chat, étude d'un paint multi-participants

• TP WebSockets: écriture d'un programme de chat en HTML5

Séance 4 : ajout de l'aspect multi-participants au jeu, du son et de la musique

En vous inspirant des TPs sur le chat et sur le dessin multi-participants, on va avancer dans la réalisation de ce jeu.

Scénario :

• Au départ on suppose que le jeu de joue à deux (par la suite on pourra proposer un jeu avec un nombre variable de joueurs 2-n). Lorsque les deux joueurs sont connectés, la partie commence au niveau 1.
• On pourra par la suite afficher un timer (3-2-1 partez !)
• La partie démarre, le jeu dessine les obstacles et la cible, et les deux joueurs sont placés aléatoirement dans la partie gauche de l'écran. Ils doivent à l'aide des touches du clavier, atteindre le plus rapidement possible la cible.
• Le niveau se termine lorsque les deux joueurs ont atteint la cible. Le premier marque (n -1) points, le dernier 0 points, n est le nombre de joueur (à deux, le premier marque 1 point, le dernier zéro).
• On passe alors au niveau suivant.
• La partie se termine lorsque les niveaux sont finis et on affiche le score.

Pour tester, il vous faut procèder incrémentalement.

1. Le point bloquant est de voir le déplacement des deux joueurs sur l'écran en même temps. Il faut donc, via nowJS, transmettre sa position, et dessiner dans la boucle d'animation tous les joueurs.
2. Une fois que cette partie fonctionne, il vous faudra définir des événements dans le jeu : début de partie, joueur qui atteitn la cible, passage au niveau suivant, etc, afin que le jeu qui tourne dans les navigateurs des différents participants puisse être synchro avec les autres.

Mettre du son dans le jeu (musique, effets sonores)

Pour la musique de fond, le plus simple est d'utiliser le tag audio, comme vu en cours.

• Tutorial video sur youtube qui montre comment charger des effets sonores (lasers, etc) et les jouer quand on appuie sur certaines touches. La vidéo montre pas à pas les différentes étapes et le code qui va avec. regardez aussi la description de la vidéo, elle contient des liens vers d'autres ressources intéressantes : http://www.youtube.com/watch?feature...v=1wYTkZVQKzs#!

• Example simple qui charge un fichier depuis votre disque dur et le joue : http://html5-demos.appspot.com/stati..._and_play.html (tester avec des wavs comem ceux en bas de cette page), article explicatif ici : http://ericbidelman.tumblr.com/post/...-based-on-user
• Article très complet sur le son et la musique dans les jeux avec WebAudio API : http://www.html5rocks.com/en/tutoria...ebaudio/games/
• Charge un son en ajax et le joue : http://jsfiddle.net/thingsinjars/5gfB3/1/ (artcile explicatif : http://jsfiddle.net/thingsinjars/5gfB3/1/)
• http://developer.apple.com/library/s...ingSounds.html
• Jouer des sons depuis des "hover" css : http://css-tricks.com/web-audio-api-sound-on-hover/
• Exemple sympa qui charge une musique et anime en fonction de la musique : http://jsfiddle.net/mmanrique/vynvu/
• Un article qui contient une démo téléchargeable qui joue des sons inclus en base64 dans le code. Même pas besoin de les charger en ajax, ils sont déjà là ! En revanche, le chemin pour encoder les sons en base64, tel que proposé par l'auteur, est un peu compliqué. http://www.html5audio.org/2013/03/in...d-example.html, la démo est sympa : http://html5audio.org/examples/interactive-audio/

LE MINI PROJET SERA A RENDRE LE 2/4 (entre 8h30 et 10h), et donnera lieu à la note finale. Vous devrez rendre une archive portant le nom du binome, un document d'explications (comment installer, points forts, points faibles, screenshots), et vous devrez faire une démonstration et répondre à quelques questions.