scratch:morpion_step_06 [Fab Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<title>Morpion - Etape 6</title>

==== Ce qu'on veut faire ====

Ce que nous voulons faire, c'est que les lutins soient positionnés correctement au milieu des cases.

Pour cela, nous allons décomposer la grille en lignes et en colonnes.

Il y a donc 3 lignes, numérotées ''1'', ''2'' et ''3'' en commençant par le bas.

{{:scratch:lines.png|}}

On remarque que :
  * si ''y < -60'', alors on est dans la ligne ''1''
  * si ''y > -60'' et ''y < 60'', alors on est dans la ligne ''2''
  * si ''y > 60'', alors on est dans la ligne ''3''

On remarque également que :
  * si ''y = -120'', alors c'est le milieu de ligne ''1''
  * si ''y = 0'', alors c'est le milieu de la ligne ''2''
  * si ''y = 120'', alors c'est le milieu de la ligne ''3''

De la même manière, il y a donc 3 colonnes, numérotées ''1'', ''2'' et ''3'' en commençant par la gauche.

{{:scratch:columns.png|}}

On remarque que :
  * si ''x < -60'', alors on est dans la colonne ''1''
  * si ''x > -60'' et ''x < 60'', alors on est dans la colonne ''2''
  * si ''x > 60'', alors on est dans la colonne ''3''

On remarque également que :
  * si ''x = -120'', alors c'est le milieu de colonne ''1''
  * si ''x = 0'', alors c'est le milieu de la colonne ''2''
  * si ''x = 120'', alors c'est le milieu de la colonne ''3''

Ainsi :
  * une case correspond à l'intersection d'une ligne et d'une colonne
  * le milieu de cette case est l'intersection du milieu de la ligne et du milieu de la colonne
==== Ce qu'on doit faire ====

Nous allons commencer par créer 2 variables : ''ligne'' et ''colonne''.
Ces variables vont nous permettre de savoir dans quelle ligne et quelle colonne on a cliqué afin de positionner le lutin au bon endroit.

Il faut se rappeler ce que l'on a fait à l'étape précédente pour obtenir le résultat ci-dessous :

{{:scratch:pasted:20200227-164303.png}}

On souhaite identifier la ligne et la colonne avant de créer le clone. Donc, dans le script de la scène, il faut détacher l'élément ''créer un clone de Lutin_morpion'' :

{{:scratch:pasted:20200227-170129.png}}

Ensuite, il faut se rappeler ce que l'on a dit plus haut :
  * si ''y < -60'', alors on est dans la ligne ''1''
  * si ''y > -60'' et ''y < 60'', alors on est dans la ligne ''2''
  * si ''y > 60'', alors on est dans la ligne ''3''

Cela permet de construire le script ci-dessous :

{{:scratch:pasted:20200227-170420.png}}

Pour la colonne, ce sont exactement les mêmes type d'éléments qu'il faut utiliser. Donc, comme dans l'étape précédente, il faut dupliquer une partie du script puis remplacer ''souris y'' par ''souris x'' et ''ligne'' par ''colonne''. 

Finalement, on rattache l'élément ''créer un clone de Lutin_morpion'' et on obtient le script ci-dessous :

{{:scratch:pasted:20200227-170736.png}}

On peut tester en cliquant à différents endroits de la grille que les valeurs de ''ligne'' et ''colonne'' sont les bonnes.

Il reste à modifier le script du lutin pour le déplacer correctement en fonction de la ligne et de la colonne.

Il faut donc supprimer l'élément ''aller à x: ... y: ...'' :

{{:scratch:pasted:20200227-171202.png}}

Ensuite, il faut se rappeler ce qu'on a dit plus haut :
  * si ''y = -120'', alors c'est le milieu de ligne ''1''
  * si ''y = 0'', alors c'est le milieu de la ligne ''2''
  * si ''y = 120'', alors c'est le milieu de la ligne ''3''

Cela permet de construire le script ci-dessous :

{{:scratch:pasted:20200227-171615.png}}

De la même manière pour les colonnes :

{{:scratch:pasted:20200227-171822.png}}

C'est terminé !

[[scratch:morpion_step_05|Etape précédente]] [[scratch:morpion_step_07|Etape suivante]]