Devoir 3 - Les événements

Les sept nains... Randonnée magique dans la forêt des événements.

Mise en contexte ultra-réaliste

Disney fait appel à vos services afin de développer son nouveau jeu Web portant sur Blanche-Neige et les sept nains. Avant de vous engager, on vous demande un échantillon de vos capacités en termes d'animation dans une page Web.

La tâche

Pour cette mission, vous n'avez pas le choix de l'événement qui fait réagir chaque nain. Vous devez suivre les indications ci-dessous. Par contre, la réaction du nain à l'événement est libre à vous. Un effet aléatoire est toujours le bienvenu. Plus les réactions seront créatives et élégantes, plus vous serez récompensé. Vous pouvez vous référer aux notes de cours sur les événements.

Les nains et leurs événements

1. Prof : Réagit à l'arrivée et également au départ de la souris. Dans l'exemple, Prof fait changer la couleur du fond du body. Au départ de la souris, le fond redevient normal.
2. Joyeux : Réagit au clic de la souris sur lui. Dans l'exemple, il démarre une animation qui le fait danser. Un autre clic et Joyeux prend une pause.
3. Dormeur : Réagit à l'événement que vous voulez. Dans l'exemple, on change son image lorsqu'il est cliqué. On a le choix entre une petite, une moyenne et une grosse image.
4. Timide : Réagit au déplacement de la souris sur lui. Dans l'exemple, il se déplace aléatoirement à l'aide du CSS transform.
5. Atchoum : Réagit au double-clic de la souris sur lui. Dans l'exemple, il exécute une animation qui le propulse hors de l'écran. Lorsque l'animation est terminée, il reprend son état normal.
6. Simplet : Réagit au clic de la souris sur lui, mais seulement si la touche SHIFT est enfoncée. Dans l'exemple, il change la couleur du texte derrière lui.
7. Grincheux : Réagit lorsque la touche espace est enfoncée. Dans l'exemple, il devient encadré d'une boite d'ombre.

Quelques réactions possibles

• Changer la couleur d'un élément de la page (body, texte...).
• Appliquer une transformation CSS au personnage (scale, rotate, translate...).
• Activer ou désactiver une animation CSS. Pour des explications sur les animations vous pouvez demander au professeur.
• Changer la position du personnage à l'aide de top et left.
• Changer l'image du personnage pour une autre image.
• Faire disparaître un personnage... et réapparaître après un certain temps.
• ...

Remise

1. Travail individuel.
2. Durée : une semaine et un jour après réception.
3. Compte pour 5% ou 10% en fonction du nombre de travaux divers accumulés dans la session.
4. Renommer le dossier NOMP0123456_devoir3 AVANT de le zipper et de le remettre sur remise.cstj.qc.ca.