Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 08:34, 18 Mar 2013 par MichelBuffa
0

HTML5 pour la L3 Pro (2013)

De $1

  1. 1. Introduction
  2. 2. Séance 1: présentation de HTML5 en 3h. Etude d'exemples interactifs.
    1. 2.1. Ressources utilisées en cours:
    2. 2.2. Autres cours intéressants pour vous:
      1. 2.2.1. JavaScript/jQuery
      2. 2.2.2. CSS
    3. 2.3.  Ressources externes diverses
    4. 2.4. Démos montrées en cours:
  3. 3. Séance 2: étude des WebSockets et du canvas HTML5
    1. 3.1. TP: ecriture d'un logiciel de chat, étude d'un paint multi-participants
  4. 4. Séance 3: On commence à écrire un petit jeu en mono participant
    1. 4.1. Séance 4 : ajout de l'aspect multi-participants au jeu, du son et de la musique

Introduction

Nous avons 4 séances de trois heures pendant lesquelles vous allez développer une application multi-participants mettant en oeuvre des parties du nouveau standard HTML5 comme le canvas ou les web sockets.

Séance 1: présentation de HTML5 en 3h. Etude d'exemples interactifs.

Pendant cette séance nous avons survolé HTML5 et présenté rapidement à l'aide de démonstrations et d'exemples ses principales caractéristiques.

Ressources utilisées en cours:

Autres cours intéressants pour vous:

JavaScript/jQuery

  • Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
  • Transparents powerpoint sur jQuery : jquery.ppt et aussi la présentation interactive de John Resig, auteur de jQuery :  http://ejohn.org/blog/spring-2010-jquery-talks/ , la première "introduction to jQuery" est très bien pour un premier contact avec cette librairie.
  • N'oubliez pas d'aller faire un tour sur la page : Ressources JQuery que j'ai préparée à votre attention et qui contient de nombreuses ressources intéressantes au sujet de cette librairie (tutorials, transparents, livres, etc). Je recommande à 200% d'imprimer ou d'avoir sous la main les "jQuery chart sheets", des images qui résument en un coup d'oeil toute la librairie. 
  • La page officielle avec la doc de jQuery (exemples interactifs) :  http://api.jquery.com/

CSS

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

 Ressources externes diverses

Démos montrées en cours:

 

Séance 2: étude des WebSockets et du canvas HTML5

Nous préparons le terrain pour un jeu multi-participants utilisant les Web Sockets.

Le cours détaille le canvas de HTML5 et l'utilisation des web sockets. Le support de cours PDF est à venir.

Ressources externes

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

 

Séance 3: On commence à écrire un petit jeu en mono participant

Le jeu est très simple: dans un canvas on dirige à la souris (ou avec les flèches du clavier) un joueur représenté pour le moment par un carré noir. Dans le canvas il y a des obstacles rectangulaires qu'il faut éviter et une cible circulaire qu'il faut atteindre. C'est un jeu de course. Lorsque le jeu sera multi-participants, c'est le premier qui atteint la cible qui gagne et on passe au niveau suivant, avec une configuration et des obstacles différents. Peut-être aussi avec des ennemis à éviter qui peuvent vous tuer avant d'atteindre la cible.

On fournit ici un squelette JavaScript (en mode mono joueur) très incomplet, mais qui possède les fonctionalités de base: http://jsbin.com/acohiv/8/edit

Snap1.jpg

Regardez ce code. Il contient des fonctions de detection de collision entre rectangles, et entre un rectangle et un cercle, qui sont utilisées pour tester si un joueur a buté sur un obstacle ou s'il a atteint la cible. Bougez le joueur a la souris et regardez les couleurs qui changent en fonction des collisions.

Il y a encore beaucoup de travail sur ce petit squelette. On aimerait ne pas avoir les obstacles codés en dur, mais une liste d'obstacles. On voudrait tester les collisions non pas avec un mais avec plusieurs obstacles, et aussi tester pour tous plusieurs joueurs (donc, gérer les joueurs dans un tableau ou une liste). On voudrait avoir plusieurs niveaux, soit aléatoires (plus dur) soit prédéfinis. On voudrait un score, un timer 1-2-3 partez, etc.

Il faut probablement une boucle d'animation (voir la partie HTML5 sur requestAnimationFrame pour faire une véritable animation), de la musique, etc.

Voici une version améliorée incluant : boucle d'animation et gestion des touches: http://jsbin.com/acohiv/30 et ici une version avec des obstacles animés dans un tableau : http://jsbin.com/acohiv/71

Travail à faire:

  • Pendant deux heures: vous approprier ce petit squelette, commencez à en faire un jeu.
  • Dernière heure: branchez le chat dessus et essayez de transmettre la position du joueur aux autres joueurs.
  • On a opté pour un design "minimal côté serveur" cette fois ci...

RAPPEL : ce TP est à rendre le 12/03/2013, toutes les absences non justifiées par un certificat médical et les tps non rendus de la séance précédente ont zéro. Chaque TP compte pour 20% de la note finale.

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#!

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.

 

 
Powered by MindTouch Deki Open Source Edition v.8.08