TP noté en séance(CC1)

Exercice : jeu de la recherche dichotomique

Le but de cet exercice est de réaliser un jeu de recherche de nombre similaire à l'exemple sur MDN. Quand on clique sur le bouton Lancer le jeu, un nombre est tiré au hasard. Ensuite on saisit un nombre et en cliquant sur Vérifier, le site nous indique si on a trouvé le bon nombre, si on est trop haut ou trop bas.

1. Complétez la fonction launchGame pour qu'elle prenne en compte la valeur de l'élément <input type="number" id="max-usr">, qu'elle ajoute un message à l'élément <code id="output"> et qu'elle rende le bouton <button id="guess-btn"> actif.
2. Ajoutez un handler au bouton <button id="guess-btn"> pour qu'il fasse la vérification et ajoute le message approprié à l'élément <code id="output">. Le bouton <button id="guess-btn"> sera désactivé à l'issue de la partie.
3. Ajoutez un handler à l'élément <input type="number" id="num-usr" /> pour que la vérification soit lancée dès qu'on appuie sur la touche Entrée, sans avoir besin de cliquer sur le bouton.
4. Enfin, ajoutez un nombre limite de coups pour trouver le nombre secret. La limite sera égale à Math.floor(Math.random() * NB_MAX) + 1; où NB_MAX est le nombre maximum possible saisi par l'utilsiateur.

Exercice : la vache qui tache

On va ajouter une nouvelle fonctionnalité à la page : à chaque clic de la souris dans la page, il faut ajouter cette image à la fin de la page. On utilise pour cela l'événement mousedown. Le bouton ci-dessous permet d'activer/désactiver cette fonctionnalité, son handler addCow est déjà prêt, complétez le.

Ensuite, faites en sorte que l'image soit ajoutée à l'endroit où l'utilisateur a cliqué. Pour cela, vous utiliserez la class CSS .cow et positionnerez l'image en utilisant les propriétés CSS left et top qui prendront des valeurs calculées à partir des attributs x et y de l'événement.

Enfin utilisez la propriété CSS transform pour faire tourner aléatoirement l'image.