Tutoriel – App Inventor : écrase taupe

But

Nous allons réaliser une application dont le principe est de gagner un maximum de point en touchant une taupe qui bouge aléatoirement sur l’écran.
Commencez par vous connecter à App Inventor, créez un nouveau projet, et appelez-le  » Ecrase Taupe « .

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

Le design

Etape 1 : Ajouter une toile (Canvas)

Depuis la partie gauche Palette, allez dans Drawing and Animation, cliquer sur Canvas et faites le glisser. Nous allons paramétrer la toile, en allant dans la partie Properties tout à droite. Changer la taille de cette manière :

Etape 2 : Ajouter une image (ImageSprite)

Depuis la partie gauche Palette, allez dans Drawing and Animation, cliquez sur ImageSprite et faites le glisser dans Canvas. Puis, en dessous de Components, allez à Media et cliquez sur Upload File pour télécharger votre image. Nous avons téléchargé une image de taupe libre de droit :
https://pixabay.com/fr/des-animaux-taupe-souterraines-158236/.

Paramétrez ensuite la taille de l’image et l’intervalle à 500 et renommez-là « Mole » pour cela dans la fenêtre « Components » cliquez sur « Rename » :

Etape 3 : Ajouter un texte (Label)

Depuis la partie gauche Palette, allez dans User Interface et ajoutez un texte Label à votre application.

Dans Components, renommez le ScoreLabel et dans Properties, puis dans la partie Text, écrivez:

Score : …

Etape 4 : Ajouter un bouton cliquable (Button)

Depuis la partie gauche Palette, allez dans User Interface et ajoutez un bouton cliquable (Button) à votre application. Dans Components, renommez le ResertButton et dans Properties, et dans la partie Text, écrivez: Reset. Lorsque l’utilisateur appuiera dessus, le score se réinitialisera à 0.

Etape 5 : Ajouter du son (Sound)

Depuis la partie gauche Palette, allez dans Media et ajoutez Sound que vous renommez Noise. Dans Properties, changez l’intervalle à 500 :

Etape 6 : Ajouter une horloge (Clock)

Depuis la partie gauche Palette, allez dans Sensors et ajoutez Clock que vous renommez MoleTimer.
Dans Properties, définissez l’intervalle à 500 :

Votre application devrait ressembler à cela :

Les composantes de votre application :

La programmation

Nous allons maintenant programmer le dessin. Rendez-vous dans la partie Blocks.

Si vous ne trouvez pas un des blocs utiles, n’hésitez pas à consulter l’annexe.

Etape 1 : Faire bouger votre taupe

Le premier bloc à créer permet de faire bouger votre taupe aléatoirement sur votre écran:

On fixe (set) les positions horizontale (Mole.X) et verticale (Mole.Y) de la taupe à des nombres aléatoires compris entre 0 et la taille de l’écran. On soustrait la taille de la taupe pour éviter que l’image de la taupe ne soit pas
affichée entièrement.

Etape 2 : Créer le score

Ce bloc permet de mettre votre score à zéro. Le second bloc met le score à jour automatiquement :

Etape 3 : Ajouter l’horloge

Nous allons ajouter un bloc pour mettre la taupe en mouvement indéfiniment :

Vous vous souvenez de “Interval” que nous vous avons fait changer ? C’est ici que cela sert,
moleTimer.timer appelle le chrono chaque “Interval” milliseconds. Donc ici, la taupe bouge toutes les 500 milisecondes (0.5 secondes).

Etape 4 : Ajouter une prise en compte du tactile

Nous allons faire en sorte que quand on touche la taupe, l’écran se met à vibrer et on gagne un point:

Etape 5 : Réinitialiser le score à zéro

Ce bloc va permettre de remettre le score à zéro quand on appuie sur reset. :

Aller plus loin

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

• Encore plus de taupes
• Mettre un chronomètre
• Mettre un arrière-plan
• Mettre d’autres animaux et mettre un malus si on les touche
• Cacher certaines taupes

Annexe