Développer un jeu de mémoire avec MIT App Inventor

Plan de tutoriel

1- Présenter le jeu de mémoire

2- Objective de l'application mobile jeu de mémoire

3- Interface graphique de l'application mobile

4- Programmation de l'application mobile

Présenter le jeu de mémoire

Le jeu de mémoire, aussi appelé Memory ou jeu des paires, est un jeu classique dont le but est de retrouver les paires d’images identiques cachées derrière des cartes.

Le joueur retourne deux cartes à la fois :

si les images sont identiques, elles restent visibles ;

sinon, elles se retournent à nouveau, et le joueur doit mémoriser leur position pour les retrouver plus tard.

Ce jeu développe la concentration, l’observation et surtout la mémoire visuelle. Il peut être joué seul ou à plusieurs, et il est très populaire auprès des enfants, mais aussi utilisé dans des contextes pédagogiques ou de stimulation cognitive.

Dans ce tutoriel, nous allons apprendre à créer une version numérique du jeu de mémoire en utilisant MIT App Inventor, une plateforme de développement visuel permettant de créer des applications Android sans écrire de code complexe.

Souhaites-tu que j’ajoute une description de la version que tu es en train de créer avec MIT App Inventor (par exemple avec 6 cartes, un chronomètre, un bouton reset, etc.) ?

Objective de l'application mobile jeu de mémoire

L’objectif de cette application est de créer un jeu de mémoire interactif sur smartphone, dans lequel le joueur doit retrouver 3 paires d’images identiques parmi 6 cartes disposées face cachée.

Grâce à cette application réalisée avec MIT App Inventor, l’utilisateur pourra :

- cliquer sur une carte pour révéler son image.

- retrouver les paires correspondantes en mémorisant la position des images.

- réinitialiser la partie grâce à un bouton reset.

Ce projet permet d’apprendre à :

- Gérer l’affichage et le changement d’images sur des boutons.

- Utiliser des variables pour mémoriser les choix du joueur.

- Implémenter une logique de comparaison entre deux cartes.

- Créer une interface simple et ludique adaptée aux écrans tactiles.

Ce jeu favorise la mémoire visuelle, la logique et offre une expérience ludique tout en permettant de découvrir la programmation mobile sans coder en texte grâce à l’interface graphique de MIT App Inventor.

Interface graphique de l'application mobile

L’interface graphique (ou UI, pour User Interface) est la partie visible de l’application avec laquelle l’utilisateur interagit.

Dans le jeu de mémoire développé avec MIT App Inventor, l’interface graphique sert à :

1- Afficher les cartes du jeu :

Disposer les 6 boutons représentant les cartes face cachée.

Permettre à l’utilisateur de cliquer sur une carte pour révéler son image.

2- Montrer les images révélées

Afficher l’image correspondante quand le joueur appuie sur un bouton.

Masquer à nouveau l’image si les cartes sélectionnées ne sont pas identiques.

3- Réinitialiser le jeu

Fournir un bouton Reset pour recommencer une nouvelle partie.

L’interface graphique de notre application est composée des éléments suivants :

1. Arrangement_Tableau1 (TableArrangement)

C’est un composant qui permet d’organiser les éléments sous forme de tableau (grille).

Dans le jeu, il sert à disposer les 6 cartes sous forme de boutons.

Configuration :

Nombre de rangées : 2

Nombre de colonnes : 3

2- Les boutons des cartes (6 boutons)

Disposés en 2 rangées de 3 boutons pour former une grille.

Chaque bouton représente une carte face cachée.

Lorsqu’on clique sur un bouton, il affiche l’image associée.

3- Un bouton Reset

Placé en dessous de la grille des cartes.

Sert à réinitialiser la partie et remettre toutes les cartes face cachée.

4- Horloge (Clock) (Composant non visible)

Le composant Horloge est Placé dans l’application mais non visible à l’écran.

Il Sert à :

- Déclencher un délai avant de retourner les cartes si elles ne sont pas identiques.

- Laisser le temps au joueur de voir les images avant qu’elles se cachent à nouveau.

- Exemple : délai d’une seconde avant de masquer les cartes si elles ne correspondent pas.

Programmation de l'application mobile

La programmation dans MIT App Inventor se fait grâce à des blocs visuels qu’on assemble comme un puzzle.

Pour le jeu de mémoire, voici le principe du programme à implémenter :

1- Mélanger les cartes au démarrage.

2- Cliquer sur une carte → révéler son image.

3- Cliquer sur une deuxième carte → vérifier la correspondance.

4- Si identiques → laisser visibles.

→ Sinon → masquer après un délai.

→ Répéter jusqu’à trouver toutes les paires.

Programme complet du jeu mémoire :

Explication du programme

1. Création des variables

Bloc	Description
	Créer et initialiser une variable appelée "selected_image1" pour mémoriser quelle image a été sélectionnée en premier lorsque le joueur clique sur une carte.
	Créer et initialiser une variable nommée "selected_image2" qui servira à mémoriser quelle image a été sélectionnée en deuxième lorsque le joueur clique sur une deuxième carte.
	Créer et initialiser une variable nommée etat_clic qui servira à compter combien de cartes le joueur a déjà cliquées (0, 1 ou 2), afin de savoir quand vérifier si les cartes sont identiques.
	Créer une variable nommée liste_image_jeu pour contenir les noms de fichiers images que votre jeu utilisera.
	Créer une variable nommée "random_element" pour stocker un élément pris au hasard dans la liste d'images.
	Créer et initialiser une variable nommée index pour mémoriser la position (l'indice) d'une image dans ta liste des images.
	Créer et initialiser une variable nommée liste_image_jeu pour contenir les noms de fichiers images qui seront affichés sur les cartes.

2. Procédure creer_liste_images

La procédure "creer_liste_images" est utilisée pour contenir les images à utiliser dans le jeu mémoire.

Grâce à cette procédure, si tu souhaites changer les images du jeu ou le nombre de paires, il suffit de modifier la liste dans cette procédure sans toucher le reste du programme.

Cela rend ton code plus organisé, lisible et facile à maintenir.

2. Procédure reset_boutons

La procédure reset_boutons sert à réinitialiser le jeu pour permettre au joueur de commencer une nouvelle partie.

Elle replace l’image de dos sur chaque bouton du jeu (l’image “image_vide.jpg”).

Toutes les cartes apparaissent identiques et cachent leur contenu.

3. Procédure activer_boutons

La procédure activer_boutons sert à rendre cliquables tous les boutons représentant les cartes du jeu.

Elle remet la propriété Avtivé de chaque bouton sur vrai. Ainsi, l’utilisateur peut cliquer à nouveau sur les cartes après un délai ou un reset.

4. Procédure créer

La procédure creer_liste_jeu sert à préparer la liste finale des cartes pour la partie de mémoire.

Elle récupère la liste des images (banane, fraise et orange).

Elle mélange aléatoirement la liste liste_jeu pour que les cartes ne soient jamais placées au même endroit à chaque partie.

Cette liste mélangée sera utilisée ensuite pour affecter chaque image à un bouton du jeu et savoir quelle image se cache derrière chaque bouton.

5. Procédure reset

La procédure reset initialise les deux variables :

- etat_clic qui sert à savoir si c'est le premier ou le deuxième clic

- liste_image_jeu pour créer la liste mélangée des images sur les cartes

La procédure reset appele les 4 procédures : creer_liste_images, creer_liste_jeu, reset_boutons et activer_boutons.

Il met Horloge1.ChronomètreActivé à faux, pour éviter que le timer agisse tant que le jeu n'est pas lancé.

6. Procédure test_image

La procédure test_image sert à vérifier si les deux images sélectionnées par le joueur sont identiques.

Elle vérifie si selected_image1 est égale à selected_image2 :

Si les images sont identiques → elles restent visibles (les cartes restent ouvertes).

Sinon → elles doivent être cachées à nouveau après un délai.

Si les images sont différentes, la procédure :

a- Active le composant Horloge (Clock).

b- Laisse les images affichées pendant un court moment (par exemple 1 seconde) pour que le joueur ait le temps de les voir.

c- Après le délai, les images sont cachées à nouveau (les boutons retrouvent l’image du dos de la carte).

7. Les blocs des évènements

Dans MIT App Inventor, les blocs d’événements permettent de réagir aux actions de l’utilisateur ou aux changements dans l’application.

Pour ton jeu de mémoire, les principaux événements utilisés sont :

Ce bloc a pour mission de préparer le jeu avant que le joueur commence à jouer. Il appelle la procédure reste pour initialiser tous les éléments essentiels.

Ce bloc se déclenche lorsque l’utilisateur clique sur le bouton Reset dans l’interface du jeu.

Il sert à relancer complètement la partie, en réinitialisant tout l’état du jeu.

Le bloc quand bouton1.Clic faire :

→ Affiche l’image cachée sous la première carte.

→ Enregistre la sélection dans une variable.

→ Appelle la procédure test_image après deux clics pour comparer les images.

Le bloc quand bouton2.Clic faire :

→ Affiche l’image cachée sous la deuxième carte.

→ Enregistre la sélection dans une variable.

→ Appelle la procédure test_image après deux clics pour comparer les images.

Le bloc quand bouton3.Clic faire :

→ Affiche l’image cachée sous la troisième carte.

→ Enregistre la sélection dans une variable.

→ Appelle la procédure test_image après deux clics pour comparer les images.

Le bloc quand bouton4.Clic faire :

→ Affiche l’image cachée sous la quatrième carte.

→ Enregistre la sélection dans une variable.

→ Appelle la procédure test_image après deux clics pour comparer les images.

Le bloc quand bouton5.Clic faire :

→ Affiche l’image cachée sous la cinquième carte.

→ Enregistre la sélection dans une variable.

→ Appelle la procédure test_image après deux clics pour comparer les images.

Le bloc quand bouton6.Clic faire :

→ Affiche l’image cachée sous la sixième carte.

→ Enregistre la sélection dans une variable.

→ Appelle la procédure test_image après deux clics pour comparer les images.