Tutoriel – App Inventor – Space Invaders

Le design

Vous pouvez télécharger la fiche activité ici

Étape 1 : Ajouter une toile (Canvas)

Depuis la partie gauche Palette, allez dans Drawing and Animation, cliquer sur Canvas et déplacer le dans votre application. Nous allons paramétrer la toile, en allant dans la partie Properties tout à droite.
Mettez en noir la couleur de l’arrière-plan et changer la taille de cette manière :

Étape 2 : Ajouter deux images (ImageSprite)

Depuis la partie gauche Palette, allez dans Drawing and Animation, cliquer sur ImageSprite et déplacer le dans votre application. Puis, en dessous de Component, allez à Média et cliquer sur Upload File pour télécharger vos images. Nous avons téléchargé deux images : une fusée et un Alien libre de droit : taper ces deux objets dans pixabay.

Renommez les images dans Component et Rename. Celle de la fusée en Rocket et celle de l’Alien en Alien.

Paramétrez ensuite les tailles des images comme ci-contre :

Étape 3 : Ajouter une balle (Ball)

Depuis la partie gauche Palette, allez dans Drawing and Animation, cliquer sur Ball et déplacer le dans votre application. Mettez une couleur claire à votre balle, ici nous l’avons mis orange. Et changer le rayon : Radius en 8.

Étape 4 : Ajouter une disposition horizontale (HorizontalArrangement)

Depuis la partie gauche Palette, ajouter une disposition horizontale : HorizontalArrangement que vous trouverez dans Layout. Ce bouton va nous permettre d’insérer deux textes dedans. Il n’y a aucun changement à faire.

Étape 5 : Ajouter deux textes (Label)

Depuis la partie gauche Palette, ajouter deux textes Label que vous insérer dans HorizontalArrangement.
Pour le Label 1, écrivez dans la partie Text, écrivez: Score : et pour le Label 2, écrivez dans la partie Text, 0.

Étape 6 : Ajouter un bouton cliquable (Button)

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

Étape 7 : Ajouter une horloge (Clock)

Depuis la partie gauche Palette, allez dans Sensors et ajoutez Clock. Dans Properties, définissez l’intervalle à 3000 :

Notre application devrait ressembler à cela :

Les composants 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.

Étape 1 : Déplacement de la fusée

Le premier bloc à créer permet de faire bouger votre fusée de droite à gauche en la touchant
tactilement sur votre écran :

Étape 2 : Programmation de la balle

Dans un premier temps, il faut que votre balle soit cachée quand vous commencer le jeu:

Étape 3 : Toucher l’Alien avec la balle

Nous devons rajouter un bloc qui permet à la balle de revenir ensuite vers la fusée pour qu’elle soit de nouveau tirée. Cette variable place la balle au peu au-dessus de la fusée. Ici nous déplaçons la balle à la moitié de la largeur de la fusée et à 20 millimetres au-dessus.
Puis, nous allons faire en sorte que la fusée tire une balle sur l’Alien, il faut donc rendre visible la balle et lui donner une trajectoire vers le haut lorsqu’on la tire :

Étape 4 : Ajouter un Score

Nous allons faire en sorte que lorsque la balle touche l’Alien, un point est gagné. Il faut aussi rajouter une ligne pour faire disparaître la balle quand l’Alien est touché. Ici, other est déjà predefine dans la fonction, il désigne tous les éléments qui peuvent entrer en collision avec la balle comme dans cet exemple l’Alien.
S’il y avait eu d’autres envahisseurs, ils seraient aussi pris en compte dans other.

Testez votre programme.

Étape 5 : Disparition de la balle

Vous avez peut-être remarqué que si vous manquez l’Alien, la balle se déplace vers le haut de l’écran et reste bloquée jusqu’à ce que vous réessayiez. Pour faire disparaître la balle quand elle frappe le bord supérieur de notre toile, nous allons entrer le bloc suivant:

Étape 6 : Changement de position de l’Alien

Nous allons rendre le jeu un peu plus difficile. Maintenant, quand la balle entre en collision avec l’Alien, nous allons modifier l’emplacement de l’Alien. Il gardera la même valeur Y, nous allons seulement changer le X pour éviter que l’Alien sorte de l’écran. On le place en fonction d’un nombre aléatoire entre l’épaisseur du tableau et l’épaisseur de l’Alien. Rajouter cette dernière ligne au bloc : When Ball1.Collided with (quand la balle entre en collision avec).

Autre difficulté, nous allons également changer la position de l’Alien lorsque la minuterie se
déclenche.

Étape 7 : 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 d’Aliens
• Mettre un chronomètre
• Rajouter des balles
• Donner des munitions aux Aliens et perte de vie si la fusée est touchée
• Créer des objets bonus et malus
• Cacher certains Aliens

Annexe