====== J'attrape la balle de tennis ======

Pour **ramasser** la balle, il suffit de la faire **disparaître** dès que mon **personnage se trouve** sur la balle : 
  * en **cachant** la balle 
  * ou en la **déplaçant** à un autre endroit du terrain.

Voici les instructions que je peux utiliser :
^Pour^instruction^
|faire afficher une information dans la console \\ Variables|{{ :icn:labo_03.png?nolink |}}|
|cacher un objet \\  UI controls|{{ :icn:tennis_03.png?nolink |}}|
|déplacer un objet \\  UI controls|{{ :icn:tennis_05.png?nolink |}}|

===== Position et largeur de mon personnage et de la balle =====
<WRAP center round tip>

{{:icn:sketchup:zoommolette.png?nolink&100 |}} Utilise la **molette** de la souris et la touche **CTRL** pour faire un Zoom avant ou un** Zoom  arrière** afin de bien voir le tutoriel. 

</WRAP>

{{ :icn:tennis_detection.swf?840x520 |}}

===== Détecter que mon personnage attrape la balle =====
Pour **détecter** que mon personnage est sur la balle, j'utilise **l'algorithme** suivant en considérant que mon personnage et ma balle sont des rectangles : 
    * mon personnage à la position** x1 et y1** avec la largeur **L1 et la hauteur H1**,
    * ma balle à la position **x2 et y2** avec la largeur **L2 et la hauteur H2**.

<code>
si (x1 < x2 + L2 ET
    x1 + L1 > x2 ET
    y1 < y2 + H2 ET
    y1 + H1 > y2) 
alors 
    il y a collision et je cache ma balle !
fin si
</code>

==== Explication ====
{{ :icn:tennis_detection2.swf?840x520 |}}

==== Mon code ====

J'ajoute une condition pour cacher ma balle :
{{ :icn:tennis_collision_12.png?nolink&200 |}}

<WRAP center round tip>
Il est difficile d'écrire une condition complexe. J'utilise aors le mode texte :
{{ :icn:tennis_collision_13.png?nolink&200 |}}

Et je saisis le code suivant : 
<code javascript>
if (getXPosition("image_personnage") < (getXPosition("image_balle") + 50) &&
   (getXPosition("image_personnage") + 100) > getXPosition("image_balle") && 
   getYPosition("image_personnage") < (getYPosition("image_balle") + 50) &&
   (getYPosition("image_personnage") + 100) > getYPosition("image_balle")) {
    hideElement("image_balle");
  }
</code>

</WRAP>
Ce qui donne en affichant les blocs : 
{{ :icn:tennis_collision_14.png?nolink |}}


===== Faire apparaître la balle à un autre endroit =====
Au lieu de faire cacher la balle dès qu'elle est ramassée, je l'a fait **apparaître** à un autre endroit au **hasard**.

Pour faire placer la balle à un autre endroit j'utilise l'instruction **setPosition()** : 
{{ :icn:tennis_collision_15.png?nolink |}}

Pour obtenir un placement au **hasard** j'utilise l'instruction **randomNumber()** :
{{ :icn:tennis_collision_16.png?nolink |}}

  * la valeur de x de 0 à 320 - 50 (largeur de l'écran - la largeur de l'image),
  * la valeur de y de 0 à 450 - 50 (hauteur de l'écran - la hauteur de l'image),
  * je précise la largeur (50) et la hauteur (50) de l'image de la balle.



===== Gérer un score =====
Comme il est maintenant possible de déplacer la balle dans ton application, comptabilise combien de fois elle est ramassée  :
  * ajoute une étiquette pour afficher le nombre de balles ramassées.

==== Retour à l'activité : mon programme Tennis====
  * [[:icn:codetennis|Activité Code.org : mon programme Tennis]]