Créer un jeu mobile voiture vs obstacles avec MIT App Inventor

Plan de tutoriel

1- Principe de jeu voiture

2- Objective de l'application mobile voiture

3- Interface graphique de l'application mobile

4- Programmer l'application mobile

Principe de jeu voiture

Le principe d’un jeu de voiture contre obstacles est un mécanisme de gameplay simple et dynamique, très courant dans les jeux mobiles ou les projets éducatifs.

Le joueur contrôle une voiture qui doit éviter les obstacles qui apparaissent ou défilent à l'écran. Le but est de survivre le plus longtemps possible ou de parcourir une certaine distance sans entrer en collision avec un obstacle.

Éléments du jeu

Voiture du joueur

Contrôlée par le joueur (tactile, flèches, joystick, accéléromètre, etc.)

Peut se déplacer latéralement (gauche/droite) ou verticalement (haut/bas) selon le type de jeu.

Obstacles

Apparaissent aléatoirement ou périodiquement.

Se déplacent vers la voiture (par exemple : de haut en bas).

Peuvent varier en forme, taille, vitesse, position.

Fond (route ou piste)

Peut être fixe ou défilant pour simuler un déplacement.

Score

Augmente avec le temps ou la distance parcourue.

Optionnellement, des bonus ou pièces peuvent être collectés.

Collision

Quand la voiture entre en contact avec un obstacle → Game Over.

Peut être gérée par un système de détection de chevauchement ou de coordonnées.

Bouton de redémarrage / Reset

Permet de rejouer après un crash.

Objective de l'application mobile voiture

L'objectif de l'application est de créer un jeu interactif dans lequel l'utilisateur contrôle une voiture pour éviter des obstacles qui apparaissent ou défilent à l'écran. Le joueur doit réagir rapidement pour éviter la collision et tenir le plus longtemps possible ou atteindre un score maximal.

Objectifs pédagogiques

Apprendre à utiliser les composants de MIT App Inventor (Canvas, ImageSprite, Horloge, Boutons, etc.)

Comprendre les mécanismes de jeu : déplacement, minuterie, détection de collision, gestion du score.

Développer des compétences en logique de programmation visuelle (événements, conditions, procédures).

Concevoir une interface utilisateur interactive et intuitive.

Créer une expérience de jeu simple mais engageante.

Objectifs fonctionnels du jeu

Contrôle de la voiture

Permettre au joueur de déplacer la voiture à gauche ou à droite (via boutons ou écran tactile).

Gestion des obstacles

Générer automatiquement des obstacles qui descendent sur la route.

Faire varier leur position ou leur vitesse pour augmenter la difficulté.

Détection de collision

Détecter si la voiture entre en collision avec un obstacle.

Afficher une image de crash et arrêter le jeu.

Réinitialisation du jeu

Permettre de relancer la partie avec un bouton "Reset" ou "Rejouer".

Interface graphique de l'application mobile

L’interface graphique  joue un rôle essentiel dans une application mobile car elle permet à l’utilisateur d’interagir avec le jeu de façon intuitive et visuelle.

L'interface est composée de plusieurs éléments visuels organisés pour créer une expérience de jeu claire, fonctionnelle et attrayante. Tous les composants sont disposés sur Screen1, en orientation Paysage (Landscape), avec l’écran centré.

Cadre (zone de jeu)

C'est le zone principale du jeu où la voiture se déplace et les obstacles apparaissent.

Image lutin (Voiture du joueur)

Il représente la voiture contrôlée par le joueur.

ImageSprite (voitures obstacles)

Il sont générés en haut du composant cadre et descendent vers le bas.

ImageSprite (Crash)

Il s’affiche en cas de collision.

Bouton Reset 

Ce bouton a pour rôle pour redémarrer le jeu.

Minuterie Horloge1 

Le composant Horloge1 permet de simuler le mouvement automatique de la route et la voiture obstacle.

Minuterie Horloge2

Le composant Horloge2 simule le mouvement vertical du deuxième obstacle (voiture qui descend du haut de l'écran).

Programmer l'application mobile

Dans MIT App Inventor, la partie "Blocs" est l'endroit où l’on programme le comportement de l'application.

C’est l’équivalent du code (mais en mode visuel, par blocs imbriqués).

La partie Blocs permet de définir les actions et réactions de l'application.

La partie Blocs est le cœur logique du jeu. Sans elle, l'interface graphique (Canvas, boutons, images) ne réagit à rien.

C’est grâce aux blocs que votre jeu devient vivant, interactif et intelligent.

Programme complet de l'application

Explication du programme

1- La procédure reset 

La procédure reset permet de réinitialiser complètement le jeu pour recommencer une nouvelle partie après un crash ou après avoir appuyé sur le bouton "Rejouer".

Elle remet tous les éléments du jeu dans leur état initial, exactement comme au début de la partie.

Elle active le chronomètre de l'Horloge1 pour simuler le mouvement automatique de la route et la voiture obstacle.

Elle active le chronomètre de l'Horloge2 pour arrêter le mouvement de la deuxième voiture obstacle.

Elle remet les obstacles en haut du Canvas, prêts à descendre à nouveau.

Elle active la voiture du joueur pour la rendre la voiture interactive et capable de se déplacer.

1- L'évènement reset.Clic

L’événement reset.Clic permet de relancer une nouvelle partie après un Game Over en appelant la procédure reset qui remet le jeu dans son état initial.

2- L'évènement Screen1.Initialise

L’événement Screen1.Initialize est exécuté automatiquement au démarrage de l’application, lorsque l’écran Screen1 est chargé.

Son rôle est de préparer et démarrer correctement le jeu dès l'ouverture de l'application, en appelant la procédure reset.

3- La variable position_obstacle1

La variable position_obstacle1 sert à attribuer une position horizontale aléatoire à la voiture obstacle 1, afin de :

- varier la position d’apparition de l’obstacle sur le Cadre

- rendre le jeu plus dynamique et imprévisible

- augmenter la difficulté et l’intérêt du jeu en évitant que l’obstacle revienne toujours au même endroit.

4- La procédure générer_obstacle1

La procédure générer_obstacle1 a pour rôle de créer ou repositionner la voiture obstacle numéro 1 dans le jeu en lui assignant :

- une position horizontale aléatoire sur le composant Cadre.

- une position verticale de départ (généralement en haut ou hors de l’écran)

- éventuellement, une vitesse ou d’autres propriétés si nécessaire.

La procédure générer_obstacle1 va vérifier si l'ordonnée Y de la voiture obstacle1 dépasse 300.

Si c'est vrai : la voiture obstacle2 devient visible, et l'horloge2 s'active, déclenchant ainsi le mouvement de la deuxième voiture obstacle.

La procédure générer_obstacle1 fait avancer la voiture obstacle1 du haut vers le bas en augmentant sa position Y seulement si elle ne dépasse pas 600.

Si la position Y dépasse 600, on attribue une position X aléatoire pour :

- varier le couloir de réapparition de la voiture obstacle1.

- positionner la voiture obstacle1 en haut (Y = 0).

- modifier dynamiquement l'image de obstacle1 pendant le jeu pour varier les obstacles.

5- La variable position_obstacle2

La variable position_obstacle2 sert à attribuer une position horizontale aléatoire à la voiture obstacle N°2, afin de :

- varier la position d’apparition de l’obstacle sur le Cadre

- rendre le jeu plus dynamique et imprévisible

- augmenter la difficulté et l’intérêt du jeu en évitant que l’obstacle revienne toujours au même endroit.

6- La procédure générer_obstacle2

La procédure générer_obstacle2 a pour rôle de créer ou repositionner la voiture obstacle numéro 2 dans le jeu.

La procédure générer_obstacle2 fait avancer la voiture obstacle N°2 du haut vers le bas en augmentant sa position Y seulement si elle ne dépasse pas 600.

Si la position Y dépasse 600, on attribue une position X aléatoire pour :

- varier le couloir de réapparition de la voiture obstacle N°2.

- positionner la voiture obstacle N°2 en haut (Y = 0).

- modifier dynamiquement l'image de la voiture obstacle N°2 pendant le jeu pour varier les obstacles.

7- L'évènement quand Horloge1.Chronomètre

À l'intérieur du bloc, insérer les blocs nécessaires pour

- faire défiler la route en alternant entre deux images : chemin_1.jpg et chemin_2.jpg.

- appeler la procédure générer_obstacle1 à chaque chronomètre pour déclencher la génération et le déplacement de la voiture obstacle N°1.

8- L'évènement quand Horloge2.Chronomètre

À l'intérieur du bloc quand Horloge2.Chronomètre, insérer la procédure génére_voiture2 pour déclencher la génération et le déplacement de la voiture obstacle N°2.

9- L'évènement quand voiture_joueur.Touché

Utiliser le bloc quand voiture_joueur.Touché pour permettre au joueur de changer la position X de la voiture en touchant l'écran.

c.a.d quand l'utilisateur touche la voiture (voiture_joueur), celle-ci change de position horizontale (abscisse X) pour simuler un déplacement gauche-droite.

10- L'évènement quand voiture_joueur.Collision

Insérer le bloc quand voiture_joueur.Collision pour gérer le crash entre la voiture du joueur et un obstacle.

A l'intérieur du ce bloc, on ajoute les blocs nécessaires pour :

1- afficher l'image crash juste au-dessus de la voiture du joueur

2- désactiver la voiture_joueur (la cacher)

3- désactiver Horloge1 (mouvement route et obstacle1)

4- désactiver Horloge2 (mouvement obstacle2)

5- afficher le bouton reset