DUREE NIVEAU PUBLIC ACTIVITES
Programmation
30 min Intermédiaire adolescent – adulte
d’un jeu
FICHE D’ACTIVITE APP INVENTOR
Objectifs :
Nous allons réaliser une application Space Invaders
pour appareil Androïd. Le principe est de toucher
l’Alien avec votre fusée en le touchant avec la balle
pour gagner un maximum de points.
Commencez par vous connecter à App Inventor,
créez un nouveau projet, et appelez-le « Space
Invaders ».
Pré-requis :
Connaître les bases d’App Inventor
Avoir un appareil Androïd (attention
certaines tablettes ne sont pas équipées de
capteurs).
Avoir un compte Gmail.
Compétences / Composants
abordés :
- Collisions
- Mathématiques
- ImageSprite
- Clock
1
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
Partie I : Le design
É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.
2
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
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.
3
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
É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.
4
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
É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 :
5
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
Votre application devrait ressembler à cela :
Les composantes de votre application
6
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
Partie II : 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.
7
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
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 l’a 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.
Tester 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:
8
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
É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. :
9
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
Partie III : 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
Partie V : Annexe
Nom du bloc Où le trouver ?
When Rocket.Dragged
When Rocket.Touched
Set Rocket.X to
Rocket
Set Rocket.Y to
Set Rocket.Width to
Chiffre
Math
Le -, le + et le /
False / True Logic
When Screen1.Initialize Screen 1
10
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
Get currentX Cliquez sur le bouton “Get currentX” du bloc
“When Rocket.Dragged”
When Ball1.EdgeReached do
When Ball.CollidedWith do
Set Ball1.Visible to
Ball 1
Set Ball1.Speed to
Set Ball1.Heading to
Call Ball1.MoveTo X, Y
When Clock1.Timer Clock 1
Set Alien.X to
Alien
Alien.Width
When ResetButton.Click do ResetButton
Set Label2.Text to
Label 2
Label2.Text
Canvas1.Width Canvas 1
11
WWW.VOYAGEURSDUCODE.FR – Ludivine Perard -
