1

Aide Mimi à trouver de quoi manger

Nous allons créer ensemble un jeu, dans lequel tu vas aider une petite souris, Mimi, à trouver sa

nourriture dans un labyrinthe.

Prérequis

Pour créer le jeu nous allons utiliser Scratch.

A la maison : Tu peux le retrouver sur Internet : https://scratch.mit.edu

Ensuite tu cliques sur « Créer ».

Il te faudra également une image de labyrinthe.

Ici nous allons dessiner notre labyrinthe directement dans Scratch.

A la maison : Tu peux chercher une image sur internet ou bien utiliser un générateur

en ligne comme http://www.mazegenerator.net/ (en anglais)

Pour les parents : Pour reprendre le développement du jeu plus tard (ou pour

y rejouer) vous pouvez enregistrer le travail de votre enfant sur un compte en ligne Scratch ou sur

votre ordinateur, pour ensuite l’enregistrer sur une clef USB ou vous l’envoyer par e-mail :

o Fichier – Télécharger dans votre ordinateur : pour l’enregistrer

o Fichier – Importer depuis votre ordinateur : pour le réimporter

2

Créer le labyrinthe avec Scratch

Nous allons voir comment créer facilement un labyrinthe directement sur scratch.

- Pour cela clique sur l’icône de pinceau juste en dessous de la miniature de ton arrière-plan actuel

(un fond tout blanc)

- Un nouvel arrière-plan tout blanc apparaît dans la fenêtre d’édition

- En bas tu peux choisir la couleur que tu vas utiliser et l’épaisseur du trait. Ici nous allons utiliser du

noir

ATTENTION : N’utilise qu’une seule couleur pour ton labyrinthe et évite les fonds à motifs, sinon ton

jeu ne fonctionnera pas

- Avec la 3ème icône qui représente un rectangle trace 3 rectangles les uns dans les autres, avec assez

d’espace entre chaque, pour faire les allées du labyrinthe :

o Sélectionne l’icône

o Clique dans le coin en haut à gauche de la zone

de dessin

o Maintiens la souris cliquée

o Déplace la souris en diagonale

o Lâche le clic lorsque tu es satisfait(e) de ton

rectangle

o Clique dans la zone de dessin mais en dehors de

ton rectangle pour valider celui-ci

o Recommence pour les 2 rectangles suivants

- Avec la 7ème icône qui représente une gomme efface des

parties de tes 3 rectangles pour créer des portes :

o Sélectionne l’icône

o Règle la largeur de la gomme avec le petit curseur en bas

o Efface des zones pour créer des portes, il faut pouvoir aller

partout dans le labyrinthe

o Pense à créer une première porte au milieu du côté gauche du

grand rectangle

- Avec la 2ème icône qui représente un trait tu pourras tracer différentes lignes pour rendre ton

labyrinthe plus compliqué

o Clique à l’endroit où tu souhaites faire commencer ta ligne

o Maintiens la souris cliquée

o Déplace la souris pour tracer ta ligne

o Lâche le clic lorsque tu es satisfait(e)

o Recommence autant de fois qu’il faut pour terminer ton labyrinthe, sans avoir de zones

inaccessibles

Si tu as fait une erreur, utilise la flèche vers la gauche pour annuler ce que tu viens de faire.

3

Si tu trouves ton labyrinthe trop petit ou mal positionné, tu peux changer ça :

Quand tu as ton arrière-plan qui est entouré en bleu (on dit qu’il est sélectionné), dans la partie

de droite va dans l’onglet « Arrière-plans ».

Vérifie que c’est bien ton labyrinthe qui est sélectionné*

Clique sur l’image avec une main et un carré en pointillé (on appelle ça une icône)

Pour sélectionner ton labyrinthe :

o Clique un peu au-dessus du coin en haut à gauche

o Garde la souris cliquée

o Traverse-le en diagonale

o Lâche la souris lorsque ton labyrinthe est entouré d’un carré

A l’aide des petits carrés blancs à chaque coin, tu peux agrandir ton labyrinthe

A l’aide du rond vert au milieu, tu peux le déplacer

Si tu as utilisé un labyrinthe tout fait

4

Jeu principal

Mimi est dans le labyrinthe

- Tu peux supprimer le chat qui ne nous sera pas utile dans ce jeu : Clique avec le bouton droit de la

souris (on dit que l’on fait un clic-droit) sur le chat dans la zone des lutins (partie basse à gauche), puis

choisis « supprimer ».

Ou bien clique sur les ciseaux tout en haut, dans la barre grise, puis clique sur le chat : Il disparaît !

- On va ajouter la souris en tant que lutin :

o Dans la zone des lutins, clique sur le petit bonhomme pour aller chercher un nouveau

lutin

o Dans la catégorie « Animaux », choisis la souris (Mouse1)

o Puis clique sur « Ok »

- Ta souris est trop grosse pour passer dans le labyrinthe !

o Tout en haut de la fenêtre Scratch, clique

sur le bouton avec les 4 flèches vers

l’intérieur

o Puis clique autant de fois qu’il faut sur la

souris, dans la scène

- Déplace ta souris à l’entrée du labyrinthe puis

glisse le bloc bleu de mouvement « aller à x :…

y :… » dans la zone de droite (les blocs

représentent ce qu’on appelle des instructions)

Tu peux vérifier les chiffres à écrire pour x et y en

haut à droite de la zone de script quand ta souris

se trouve à l’entrée du labyrinthe

- A chaque démarrage du jeu, Mimi doit retourner à l’entrée du labyrinthe :

o Pour démarrer le jeu, on cliquera sur le drapeau vert et on souhaite qu’à chaque fois Mimi

retourne là où on vient de la mettre. Il faut donc l’écrire dans le script de notre jeu

o On va utiliser le bloc d’instructions que l’on vient d’ajouter au script. Pour lui dire qu’elle doit

faire ça uniquement quand on démarre le jeu, on va utiliser le bloc marron d’événements

« quand drapeau vert est cliqué ». On accroche les deux blocs ensemble pour les associer

5

o Ajoute le bloc bleu de mouvement « s’orienter à 90 » pour que

Mimi se retrouve face à l’entrée du labyrinthe

Mimi se déplace dans le labyrinthe

On va utiliser les flèches du clavier pour indiquer à Mimi où aller. Pour chaque flèche il va falloir écrire dans le

script ce qu’elle doit faire.

- On commence par la flèche droite :

o On va utiliser le bloc marron d’événements « quand espace est pressé », mais on va modifier

la touche « espace » en « flèche droite »

o On va dire à Mimi de se tourner vers la droite avec le bloc bleu

de mouvement « s’orienter à … » et comme valeur 90

o On va lui dire aussi d’avancer avec le bloc bleu de mouvement

« avancer de … » et comme valeur 10 pour lui faire faire un pas

(cette valeur se compte en pixels, un pixel est un petit carré

d’une seule couleur qui sert à dessiner sur un écran)

o Si tu appuies sur la flèche droite de ton clavier, Mimi avance

- Fais pareil pour les autres flèches :

o Tu peux dupliquer cette partie de script pour avoir uniquement à modifier les valeurs :

▪ Clique-droit sur le bloc marron « quand

flèche droite est pressé »

▪ Sélectionne « dupliquer »

▪ Clique un peu plus loin pour déposer ton

bloc de script

▪ Répète l’opération encore 2 fois pour

avoir en tout 4 blocs de script identiques

o Tu peux ensuite modifier les valeurs sur les

différents blocs pour avoir les 4 combinaisons suivantes :

Quand … est pressé Flèche droite Flèche gauche Flèche haut Flèche bas

S’orienter à … 90 -90 0 180

Avancer de … 10 10 10 10

- Tu peux tester les 4 flèches, Mimi se déplace. Mais elle passe à travers les murs du labyrinthe

Ce que tu viens de faire s’appelle une initialisation : on écrit au début du script une ou

plusieurs instructions qui définissent l’état au démarrage du programme.

Pour mieux comprendre les pixels, tu peux t’amuser à dessiner tes propres personnages

avec Piskel : www.piskelapp.com

6

Mimi ne traverse plus les murs

Pour que Mimi ne disparaisse pas de la scène et qu’elle ne traverse plus les murs, il faut à nouveau le lui dire

dans le script. On va ajouter ce bloc d’instructions au script d’initialisation (qui devient notre script principal)

qui commence par « quand drapeau vert est cliqué ».

- Pour que Mimi fasse tout le temps ce que tu vas lui demander, on va tout écrire à l’intérieur du bloc

jaune de contrôle « répéter indéfiniment » (on appelle ça une boucle)

- Pour que Mimi ne se sauve pas, on va ajouter le bloc bleu de mouvement « rebondir si le bord est

atteint »

- Pour que Mimi ne traverse plus les murs, on va lui dire de reculer si elle touche le mur :

o Commence par ajouter le bloc jaune de contrôle « si … alors » car on ne veut pas que Mimi

recule tout le temps mais uniquement quand elle touche un mur

o Pour savoir que Mimi touche un mur on va utiliser les couleurs :

▪ Ajoute entre le « si » et le « alors » le bloc bleu clair de capteur « couleur …

touchée ? »

▪ Clique sur le carré de couleur pour modifier la couleur qui s’y trouve

▪ Puis clique sur un mur du labyrinthe dans la scène

pour choisir la couleur des murs

o A l’intérieur de l’instruction « si … alors » place le bloc bleu

de mouvement « avancer de … » et renseigne la valeur -10

(Pour que cela fonctionne correctement, la valeur doit

toujours être la même que celle de l’instruction « avancer de

… » associée aux flèches mais avec le signe moins – devant)

- Tu peux tester, Mimi ne traverse plus les murs !

Mimi mange une pomme

Maintenant que Mimi sait se déplacer dans le labyrinthe sans traverser les murs, il faut la faire manger. Mimi

est une souris originale, elle ne mange pas du fromage mais des pommes !

- Va chercher comme deuxième lutin la pomme, dans la catégorie « Choses », et clique sur « Ok »

- Comme tu l’as fait pour la souris, adapte la taille de la pomme au labyrinthe et de Mimi

- Positionne la pomme au milieu du labyrinthe

- Comme pour la souris, on va initialiser la pomme :

o Dans le script de la pomme (il faut que la pomme soit sélectionnée),

crée un bloc de script qui place la pomme à sa position actuelle quand

le drapeau vert est cliqué

- Lorsque Mimi arrive à la pomme elle la mange (Mimi dit Miam et la pomme disparaît) et le jeu se

termine :

o On va à nouveau utiliser les couleurs : Dans le script de la souris, dans la boucle « répéter

indéfiniment » ajoute un nouveau bloc jaune de contrôle « si … alors » avec comme condition

le bloc bleu clair de capteur « couleur … touchée ? »

o Comme tout à l’heure, change la couleur pour mettre le rouge de la pomme

o Fais dire « Miam ! » à Mimi, avec le bloc violet d’apparence « dire … »

7

o Pour prévenir la pomme qu’elle est mangée par Mimi, on va lui envoyer un message avec le

bloc marron d’événement « envoyer à tous … » avec comme message « Je te mange ». Pour

changer le message, sélectionne « nouveau message » dans la liste déroulante.

o Dans le script de la pomme, on va lui dire de disparaître quand

elle reçoit ce message, avec le bloc marron d’événement

« quand je reçois Je te mange » et le bloc violet d’apparence

« cacher »

o Pour revoir la pomme la prochaine fois que l’on va jouer, il faut

ajouter dans son initialisation le bloc violet d’apparence

« montrer »

o Dans le script de la souris, on va attendre 1 ou 2 secondes pour

avoir le temps de voir la pomme disparaître, avec le bloc jaune de contrôle « attendre …

secondes »

o Puis on va arrêter le jeu avec le bloc jaune de contrôle « stop tout »

Voilà je jeu est terminé ! Amuse-toi bien avec Mimi !

Si ta souris fait des choses bizarres, si elle passe parfois à travers les murs ou si elle reste bloquée c’est :

- Soit parce que tu n’as pas mis le même chiffre quand elle avance et quand elle touche le mur.

- Soit parce qu’il y a un problème de rapport de taille entre ta souris et ton labyrinthe. Il faut

qu’elle puisse tourner sans toucher les murs, même avec sa queue.

- Soit parce que tu lui fais faire autre chose, en plus, quand elle touche le mur.

Si le jeu ne fonctionne pas bien

8

Pour que le jeu soit plus amusant, tu peux y ajouter de la musique pendant toute la durée du jeu :

- Dans l’onglet son, en haut de la zone de script, clique sur le petit haut-parleur pour accéder à

la bibliothèque de sons

- Dans la catégorie « boucles musicales » choisis le son que tu veux (pour écouter le son clique

sur le petit triangle, symbole de « lecture »), sélectionne-le puis clique sur « ok ». Ici nous avons

choisi « xylo2 »

- Dans le script de la souris, ajoute un nouveau bloc marron d’événement « Quand drapeau vert

est cliqué » *

- Ajoute sous ce bloc, un bloc jaune de contrôle « répéter indéfiniment »

- Dans cette boucle, ajoute le bloc violet clair de sons « jouer le son xylo2 jusqu’au bout »

Pour plus de fun

* On ne va pas ajouter la musique dans le bloc principal pour ne pas interférer avec les autres

actions. En effet en programmation les instructions d’un script s’exécutent les unes après

les autres. Ici la souris traverserait les murs tant que la musique ne serait pas finie.

9

Pour aller plus loin

Mimi mange plusieurs pommes

Mimi a encore faim. Et si une pomme ce n’était pas suffisant ? Faisons-en sorte qu’elle puisse manger autant

de pommes qu’elle veut.

- Pour que le jeu ne soit pas trop facile, il ne faut pas toujours placer les

pommes au même endroit. Modifie le script d’initialisation de la pomme

en utilisant le bloc bleu de mouvement « aller à pointeur de souris » puis

en modifiant la valeur pour « position aléatoire »

- Lorsque la pomme est mangée (elle reçoit le message « Je te mange »),

au lieu de se cacher, elle va se positionner ailleurs, avec le même bloc de

commande

- Il n’est donc plus nécessaire de la montrer à l’initialisation

- Il faut également supprimer l’arrêt du jeu dès la première pomme mangée. Retire donc le bloc « stop

tout » du script de la souris. Tu peux également supprimer le bloc « attendre 1 secondes »

- En testant, tu peux constater que Mimi continue à dire « Miam ! » tout le temps. Pour qu’elle ne dise

plus rien pendant qu’elle cherche une nouvelle pomme tu peux remplacer le bloc « dire Miam ! » par

le bloc « dire … pendant … secondes »

Pour rendre le jeu plus intéressant, on va compter le nombre de pommes que Mimi a mangé.

- On a besoin d’un endroit où stocker ce nombre. On va donc créer ce que l’on appelle une variable :

o Dans la catégorie orange des données, clique sur « Créer

une variable »

o Donne-lui le nom NbPommes et partage la entre tous les

lutins. Puis clique sur « Ok »

o De nouveaux blocs d’instructions liés à cette variable

apparaissent dans la catégorie orange des données. Et la

variable et sa valeur apparaissent en haut à gauche de la scène

- Au démarrage du jeu, dans le script de la souris, on initialise la variable à 0. Place donc, au niveau de

l’initialisation de la souris, le bloc « mettre NbPommes à 0 »

- Lorsque Mimi mange une pomme, on ajoute 1 à la variable. Ajoute, dans la condition « Si couleur

rouge touchée ? », le bloc « ajouter à NbPommes 1 ». On appelle ça incrémenter la variable

L’utilisation de variables est très pratique en programmation.

Il faut les créer et les initialiser, puis au cours du script on va les incrémenter (ajouter 1) ou

les décrémenter (déduire 1) en fonction du besoin.

10

Pour tester la décrémentation, tu peux compliquer le jeu et retirant 1 point à chaque fois que la souris

touche un mur : Pour cela tu utiliseras à nouveau le bloc « ajouter à NbPommes … » mais avec la valeur

-1, dans la condition « si couleur noir touchée ? ».

Tu peux aussi réinitialiser la variable en la remettant à 0 à chaque fois que la souris touche un mur.

11

Mimi doit faire vite

Maintenant le jeu ne s’arrête plus, pour l’arrêter on va rajouter un chrono : Mimi a 3 minutes pour manger le

plus de pommes possible.

- Dans la catégorie Capteurs, active le chronomètre en cochant la case. Il apparaît alors sous le

compteur de pommes. Il est en secondes.

- Dans l’initialisation du jeu, ajoute le bloc « réinitialiser le chronomètre »

- Lorsque le chrono arrive à 3 minutes = 3x60 = 180 secondes, on souhaite arrêter le jeu :

o Dans la boucle « répéter indéfiniment », ajoute un nouveau bloc de condition « si … alors »

o Dans la condition, ajoute le bloc vert clair d’opérateurs « … = … »

o Dans le premier élément de l’opérateur, place le bloc bleu clair de capteurs « chronomètre ».

Cela va te permettre de récupérer la valeur actuelle du chronomètre

o Dans le deuxième élément de l’opérateur écris 180

- Pour arrêter le jeu on cache la pomme, on affiche le score et on arrête le jeu :

o Pour pouvoir cacher la pomme, il faut l’informer que le jeu est terminé. Envoie-lui un message

« c’est fini » avec le bloc marron d’événements « envoyer à tous … »

o Dans le script de la pomme, indique-lui qu’elle doit se cacher lorsqu’elle reçoit le message

« c’est fini » avec le bloc marron d’événement « quand je reçois c’est fini » et le bloc violet

d’apparence « cacher »

o Mimi va nous donner le score. Dans le script de la souris, si le chrono a atteint 180 secondes,

fais-lui dire le score avec le bloc violet d’apparence « dire … » dans lequel tu places le bloc

orange de données « NbPommes »

o Ensuite tu peux arrêter le jeu avec le bloc jaune de contrôle « stop tout »

12

Créé différents niveaux

Pour aller encore plus loin, tu peux créer un jeu à plusieurs niveaux : lorsque tu atteins un score minimum à la

fin du chrono, tu passes au niveau suivant, sinon tu restes au niveau actuel. Le jeu s’arrête lorsque tu as

terminé le dernier niveau avec le score minimum atteint.

- Le changement de niveau va se traduire par un changement de labyrinthe. Commence donc par

importer les différents labyrinthes en tant qu’arrière-plans, comme tu l’as fait pour le premier au tout

début de l’atelier

- Il est possible que tu doives réduire la taille de la souris pour qu’elle passe dans tous les labyrinthes

- Comme tu as créé la variable « NbPommes », créé une variable « Niveau »

- Au début du jeu, tu vas initialiser la variable Niveau à 1 et tu vas définir, dans le script, que l’arrière-

plan à afficher est Niveau1

- Sors de la condition « si chronomètre = 180 » le bloc de 3 instructions qui permet de terminer le jeu,

tu le réutiliseras plus tard

- Dans cette même condition, ajoute un bloc « si … alors / sinon » avec comme condition « NbPommes

> 2 »

- Dans le cas où c’est vrai, on passe au niveau suivant en remettant à 0 le nombre de pommes et le

chronomètre : Dans la partie « si NbPommes > 2 alors », ajoute les blocs nécessaires pour

o Incrémenter la variable Niveau

o Réinitialiser le chronomètre

o Réinitialiser le nombre de pommes

- Dans le cas où c’est faux, on reste au même niveau en remettant à 0 le nombre de pommes et le

chronomètre : Dans la partie « sinon », ajoute les blocs nécessaires pour

o Réinitialiser le chronomètre

o Réinitialiser le nombre de pommes

- Que l’on ait gagné ou perdu il faut reparamétrer le niveau :

o Après la condition « si NbPommes>2 / sinon », ajoute un bloc « si … alors » avec comme

condition « Niveau = 1 »

o Comme action quand la condition est vraie, ajoute un bloc « basculer sur l’arrière-plan

Niveau1 »

o Replace Mimi à l’entrée avec le bloc « aller à x :… y :… » et oriente-la dans le bon sens

o Pour que la pomme se replace ailleurs, on lui fait croire qu’elle a été mangée avec le message

« Je te mange »

o Duplique cette partie de script juste en dessous et adapte-la pour Niveau=2, Niveau=3 et

Niveau=4

- Si Niveau=5 c’est que le jeu est fini. Tu peux replacer dans la condition Niveau=5 l’ensemble

d’instructions que tu avais mis de côté. Et faire dire à Mimi « Bravo ! » au lieu du nombre de pommes

qu’elle a mangé

- Pour faciliter la lecture du script on va séparer tout ce traitement de "fin de niveau" du reste du script,

en créant ce qu’on appelle une fonction :

o Dans la catégorie « Ajouter blocs », clique sur « Créer un bloc »

o Appelle le « Fin de niveau »

o Un gros bloc violet foncé est créé dans le script de la souris, déplace tout ce qui se trouve à

l’intérieur du bloc « si chronomètre = 180 » sous ce bloc

13

o Ajoute le petit bloc violet foncé « Fin de niveau » créé dans la catégorie « Ajouter blocs » à

l’intérieur de la condition « si chronomètre=180 »

o Pour encore plus de lisibilité tu peux, de la même façon créer une 2ème fonction « Initialisation

de niveau » dans laquelle tu mettras tous les « si Niveau=… » que tu as créés. Tu peux ensuite

ajouter le petit bloc créé à l’initialisation du jeu et à la fin de la fonction « Fin de niveau »

- Pour que le jeu ne soit pas trop long, on va réduire le temps de chaque niveau à 2 minutes = 2x60 =

120 secondes. Modifie la valeur 180 en 120 dans la condition « si chronomètre = … »

Tu viens de créer 2 fonctions dans ton script. Les fonctions sont très souvent utilisées en

programmation. Parfois pour rendre le script plus lisible et compréhensible mais le plus

souvent parce qu’on utilise ces fonctions plusieurs fois et comme ça on n’écrit le code qu’une

seule fois.