Jeu Mario sur mobile avec MIT App Inventor

Plan de tutoriel

1- Principe de jeu Mario

2- Objectif de notre jeu Mario mobile

3- Interface graphique de l'application mobile

4- Programmer l'application mobile

Principe de jeu Mario

Le jeu Mario est l’un des jeux vidéo de plateforme les plus célèbres créés par Nintendo. Le joueur incarne Mario, un petit plombier courageux, dont la mission principale est de parcourir différents mondes pour sauver la princesse Peach, souvent capturée par l’ennemi principal, Bowser.

Principe du jeu :

Mario progresse dans des niveaux à défilement horizontal.

Le joueur doit éviter les obstacles, sauter sur les plateformes, et vaincre les ennemis comme les Goombas et les Koopas.

En cours de route, Mario peut collecter des pièces, cogner des blocs pour obtenir des bonus (champignons pour grandir, fleurs de feu pour lancer des boules de feu, étoiles pour devenir invincible).

Chaque niveau doit être terminé en atteignant le drapeau de fin de parcours ou en battant un boss.

Objectif de notre jeu Mario mobile

L’objectif de notre jeu Mario mobile, conçu avec MIT App Inventor, est de permettre au joueur de diriger Mario dans un environnement interactif en utilisant des commandes simples sur l’écran tactile.

Le joueur doit faire sauter Mario pour franchir des obstacles .

Ce jeu a également pour objectif de montrer comment un jeu de type plateforme peut être conçu et programmé avec MIT App Inventor, en combinant logique de programmation par blocs, gestion des événements et animations.

Interface graphique de l'application mobile

L’interface graphique joue un rôle essentiel car elle constitue la partie visible et interactive du jeu pour l’utilisateur. Son rôle est de :

1- Afficher le personnage Mario, les obstacles et le décor.

2- Donner au joueur une vision claire et attractive de l’environnement de jeu.

3- Offrir une zone tactile pour déplacer Mario (saut).

4- Permettre au joueur d’interagir facilement avec le jeu via l’écran tactile.

L’interface graphique de notre jeu Mario, réalisée avec MIT App Inventor, est composée de plusieurs éléments interactifs et visuels qui assurent à la fois l’affichage du décor, l’animation des personnages et la gestion des interactions du joueur.

1- Composant Cadre

Le composant cadre Sert de zone principale du jeu.

C’est sur ce cadre que sont affichés et animés tous les éléments graphiques (Mario, obstacles et décor).

2- Images lutins

Mario : personnage principal contrôlé par le joueur.

Chemin : décor animé qui simule l’avancement du personnage.

Nuage : élément du ciel, donnant une impression de mouvement et de vie au décor.

Plante : élément décoratif ou obstacle animé.

Obstacle : barrière ou ennemi que Mario doit éviter ou franchir en sautant.

3- Horloges (minuteries)

Horloge_mario_marche : anime la marche de Mario.

Horloge_mario_haut : gère l’animation du saut de Mario.

Horloge_mario_bas : contrôle la descente après le saut.

Horloge_Obstacle : déplace les obstacles vers Mario.

Horloge_chemin : anime le chemin pour donner l’effet de défilement.

Horloge_paysage: anime le déplacement du nuage et de la plante pour enrichir le décor.

4- Bouton reset

Le bouton reset Permet de réinitialiser la partie.

Il replace Mario et les autres éléments dans leur position initiale.

Il sert également à relancer une nouvelle partie après un Game Over.

5- Composant Notificateur

Il affiche des messages pour informer le joueur (par exemple : "Game Over !").

Il améliore l’expérience utilisateur en donnant un retour clair des actions et de la progression du jeu.

Programmer l'application mobile

La partie blocs est la zone où l’on programme la logique du jeu en utilisant des blocs visuels (programmation par événements). Elle est complémentaire à l’interface graphique et permet de définir le comportement de tous les éléments du jeu.

la partie blocs transforme l’interface graphique en jeu interactif. Elle définit la logique, les règles, les actions et les réactions du jeu, permettant à Mario et aux autres éléments de se comporter comme dans un vrai jeu de plateforme.

Programme de l'application mobile Mario

Voici une explication complète et structurée du programme de l’application mobile Mario.

1- Procédure reset

La procédure Reset est essentielle pour initialiser ou relancer une partie du jeu. Elle permet de remettre tous les éléments et les animations dans un état cohérent afin que le joueur puisse commencer une nouvelle partie sans problème.

a. Activation et désactivation des horloges

Activer :

Horloge_Mario_Marche → anime la marche de Mario.

Horloge_Paysage → anime le défilement du décor (nuages, plantes…).

Horloge_Obstacle → anime le mouvement des obstacles vers Mario.

Horloge_Chemin → anime le défilement du chemin pour simuler le déplacement du personnage.

Désactiver :

Horloge_Mario_Haut → empêche Mario de continuer à sauter après le reset.

Horloge_Mario_Bas → empêche la descente automatique après le reset.

b. Remise en position initiale

Mario : repositionné à son point de départ pour que le joueur puisse recommencer.

Obstacles, décor et éléments du paysage : replacés à leurs positions initiales pour que le niveau soit prêt à nouveau.

c. Cacher le bouton Reset :

Le bouton n’est visible que lorsque le joueur perd ou termine la partie.

Après le reset, le bouton est caché pour ne pas gêner le jeu.

2- L'évènement Screen.initialise

L’événement Screen1.Initialize se déclenche automatiquement au lancement de l’application, dès que l’écran principal du jeu est chargé. Son rôle est de préparer le jeu pour que le joueur puisse commencer immédiatement dans un état cohérent.

Lors de l’initialisation, Screen1.Initialize appelle la procédure Reset.

3- L'évènement reset.Clic

L’événement reset.Click se déclenche lorsque le joueur appuie sur le bouton Reset. Son rôle principal est de relancer le jeu après une partie terminée ou un Game Over.

Lorsque le bouton Reset est cliqué, l’événement exécute la procédure Reset.

4- L'évènement Horloge_mario_marche.Chronomètre

L'horloge_mario_marche est un composant minuterie  qui s’active à intervalles réguliers. Son événement Chronomètre se déclenche automatiquement à chaque "tic" de la minuterie et sert à animer la marche de Mario.

À chaque déclenchement du Chronomètre, l’image de Mario est changée pour créer un effet de marche animée.

L'horloge_mario_marche permet d’avoir un déplacement fluide et réaliste lorsque Mario se déplace horizontalement.

5- L'évènement Horloge_mario_haut.Chronomètre

6- L'évènement Horloge_mario_bas.Chronomètre

7- L'évènement mario.Touché

8- L'évènement Horloge_chemin.Chronomètre

9- L'évènement Horloge_paysage.Chronomètre

10- L'évènement Horloge_obstacle.Chronomètre

11- L'évènement mario.Collsion