Tutoriel – App Inventor : pile ou face ?

Le design

Pour avoir accès à la fiche complète c’est par ici !

Etape 1 : Récupérer deux images (Media)

Allez dans Media (en bas à droite) et récupérez les images des deux faces d’une pièce.

Par exemple, vous pouvez prendre les pièces de :
https://en.wikipedia.org/wiki/Dollar_coin_(United_States) qui sont libres de droit.

Etape 2 : Paramétrer l’écran (Screen1)

Tout d’abord, occupons nous des paramètres de l’écran, en allant dans la partie Properties tout à droite.
Changez le titre de l’écran comme sur l’image :

Etape 3 : Ajouter une toile (Palette)

Depuis la partie gauche Palette et Drawing and Animations, ajouter une toile Canvas à votre
application. Dans la partie Properties, changez la taille de cette manière :

Etape 4 : Ajouter deux objets image (Palette)

Depuis la partie gauche Palette et Drawing and Animations, ajouter deux images (ImageSprite 1 et 2) à votre application. L’une contiendra Pile et l’autre Face.
Changez l’image de fond comme ci-contre. Superposez les deux images, retenez quelle image est visible.
Dans toute la suite, nous supposerons que l’image du dessus est Face et qu’il s’agit d’ImageSprite1.

 

Etape 5 : Ajouter une étiquette (Label)

Depuis la partie gauche Palette et User Interface, importez une étiquette (label). Changez son texte en “…”

Etape 6 : Ajouter une liste (Palette)

Allez dans Palette et User Interface et ajoutez une liste ListView. Ajoutez deux composantes Pile et Face comme sur l’image ci-contre :

Votre application devrait ressembler à cela :

 

Les composantes de votre application

La programmation

Nous allons maintenant programmer l’application. Rendez-vous dans la partie Blocks. Si vous ne trouvez pas un des blocs utiles, n’hésitez pas à consulter l’annexe.

Etape 1 : Paramétrer le lancer de pieèe

Comme tout bon programmeur qui se respecte, nous allons séparer nos actions et commencer par paramétrer le lancer de pièces, pour cela créez le bloc suivant. Cliquer sur le petit carré bleu de If/Then pour rajouter Else.

On crée une variable “test” dans laquelle on tire au hasard un nombre entre “0” et “1” (random integer tire un nombre entier au hasard). Si l’on obtient 0, on garde “Face” visible. Sinon ,on cache Face et on montrera donc l’image qui est en dessous : Pile. Donc, il y a bien une chance sur deux d’obtenir Face et une chance sur deux d’obtenir Pile.

Etape 2 : Gérer les possibilités

Maintenant que l’on a créé une procédure de lancer de pieces, il reste à gérer les possibilités.
L’utilisateur a cliqué sur Pile et la pièce est tombée sur Face ? Il a perdu. Il a cliqué sur Pile et Pile est apparu, il a gagné etc.

Nous allons créer les deux conditions de victoire :

• La premiere condition: si on choisit Face et que l’on tombe sur l’image 1, on gagne.

• La deuxième condiction : si on choisit Pile et que l’on ne tombe pas sur l’image 1, on
  gagne.

• On les insère ensuite dans un bloc OR pour valider la condition.

Si l’on résume, il y a quatre possibilités (on considère les couples Prédiction/Résultat):
a. Face/Face,
b. Face/Pile,
c. Pile/Face,
d. Pile/Pile

Et on crée donc quatre conditions. Quand un élément de la liste est sélectionné, si l’on est dans les situations a ou d, on gagne sinon on perd. Assurez-vous de bien comprendre ce bloc, si ImageSprite1 est visible cela signifie-t-il que la pièce est tombée sur Pile ou Face ? Reportez-vous au 1. de cette section pour vérifier.

Aller plus loin

Voici une liste (non exhaustive bien sûr) des améliorations possibles :

• Améliorer l’interface graphique.
•  Pouvoir faire des paris sur le résultat
• Faire un bouton secret qui rend la pièce truquée (elle tombe sur face tout le temps par exemple)
• Créer un dé à six faces (plus difficile surtout si l’on souhaite gérer les 6*6 = 36 cas possibles en cas de prédiction.

Annexe