Développer un jeu de puzzle sur mobile avec MIT App Inventor

Plan de tutoriel

1- Principe de jeu de puzzle

2- Objective de l'application mobile de puzzle

3- Interface graphique de l'application mobile

4- Programmer l'application mobile

Principe de jeu de puzzle

Le jeu de puzzle consiste à reconstituer une image découpée en plusieurs pièces mélangées.

Au lancement, l’image choisie est divisée en cases (par exemple 3×3 ou 4×4) et les pièces sont placées de manière aléatoire sur l’écran.

Le joueur doit déplacer ou échanger les pièces pour remettre l’image dans son ordre correct.

La partie se termine lorsque toutes les pièces sont correctement positionnées, et un message de victoire ou un score est affiché.

Ce type de jeu développe l’observation, la mémoire visuelle et la logique.

Voici une description détaillée du principe d’un jeu de puzzle, adaptée pour un tutoriel MIT App Inventor :

1- Mise en place :

Une image de départ est choisie (photo, illustration, dessin).

L’image est découpée virtuellement en plusieurs parties égales (par exemple : 3×3 = 9 pièces, 4×4 = 16 pièces).

Ces pièces sont mélangées et affichées dans un ordre aléatoire sur l’écran du jeu.

2- Déroulement de la partie :

Le joueur peut cliquer/toucher deux pièces pour les échanger ou déplacer une pièce vers un emplacement vide (selon le type de puzzle choisi).

Après chaque mouvement, l’application vérifie si toutes les pièces sont à leur position correcte.

Une minuterie ou un compteur de mouvements peut être utilisé pour mesurer la performance du joueur.

3- Fin de la partie :

La partie est gagnée lorsque toutes les pièces sont bien placées pour reformer l’image initiale.

Un message de félicitations s’affiche, éventuellement avec le temps écoulé et/ou le nombre de coups utilisés.

Le joueur peut relancer une partie avec un nouveau mélange des pièces.

4- Éléments interactifs possibles :

Choix du niveau (taille de la grille : facile, moyen, difficile).

Musique et effets sonores pour rendre le jeu plus attractif.

Système de score basé sur le temps ou le nombre de mouvements.

Objective de l'application mobile de puzzle

L’application mobile a pour objectif de proposer un jeu de puzzle interactif dans lequel l’utilisateur doit reconstituer une image complète.

Chaque pièce du puzzle est représentée par une image individuelle.

Lorsqu’un joueur touche une pièce, celle-ci change d’image afin de passer à la partie suivante de l’image originale ou à une variante préconfigurée.

Le joueur doit toucher les pièces dans le bon ordre pour que, progressivement, toutes affichent la bonne image et forment l’image finale correcte.

L’objectif final pour le joueur est donc de modifier toutes les pièces en affichant leur bonne image de façon à reconstituer l’image initiale du puzzle et terminer la partie.

Interface graphique de l'application mobile

L’interface graphique est la partie visible de l’application qui permet au joueur d’interagir avec le jeu.

Elle a pour rôle de :

- Afficher le contenu visuel du puzzle

- Présenter les pièces mélangées sur l’écran.

- Reproduire fidèlement l’image originale lorsque le puzzle est complété.

- Utiliser un composant adapté (ex. : Canvas, ImageSprite) pour gérer les pièces et leur position.

- Permettre l’interaction avec le joueur

- Détecter les clics des pièces pour les changer.

Voici une description détaillée des composants de l’interface graphique d’un jeu de puzzle créé avec MIT App Inventor.

Arrangement_Tableau

Sert à organiser visuellement les 4 boutons représentant les pièces du puzzle.

Permet de créer une grille ( 2 lignes × 2 colonnes) pour un affichage clair et ordonné des pièces.

Garantit que chaque pièce reste bien alignée, même sur différents formats d’écran.

Boutons (4 pièces du puzzle)

Chaque bouton représente une pièce du puzzle.

L’image d’arrière-plan du bouton change lorsque le joueur le touche, pour afficher la partie correcte de l’image finale.

Les boutons sont placés à l’intérieur de l’Arrangement_Tableau.

Peuvent aussi réagir à plusieurs clics pour passer par différentes images si nécessaire.

Notificateur

Sert à afficher des messages contextuels ou des instructions au joueur.

Utilisé pour annoncer le début du jeu, donner des indices ou féliciter le joueur à la fin de la phase.

Permet d’afficher des alertes plus visuelles que de simples Labels.

Horloge

Sert à gérer le passage automatique à la deuxième phase après un certain temps ou après la complétion de la première phase.

Etre déclenchée lorsque toutes les pièces sont correctement affichées.

Créer un délai entre un message de félicitations et le lancement de la phase suivante.

Programmer l'application mobile

La partie blocs est la section qui contient la logique de fonctionnement du jeu.

Elle transforme l’interface graphique (boutons, arrangements, notificateur, clock…) en un jeu interactif en définissant ce qui se passe lorsque l’utilisateur agit sur l’application.

Programme de l'application jeu de Puzzle

Explication du programme

1) Variable de numéro_puzzle1

La variable numero_puzzle1 sert à mémoriser l’état actuel d’affichage de la pièce parmi les 4 pièces du puzzle pour le premier bouton.

1 → première pièce

2 → deuxième pièce

3 → troisième pièce

4 → quatrième pièce

2) Variable de numéro_puzzle2

La variable numero_puzzle2 sert à mémoriser l’état actuel d’affichage de la pièce parmi les 4 pièces du puzzle pour le deuxième bouton.

3) Variable de numéro_puzzle3

La variable numero_puzzle3 sert à mémoriser l’état actuel d’affichage de la pièce parmi les 4 pièces du puzzle pour le troisième bouton.

4) Variable de numéro_puzzle4

La variable numero_puzzle4 sert à mémoriser l’état actuel d’affichage de la pièce parmi les 4 pièces du puzzle pour le quatrième bouton.

5) Procédure test_puzzle

La procédure test_puzzle vérifie si toutes les pièces sont correctement placées en utilisant une série de conditions if qui comparent les variables aux valeurs correctes.

Si toutes les pièces sont correctement placées, la procédure utilise le composant Notificateur pour afficher un message clair au joueur, par exemple : "Bravo !!! Puzzles bien placés".

6) quand puzzle1.Clic

À chaque clic sur le bouton puzzle1, le programme fait changer l’image affichée sur ce bouton.

Cela se fait généralement en faisant cycler un compteur ou une variable (par exemple numero_puzzle1) qui détermine quelle image parmi les 4 pièces doit apparaître.

Ainsi, à chaque clic, la pièce visible avance dans la séquence des images possibles, permettant au joueur de sélectionner la bonne partie du puzzle.

Appeler la procédure test_puzzle

Après avoir changé l’image, l’événement appelle la procédure test_puzzle.

Cette procédure vérifie si toutes les pièces (boutons) affichent la bonne image, c’est-à-dire si le puzzle est complété.

Cela permet de contrôler la progression du jeu en temps réel, à chaque action du joueur.

7) quand puzzle2.Clic

À chaque clic sur le bouton puzzle2, le programme fait changer l’image affichée sur ce bouton.

Cela se fait généralement en faisant cycler un compteur ou une variable (par exemple numero_puzzle2) qui détermine quelle image parmi les 4 pièces doit apparaître.

Ainsi, à chaque clic, la pièce visible avance dans la séquence des images possibles, permettant au joueur de sélectionner la bonne partie du puzzle.

Appeler la procédure test_puzzle

Après avoir changé l’image, l’événement appelle la procédure test_puzzle.

Cette procédure vérifie si toutes les pièces (boutons) affichent la bonne image, c’est-à-dire si le puzzle est complété.

Cela permet de contrôler la progression du jeu en temps réel, à chaque action du joueur.

8) quand puzzle3.Clic

À chaque clic sur le bouton puzzle1, le programme fait changer l’image affichée sur ce bouton.

Cela se fait généralement en faisant cycler un compteur ou une variable (numero_puzzle3) qui détermine quelle image parmi les 4 pièces doit apparaître.

Ainsi, à chaque clic, la pièce visible avance dans la séquence des images possibles, permettant au joueur de sélectionner la bonne partie du puzzle.

Appeler la procédure test_puzzle

Après avoir changé l’image, l’événement appelle la procédure test_puzzle.

Cette procédure vérifie si toutes les pièces (boutons) affichent la bonne image, c’est-à-dire si le puzzle est complété.

Cela permet de contrôler la progression du jeu en temps réel, à chaque action du joueur.

9) quand puzzle41.Clic

À chaque clic sur le bouton puzzle1, le programme fait changer l’image affichée sur ce bouton.

Cela se fait généralement en faisant cycler un compteur ou une variable (numero_puzzle4) qui détermine quelle image parmi les 4 pièces doit apparaître.

Ainsi, à chaque clic, la pièce visible avance dans la séquence des images possibles, permettant au joueur de sélectionner la bonne partie du puzzle.

Appeler la procédure test_puzzle

Après avoir changé l’image, l’événement appelle la procédure test_puzzle.

Cette procédure vérifie si toutes les pièces (boutons) affichent la bonne image, c’est-à-dire si le puzzle est complété.

Cela permet de contrôler la progression du jeu en temps réel, à chaque action du joueur.