Projets SCRATCH débutants

Cette série de projets est destinée aux débutants tant en programmation que dans le langage SCRATCH. Ils permettent de créer ses premiers programmes et de mettre en pratique les notions de base de l’algorithmique.

Ces projets sont abordables par des élèves de cycle 3 ou début de cycle 4, ou les cycles 4 qui débutent l’apprentissage de la programmation.

Chaque projet est décrit pas à pas, afin de pouvoir être utilisé en travaux dirigés. Ces projets  ne sont accessibles qu’aux comptes de type ‘Enseignant’. Chaque projet est disponible en téléchargement , entièrement commenté, avec une fiche PDF récapitulative et toutes ses ressources graphiques.

----------------------------------------------------------------------------------------------------------------

Info

SCRATCH 3 est sorti le 2 janvier 2019. Ces projets ont été fait avec SCRATCH 2, mais sont compatibles avec la dernière version de SCRATCH et les projets finis téléchargeables peuvent être ouverts et utilisés dans SCRATCH 3 sans problème. Nous préparons également des projets qui utilisent les nouveautés de cette dernière version!

Si vous rencontrez des difficultés, ou que vous avez des questions de programmation sur les projets de cette section, un petit forum de discussion est disponible. N’hésitez pas à nous poser vos questions, ou à consulter si votre question contient déjà une réponse.

Notre but est de proposer des projets qui sont le plus proche de ce dont vous avez besoin en cours. Si vous souhaitez développer un projet SCRATCH débutant et que vous souhaitez une assistance vous pouvez également nous le demander sur ce forum.

Projets SCRATCH débutants

Création et déplacement d’un lutin sur la scène

Description du projet

Ce projet est un projet d’introduction destiné à se familiariser avec Scratch, son langage et son interface. Dans ce projet, nous allons ajouter un lutin à l’écran, le faire se déplacer à l’aide des touches directionnelles du clavier (droite, gauche, haut, bas) et l’animer conformément à ses mouvements. Il permet de créer une première série de petits enchainements logiques simples.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin de SCRATCH présent à l’écran par défaut (le chat)

Ajouter l’ image d’arrière-plan contenue dans les ressources de ce projet ( l’arrière-plan n’est, dans ce projet, pas nécessaire au fonctionnement du programme ).

Ajouter le lutin contenu dans les ressources de ce projet, le modifier et le renommer.

Commandes utilisées : l’interface de SCRATCH.

Info : vous pouvez consulter la vidéo de tutoriel Scratch concernant l’ajout de lutin si vous ne l’avez pas déjà fait ou si vous souhaitez un rappel.

Partie 2 – Programmation

Le cheminement de ce programme est le suivant :

à chaque évènement de touche directionnelle pressée (droite, gauche, haut, bas), nous allons associer un mouvement du lutin sur la ‘scène’, c’est à dire sur l’écran de l’application SCRATCH, dans la direction choisie;

par ailleurs, à chaque changement de direction nous allons changer l’ apparence du lutin pour qu’elle corresponde à l’état dans lequel il se trouve (tourné vers la gauche, vers la droite ou de dos) , nous allons donc modifier son costume .

Voyons d’abord comment cela pourrait se traduire en pseudo code:

Lien

La notion de pseudo code ainsi que les conventions que nous utilisons sont disponibles ici : cliquer

Pseudo code pour le lutin ‘cody’

Si touche "fleche droite" pressee==vrai Alors l'abscisse x du lutin est incrémentée de 2 il s'affiche représenté du coté gauche Fin Si Si touche "fleche gauche" pressee==vrai Alors l'abscisse x lutin est décrémentée de 2 il s'affiche représenté du coté droit Fin Si Si touche "fleche haut" pressee==vrai Alors l'ordonnée y du lutin est incrémentée de 2 il s'affiche représenté de dos Fin Si Si touche "fleche bas" pressee==vrai Alors l'ordonnée y du lutin est décrémentée de 2 il s'affiche représenté de dos Fin si

Dans SCRATCH, cet algorithme peut se programmer de deux manières différentes. La différence réside dans l’approche de la gestion des évènements clavier, c’est à dire la façon dont on saura si telle ou telle touche du clavier est pressée par l’utilisateur.

La première est plus simple et plus basique et si elle est tout à fait logique d’un point de vue de la programmation évènementielle, son rendu dans SCRATCH n’est pas très bon et donne un effet saccadé au déplacement. La seconde implique plus de notions mais a un rendu beaucoup plus fluide (dans le cadre de la programmation d’un jeu où les mouvements sont importants, c’est elle qui sera privilégiée).

Le code Scratch du lutin ‘cody’

Méthode 1 – gestion des touches claviers par les blocs de type ‘évènements’

Pour cette méthode nous utiliserons les blocs de type:

‘Evènements’ : afin de savoir quand l’utilisateur appuiera sur les touches directionnelles

‘Mouvements’ : afin de déplacer le lutin sur la scène

‘Apparence’ : afin de modifier l’apparence du lutin

Dans cette approche nous allons prendre un bloc évènement pour savoir quand telle ou telle touche du clavier sera pressée par l’utilisateur et lui juxtaposer les blocs d’instructions que l’on souhaite lui voir déclencher : changer de costume, s’orienter et se déplacer dans la direction correspondante.

Ainsi, si nous plaçons le code suivant dans notre lutin:

Il produira la chose suivante :

Lorsque la touche ‘flèche droite’ est pressée :

le lutin change de costume pour être visuellement de profil,

s’oriente vers la droite,

avance de 2 pixels sur l’axe des abscisses.

Le code complet pour les 4 directions sera sur le même principe:

Méthode 2 – gestion des touches claviers grâce aux blocs de type ‘capteurs’

Cette méthode est un petit peu plus complexe que la précédente car elle comprend des conditions et une boucle. Elle demande d’utiliser les blocs de type ‘Capteurs’, de type ‘Mouvements’ , de type ‘Apparence’ et de type ‘Contrôle’.

Les blocs de type ‘Capteurs‘ vous permettent d’identifier certains évènements (la position du pointeur de la souris sur l’écran, s’il y a une collision entre un lutin et une couleur, …) à un moment t par une condition.

Le bloc qui ‘capte’ les évènements de type ‘clavier’ est . Pour que nous puissions identifier, ‘capter’, si l’utilisateur appuie sur une touche, nous devons définir une condition. Et pour vérifier cette condition à tout moment dans notre programme, nous allons la vérifier en permanence, c’est à dire dans une boucle infinie, ou en langage Scratch, le bloc ‘répéter indéfiniment’.

Le code SCRATCH qui suit exécutera en permanence la chose suivante pour le lutin qui le contient : si la touche ‘flèche’ gauche est pressée’ , avance de 2 pixels sur l’axe des abscisses.

Le code pour les 4 directions sera basé sur le même principe avec les valeurs adéquates:

Ce projet en vidéo

Pour ceux qui veulent aller plus loin lors de cette séance

Ajouter un second lutin à l’application et le faire se déplacer avec d’autres touches.

Animer les lutins et les faire marcher lors de leurs mouvements.

Suggestion de projet suivant :

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Dessiner des formes géométriques simples

Description du projet

Ce projet est destiné aux débutants, ils vont pouvoir découvrir le programme Scratch en manipulant un outil simple, le stylo. Le but, dans un premier temps, est de faire dessiner des formes simples (carré et rectangle) en utilisant leurs propriétés géométriques. Dans un second temps, les élèves vont pouvoir découvrir l’utilité des boucles dans la programmation.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin par défaut.

Ajouter l’image d’arrière plan “fond_ardoise_formes_geometriques.png” fournie dans les ressources qui correspond à l’ardoise.

Ajouter le lutin “lutin_craie_formes_geometriques.png” fourni dans les ressources.

Partie 2 – Programmation

La démarche pour écrire le programme permettant de tracer un carré est la suivante (nous avons choisi de tracer un carré de 100 pixels de coté).

Tracer un trait de 100 pixels.

Tourner de 90° dans le sens des aiguilles d’une montre.

Tracer un trait de 100 pixels.

Tourner de 90° dans le sens des aiguilles d’une montre.

Tracer un trait de 100 pixels.

Tourner de 90° dans le sens des aiguilles d’une montre.

Tracer un trait de 100 pixels.

Pseudo code pour le lutin Craie

Afficher une ligne de 100 pixels Tourner de 90° Afficher une ligne de 100 pixels Tourner de 90° Afficher une ligne de 100 pixels Tourner de 90° Afficher une ligne de 100 pixels

Programmation dans SCRATCH

Dans SCRATCH, pour tracer des lignes, il faut utiliser les outils de la famille Stylo dans l’onglet Script.

Pour commencer, nous effaçons l’écran et nous choisissons la couleur blanche pour le stylo. Nous positionnons le stylo aux coordonnées x=0 et y=0, nous orientons le tracé vers le haut (0°) et nous plaçons le stylo en position d’écriture.

Nous faisons avancer le stylo de 100 pixels. Dans l’étape précédente, nous avons placé le stylo en position d’écriture donc, lorsque nous déplaçons le stylo, il laisse une trace blanche à l’écran. Nous obtenons ainsi un trait de 100 pixels de longueur. Ensuite, nous faisons tourner le stylo de 90°. Nous introduisons un délai d’attente d’une demi seconde afin d’avoir le temps de voir ce qui se passe à l’écran. Cette instruction n’est pas obligatoire, elle permet juste de décomposer le mouvement pour mieux comprendre.

Nous répétons la même étape 2 fois.

Pour le quatrième coté, on trace un trait de 100 pixels. Nous n’avons pas besoin de changer l’orientation car le carré est terminé. Nous relevons le stylo. Ceci n’est pas forcément nécessaire car nous avons fini de tracer notre figure géométrique. Cette opération permet de déplacer le stylo sans écrire à l’écran ainsi nous pouvons le positionner ailleurs pour tracer une autre figure par exemple. C’est une bonne habitude à prendre de relever le stylo après avoir dessiner.

Nous pouvons aussi dessiner un rectangle, en changeant la longueur du trait (100 pixels et 50 pixels par exemple).

La notion de boucle

En programmation, lorsque nous répétons plusieurs fois la même opération, il existe une instruction qui simplifie le code en nous évitant d’avoir à écrire plusieurs fois la même chose. Cette instruction s’appelle une boucle, elle permet de répéter une série d’instructions.

Lien

Ressource sur la notion de boucle : cliquer

Pour tracer notre carré, nous avons répété 4 fois le même tracé. Plutôt que d’écrire quatre fois la série d’instruction qui nous permet d’afficher un trait de 100 pixels et de tourner de 90°, nous allons introduire une boucle dans le programme.

L’instruction “répéter 4 fois” représente la boucle. Toutes les instructions qui se trouvent à l’intérieur de cette boucle seront répétées 4 fois (attendre .05 secondes – avancer de 100 – tourner de 90°).

La boucle est très pratique car elle évite d’écrire plusieurs fois les mêmes séries d’instructions. Pour tracer le carré nous avons utilisé 4 blocs alors que sans la boucle il en fallait 10. Le fait d’utiliser moins d’instructions pour arriver au même résultat rend aussi le programme beaucoup plus facile à lire.

Pour le rectangle, nous pouvons aussi utiliser une boucle pour le tracer.

Pour ceux qui veulent aller plus loin

Vous pouvez tracer d’autres figures géométriques (triangles, cercles ….);

Un exercice amusant et joli visuellement consiste à tracer la même figure géométrique plusieurs fois en décalant le départ de quelques degrés.

La réalisation de ce projet en vidéo

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Quiz additions

Description du projet

Le but de ce projet est d’écrire un programme qui posera une addition de deux nombres pris au hasard et compris entre 1 et 100. L’utilisateur devra trouver la bonne réponse.

Ce projet est un projet d’introduction à Scratch. Il permet de réaliser un premier algorithme simple et de se familiariser avec les premières bases de la logique informatique telles qu’elles ont pu être abordées de manière théorique.

Partie 1 – Préparation de l’application et ajout des ressources

Commencez par supprimer le lutin par défaut.

Créez le lutin ‘Cody’ avec l’image ‘cody.png’ qui se trouve dans les ressources liées à ce projet.

Créez le lutin ‘signe_plus’, vous pouvez le dessiner vous même en utilisant l’éditeur de costumes de Scratch. Sinon vous pouvez charger le fichier ‘signe_plus.png’.

Vous pouvez, si vous le souhaitez, ajouter l’arrière-plan présent dans les ressources, mais il n’a aucune utilité pour la programmation du projet.

Partie 2 – Programmation

Le programme aura le cheminement suivant :

On tire 2 nombres aléatoires entre 1 et 100

On affiche ces 2 nombres et on demande à l’utilisateur d’entrer le résultat de leur somme.

Si le résultat est bon, on affiche “Bravo, tu as trouvé le bon résultat.”, sinon, on affiche ‘Tu t’es trompé …” et on repose la question tant que la bonne réponse n’a pas été trouvée.

Pseudo code du projet

a←nombre aléatoire entre 1 et 100 b←nombre aléatoire entre 1 et 100 resultat←a+b Ecrire a Ecrire b Ecrire "Quelle est le résultat ?" Lire reponse TantQue reponse!=resultat Ecrire "Tu t'es trompé ... Quel est le résultat ?" Lire reponse Fin TantQue Ecrire "Bravo, tu as trouvé le bon résultat."

Description du pseudo code :

On déclare 2 variables a et b et on leur affecte un nombre aléatoire entre 1 et 100

On déclare la variable résultat et on lui affecte comme valeur la somme a + b

On affiche a et b, on demande le résultat de la somme et on attend la réponse

On fait le test suivant : TantQue réponse est différente de résultat, on affiche “Tu t’es trompé …”, on demande à nouveau “Quel est le résultat ?” et on attend la réponse.

Si l’on sort de la boucle c’est que la réponse est correcte, on affiche alors “Bravo, tu as trouvé le résultat”.

Programmation dans SCRATCH

Voyons maintenant comment transcrire cet algorithme dans le langage de Scratch.

Le code scratch du lutin ‘cody’

Dans un premier temps, nous devons déclarer les variables que nous allons utiliser : a, b et résultat. Dans Scratch, la déclaration de variable se réalise non pas dans le code en tant que tel (comme c’est le cas dans les langages de programmation classiques) mais dans son interface elle même, dans la section “Données“.

Lien

Comment créer une variable dans SCRATCH : cliquez

Attention : nous ne sélectionnons que les variables a et b pour l’affichage ! Si l’on affiche la variable résultat, le programme n’a plus aucun intérêt.

Une fois nos variables déclarées, nous pouvons leur affecter des valeurs. Le tirage d’une valeur aléatoire se réalise avec le bloc de type ‘opérateurs‘ : ‘nombre aléatoire entre‘.

Nos deux variables sont maintenant affichées à l’écran. Nous demandons à l’utilisateur le résultat de leur somme. Pour cela, nous utilisons un bloc de type ‘capteur‘ :

La réponse rentrée par l’utilisateur est automatiquement stockée dans une variable créée par Scratch et qui se nomme ‘réponse‘. Elle se trouve avec les blocs de type ‘capteur‘.

Nous avons la variable résultat et nous avons la variable réponse. Nous pouvons maintenant les comparer. Dans le langage Scratch, la boucle TantQue, que nous avons vu dans les cours d’algorithmique et qui est une boucle classique, n’existe pas sous cette forme. Elle s’exprime par l’instruction Jusqu’à.

Dans le pseudo code de ce projet, nous avons l’instruction :

TantQue réponse != résultat on exécute les instructions suivantes.

L’instruction Tant Que utilisée classiquement en algorithmique n’existant pas en tant que telle dans Scratch, nous l’exprimerons ainsi :

Jusqu’à que réponse soit égale à résultat, on exécute les instructions suivantes.

Tant que la bonne réponse n’aura pas été rentrée, le programme redemandera à l’utilisateur de rentrer une nouvelle réponse. A chaque nouvelle réponse, la variable réponse de Scratch prendra une nouvelle valeur qui sera comparée à la variable résultat.

Si la comparaison est concluante, on annonce à l’utilisateur qu’il a trouvé. S’il appuie sur le drapeau vert, le programme est initialisé de nouveau et on recommence.

Pour aller plus loin :

On peut créer le même projet avec des soustractions, ou des opérations arithmétiques plus complexes (ce qui ne changera rien à la programmation mais permettra de faire formaliser plusieurs enchaînements de calculs).

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Localisation dans un repère orthonormé

Description du projet

Dans ce projet, nous réalisons le programme suivant : un repère orthonormé est affiché à l’écran, le programme défini aléatoirement les coordonnées d’un point (x,y) , l’affiche et demande à l’utilisateur de le placer sur le repère à l’aide de la souris. Il déterminera si le point placé correspond aux coordonnées affichées.

Ce projet permet à l’élève de faire un algorithme simple, de se repérer dans l’espace en deux dimensions d’un écran et de manipuler les notions d’abscisse et d’ordonnée dans un repère orthonormé.

Préparation de l’application et ajout des ressources

Chargez l’image appelée ‘grille.png‘ (qui se trouve dans les ressources du projet) dans l’arrière plan.

Supprimez le lutin par défaut.

Créez un lutin en utilisant l’image ‘curseur.png‘ qui se trouve dans les ressources de ce projet. Vous pouvez également le dessiner en respectant ces normes : le lutin a une taille de 16 X 16 pixels, les branches du curseur ont une épaisseur de 2 pixels.

Si vous choisissez de dessiner vous même le lutin représentant le curseur, prenez soin de faire coïncider le centre du costume avec le centre de votre dessin.

Programmation

Le programme aura le cheminement suivant:

On tire 2 nombres au hasard afin de déterminer l’abscisse et l’ordonnée du point à placer. La grille proposée comme arrière plan dans les ressources du projet permet de choisir une abscisse comprise entre -5 et 5 et une ordonnée entre -4 et 4. Il faudra donc choisir un nombre au hasard en tenant compte de cette limitation.

On affiche les valeurs de l’abscisse et de l’ordonnée tirées aléatoirement à l’écran et on attend que l’utilisateur place le curseur sur le repère.

Quand l’utilisateur a cliqué sur un point du repère avec la souris, on teste si le point placé est correct. L’échelle de notre repère est la suivante: 1 unité en abscisse et en ordonnée correspond à 40 pixels à l’écran.

On crée une marge d’erreur nécessaire au fonctionnement du programme. En effet, lorsque l’utilisateur va positionner le curseur, il risque de ne pas se trouver exactement aux bonnes coordonnées car il est pratiquement impossible de positionner le curseur au pixel près à l’œil nu. Ainsi, si l’utilisateur positionne le curseur par exemple à 2 pixels de distance du point réel à trouver, cela ne sera pratiquement pas visible et il pensera que sa réponse est correcte. Le programme, par contre, va calculer les coordonnées au pixel près et il considérera la réponse comme fausse car il trouvera 2 pixels de différence par rapport au résultat attendu. Pour remédier à ce problème qui rendrait notre programme inutilisable, on acceptera donc une marge d’erreur dans le positionnement du curseur de 0,1 unité.

Si le point est bien positionné, l’utilisateur a gagné, sinon, on lui demande de recommencer et ce jusqu’à ce qu’il ait trouvé la bonne position.

Pseudo code du PROJET

Voici comment cela pourrait se traduire en pseudo code:

Abs←nombre aléatoire entre -5 et 5 Ord←nombre alélatoire entre -4 et 4 gagne←0 TantQue gagne==0 TantQue le bouton de la souris n'est pas pressée Afficher le curseur à (abscisse souris, ordonnée souris) Fin TantQue AbsJoueur←abscisse souris ordJoueur←ordonnée souris Si valeur absolue(Abs-AbsJoueur)<0.1 et valeur absolue(Ord-OrdJoueur)<0.1 Alors Ecrire "Bravo, tu as gagné." gagne←1 Sinon Ecrire "Tu t'es trompé, essaye encore." Fin Si Fin TantQue

Description du pseudo code :

On déclare la variable que l’on appelle Abs et on lui assigne une valeur aléatoire comprise entre -5 et 5. Cette variable correspond à l’abscisse de notre point aléatoire.

On déclare la variable que l’on appelle Ord et on lui assigne une valeur aléatoire comprise entre -4 et 4. Cette variable correspond à l’ordonnée de notre point aléatoire.

On déclare la variable gagné, on lui affecte la valeur ‘faux’. La partie n’ayant pas commencée elle n’est pas gagnée. Il s’agit d’une variable de type booléen.

On affiche nos deux variables pour que l’utilisateur connaisse le point qu’il doit trouver dans le repère

Tant que le joueur n’a pas cliqué sur le bouton gauche de la souris, on affiche le curseur au même endroit que le pointeur de la souris.

Quand le bouton de la souris a été cliqué, nous récupérons les coordonnées du point où le clic s’est produit et nous les stockons dans 2 variables: la valeur de l’abscisse de la souris dans la variable AbsJoueur et la valeur de l’ordonnée de la souris dans la variable OrdJoueur.

On compare les valeurs Abs et AbsJoueur ainsi que les variable Ord et OrdJoueur. Si les 2 tests sont réussis, on écrit que le joueur a gagné et on affecte 1 à la variable gagné pour sortir de la boucle principale. Si une des valeurs ou les 2 valeurs sont différentes, on écrit que le joueur s’est trompé, il faut qu’il essaye encore.

Programmation dans Scratch

Nous allons tout d’abord définir nos variables dans le panneaux “Données” de Scratch et choisir d’afficher à l’écran les variables Abs et Ord qui vont permettre au joueur de placer le curseur.

Attention à ne pas les positionner dans la zone où le joueur doit placer son curseur afin qu’il ne soit pas gêné.

Comment créer une variable dans Scratch

Le code de ce projet se trouvera dans le lutin ‘Curseur’ car il repose essentiellement sur la lecture des coordonnées de celui ci.

Le code Scratch du lutin ‘Curseur’

Nous définissons que le programme se lancera lorsque l’utilisateur aura cliqué sur le ‘drapeau vert’ de Scratch. Puis, il nous faut introduire un temps d’attente. En effet, le temps d’exécution du programme étant très rapide, le premier clic enregistré sera celui qui lance le programme et nous ne souhaitons pas qu’il soit considéré comme le clic demandé pour valider la position du curseur.

Dans un premier temps, nous affectons aux variables que nous avons crée les valeurs nécessaires :

nous donnons aux variables Abs et Ord des valeurs aléatoires, en suivant les contraintes exposées plus haut (entre -5 et 5 et pour Abs et entre -4 et 4 pour Ord )

nous affectons la valeur ‘faux’ à gagné. Puisque que gagné n’est pas encore vrai, c’est donc faux.

Tant que la bonne réponse n’a pas été donnée, donc tant que la variable gagné a pour valeur ‘faux’ , nous allons exécuter une série d’instructions. Pour cela nous allons placer ces instructions (que nous allons voir ci-dessous) dans une boucle qui se répétera jusqu’à que la variable gagné ait pour valeur ‘vrai’.

Testons grâce à un bloc de type ‘capteur’ si le bouton gauche de la souris est pressé. Tant qu’il n’est pas pressé, le curseur doit suivre le mouvement de la souris de l’utilisateur jusqu’à qu’il choisisse un point : on donne donc à notre lutin les coordonnées x et y de la souris.

Dès que le bouton de la souris est pressé, nous sortons de la boucle et notre lutin ne change donc plus de position. Nous devons stocker les coordonnées du point choisi, converties à notre échelle. Pour cela on affecte:

la coordonnée x du lutin / 40 à la variable AbsJoueur (1 unité = 40 pixels, nous convertissons donc à l’échelle)

la coordonnée y du lutin / 40 à la variable OrdJoueur.

Maintenant , comparons les valeurs des coordonnées de notre lutin, mises à l’échelle de notre repère, avec les coordonnées tirées au hasard par le programme. Si la différence entre Abs et AbsJoueur est inférieure à 0,1 unité (notre marge d’erreur pour le positionnement du curseur) et celle entre Ord et OrdJoueur est aussi inférieure à 0,1 alors le joueur à gagné.

Si l’utilisateur à gagné, notre série d’instruction n’a plus à être exécutée et on fixe la variable gagné à vrai afin de pouvoir sortir de la boucle. Dans le cas contraire, on annonce à l’utilisateur qu’il s’est trompé et qu’il doit encore essayer.

Pour aller plus loin :

On peut faire en sorte que les coordonnées tirées au hasard ne soient pas forcément entières et que l’on puisse avoir des demi graduations. Par exemple, placer le point à x = 3,5 et y = -1,5.

On peut vérifier si l’élève s’est seulement trompé sur l’abscisse ou l’ordonnée et le lui signaler.

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Calculatrice simplifiée

Description du projet

Nous allons réaliser une calculatrice simple. Le programme demande deux nombres à l’utilisateur et quelle type d’opération il veut effectuer. Quand ces variables sont entrées, le résultat de l’opération est affiché à l’écran.

Dans ce projet, qui fait suite au Quiz additions, l’élève va apprendre à manipuler toutes les opérations dans Scratch. Il va aussi se servir de la boucle Répéter jusqu’à et de la condition Si Alors. Pour faire dialoguer les lutins entre eux, il faudra utiliser l’instruction envoyer à tous dans les blocs de type “Evènements” servant à envoyer des messages au lutins .

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut.

Ajouter les lutins cody, signe_plus, signe_moins, signe_multiplier et signe_diviser fournis dans les ressources. Vous pouvez aussi les dessiner vous-même dans l’éditeur Scratch.

Ajouter l’arrière-plan “fond_tableau_calculatrice_simplifiee.png“. Cette image servira de fond d’écran et n’est pas nécessaire au fonctionnement de ce programme.

Partie 2 – Programmation

Démarche à suivre pour construire le programme :

demander le premier nombre;

demander le second nombre;

demander le type d’opération;

effectuer le calcul et l’afficher.

Pseudo code

Ecrire "Quel est le premier nombre" Lire nombre1 Ecrire "Quel est le second nombre" Lire nombre2 Ecrire "Quelle opération voulez-vous effectuer (+ - * /) ?" Lire operation Si operation=="+" Alors resultat←nombre1+nombre2 Afficher resultat Fin Si Si operation=="-" Alors resultat←nombre1-nombre2 Afficher resultat Fin Si Si operation=="*" Alors resultat←nombre1*nombre2 Afficher resultat Fin Si Si operation=="/" Alors resultat←nombre1/nombre2 Afficher resultat Fin Si

Signification du pseudo code

nous demandons le premier nombre et nous affectons cette valeur à la variable nombre1;

nous demandons le second nombre et nous affectons cette valeur à la variable nombre2;

nous demandons le style d’opération et nous affectons cette valeur à la variable operation;

nous testons la valeur de la variable operation, effectuons le calcul demandé et affichons le résultat.

Programmation dans Scratch

Nous commençons par définir les variables dont nous aurons besoin :

nombre1 : le premier nombre choisi par l’utilisateur;

nombre2 : le second nombre choisi par l’utilisateur;

resultat : résultat de l’opération.

Il ne faut pas oublier de cocher les cases devant chaque variable pour qu’elle soient affichées à l’écran. Elles apparaissent dans un cadre dans lequel nous pouvons voir le nom de la variable et sa valeur.

Lien

Vous pouvez, si vous le souhaitez, consulter la vidéo “Créer et afficher une variable dans SCRATCH” :

cliquez

Si nous double-cliquons dessus, l’affichage change. Nous pouvons ainsi basculer vers un cadre qui n’affiche que la valeur ou vers un cadre avec la valeur de la variable et un petit curseur en dessus. Ce curseur sert à changer la valeur de cette variable directement en le faisant glisser vers la droite ou la gauche.

Pour ce projet, nous allons choisir l’affichage avec seulement la valeur de la variable. Il faut aussi positionner les cadres contenant les valeurs des variables à la bonne place sur l’écran.

Code Scratch pour le lutin Cody

C’est ce lutin qui va demander les deux nombres et l’opération à effectuer à l’utilisateur.

Nous positionnons le lutin Cody et affectons 0 à toutes les variables.

Nous demandons quel est le premier nombre choisi et nous affectons sa valeur à la variable nombre1.

Nous faisons la même chose avec le deuxième nombre

Nous allons maintenant demander à l’utilisateur quel type d’opération il souhaite effectuer.

Il faut maintenant s’assurer que la réponse sera +, -, * ou /. Si l’utilisateur entre une autre réponse, le programme sera bloqué lorsqu’il essaiera de savoir quelle opération doit être effectuée. Nous allons donc utiliser une boucle qui s’exécutera tant que la valeur de la variable opération ne sera pas la bonne.

Rappel

Vous pouvez consulter, si vous le souhaitez, la ressource théorique “La notion de boucle” : cliquer

L’instruction utilisée est répéter jusqu’à condition booléenne dans les blocs de type “Contrôle“. Toutes les instructions comprises dans cette boucle seront exécutées tant que la condition booléenne ne sera pas vraie. Dans notre exemple, nous avons 4 conditions différentes possibles pour la réponse :

+

–

*

/

Une seule de ces conditions est nécessaire pour que le programme puisse continuer, il faut donc que l’on sorte de la boucle lorsque l’utilisateur aura entré +, -, * ou / au clavier. Nous utiliserons, pour sortir de cette boucle, le test réponse==“+” ou réponse==“-” ou réponse==“*” ou réponse==“/”.

Nous insérons le code demandant à l’utilisateur quel type d’opération il souhaite effectuer.

Maintenant que nous connaissons l’opération a effectuer, nous allons faire appel aux lutins signe_plus, signe_moins, signe_multiplier et signe_diviser. En effet, chaque opération sera effectuée par le lutin considéré. Pour envoyer un message à un lutin, nous allons utiliser la commande envoyer à tous message dans les blocs de type “Evénement”. Lorsque nous utilisons cette instruction, le lutin dans lequel nous avons placé le bloc quand je reçois message exécute les instructions placées sous ce bloc.

Lorsque l’opération demandée est une addition, nous exécuterons la série d’instructions suivantes :

Nous faisons de même pour les trois autres opérations.

L’affichage du résultat se fera par le biais du lutin qui exécute l’opération, comme nous allons le voir dans la suite.

Code Scratch pour le lutin signe_plus

Ce lutin calcule le résultat lorsque l’opération demandée est une addition, ensuite il affiche le résultat.

Au déclenchement du programme, nous plaçons le lutin entre les deux variables nombre1 et nombre2 puis nous le cachons.

Lorsque le message plus est envoyé par le programme, nous affichons le lutin et nous affectons la valeur nombre1 + nombre2 à la variable resultat.

Nous effectuons la même démarche pour les trois lutins suivants.

Code Scratch pour le lutin signe_moins

Code Scratch pour le lutin signe_multiplier

Code Scratch pour le lutin signe_diviser

Pour aller plus loin

Dans le cas de la soustraction, nous pouvons demander au programme de choisir une valeur pour la variable nombre1 supérieure à celle de nombre afin d’avoir toujours un résultat positif.

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Le nombre mystère

Description du projet

Le but de ce projet est de faire tirer un nombre aléatoire entre 1 et 100 par le programme. L’utilisateur devra ensuite le deviner en faisant des propositions. A chaque proposition, l’ordinateur dira si le nombre mystère est plus grand ou plus petit que celui proposé.

Ce projet, destiné aux débutants, va donner l’occasion de manipuler des instructions très utilisées en programmation : les tests et les boucles. L’élève devra aussi utiliser une variable.

Lien

Vous pouvez consulter les ressources théoriques sur

les tests: cliquer

la notion de boucle: cliquer

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut et ajouter le lutin “lutin_cody_nombremystere.png” contenu dans les ressources

Ajouter l’image d’arrière-plan “fond_scene_nombremystere.png” contenue dans les ressources. Cette image sert uniquement de décor, elle n’est pas obligatoire pour le fonctionnement du programme

Partie 2 – Programmation

Méthode utilisée pour la programmation :

tirage d’un nombre aléatoire entre 1 et 100 (le nombre mystère);

le joueur propose un nombre;

l’ordinateur compare avec le nombre mystère et annonce plus petit ou plus grand si ce n’est pas le bon et gagné si c’est le bon nombre.

Pseudo code pour le lutin Cody

nombre_mystere←nombre aléatoire entre 1 et 100 TantQue reponse!==nombre_mystere Lire reponse Si reponse<nombre_mystere Alors Ecrire "Le nombre mystère est plus grand" Sinon Ecrire "Le nombre mystère est plus petit" Fin Si Fin TantQue Ecrire "Bravo, vous avez trouvé le nombre mystère"

Programmation dans Scratch

Variable utilisée dans le projet :

nombre_mystere : cette variable contient le nombre aléatoire entre 1 et 100.

Nous devons d’abord positionner le lutin Cody au bon endroit et avec la bonne taille.

Ensuite nous tirons un nombre aléatoire pour le nombre mystère.

On commence par demander à l’utilisateur de choisir un nombre. Ensuite, nous comparons cette proposition avec le nombre mystère. Si la réponse est plus petite que le nombre mystère, nous affichons “Le nombre mystère est plus grand”, sinon, si la réponse est plus grande, nous affichons “Le nombre mystère est plus petit”.

Nous allons créer une boucle qui s’exécutera tant que la bonne réponse n’est pas trouvée.

Nous insérons le code précédent dans la boucle pour que le programme s’exécute tant que le joueur n’a pas la solution.

Lorsque l’on sort de la boucle, c’est que la bonne réponse est trouvée. On affiche donc le message pour dire que le joueur à gagné.

Pour aller plus loin

On peut rajouter un compteur qui indiquera en combien de coups la réponse a été trouvée.

On peut tester si le nombre proposé est bien compris entre 1 et 100. Si ce n’est pas le cas, on affiche une message stipulant qu’il faut choisir un nombre entre 1 et 100 et on n’incrémente pas le compteur de coups.

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Un dé, une pièce

Description du projet

Dans ce projet, nous allons dessiner un graphique en nous aidant d’un dé et d’une pièce. Le dé déterminera la longueur de la ligne à tracer et la pièce nous indiquera le sens dans lequel tracer la ligne. Nous tracerons alternativement des lignes horizontales et verticales. Si la pièce tombe coté pile, nous choisirons le signe plus et, inversement, si elle tombe coté face, nous choisirons le signe moins. Ainsi avec un tirage de dé de 5 et la pièce coté face, pour une ligne horizontale, nous nous déplacerons de -5 unités suivant l’axe des x.

Le point de départ se trouve au centre de la feuille, nous commencerons par un déplacement horizontal et nous ferons vingt tirages aléatoires, soit dix déplacements horizontaux et dix déplacements verticaux.

Ce projet permet à l’élève de se familiariser avec les entiers relatifs et avec le déplacement dans un repère orthonormé en deux dimensions. Les tirages aléatoires du dé et de la pièce leur permettront aussi d’aborder la notion de hasard.

Partie 1 – Préparation de l’application et ajout des ressources

supprimer le lutin Scratch par défaut;

ajouter l’arrière-plan “fond_cahier_de_piece.png” fourni dans les ressources;

créer le lutin Dessin. Dans l’éditeur dessiner un carré de 4 pixels de coté. N’oublier pas de positionner le centre du costume au centre du carré;

ajouter les lutins “lutin_De_de_piece.sprite2” et “lutin_Piece_de_piece.sprite2” fournis dans les ressources. Les fichiers fournis contiennent déjà les costumes des lutins.

Partie 2 – Programmation

Le programme doit suivre le cheminement suivant :

effectuer les tirages aléatoires du dé et de la pièce;

tracer une ligne horizontale. La longueur est déterminée par le dé et le sens du dessin par la pièce;

effectuer les tirages aléatoires du dé et de la pièce;

tracer une ligne verticale. La longueur est déterminée par le dé et le sens du dessin par la pièce;

nous répétons ces opérations dix fois afin d’avoir vingt tirages.

Pseudo code

Pour compteur←1 à 10 De←nombre aléatoire entre 1 et 6 Piece←nombre alétoire entre 1 et 2 Afficher De Afficher Piece Si Piece==1 Alors Afficher ligne horizontale vers la droite de De unites Sinon Afficher ligne horizontale vers la gauche de De unites Fin Si De←nombre aléatoire entre 1 et 6 Piece←nombre aléatoire entre 1 et 2 Afficher De Afficher Piece Si piece==1 Alors Afficher ligne verticale vers le haut de De unites Sinon Afficher ligne verticale vers le bas de De unites Fin Si Fin Pour

Signification du pseudo code

Nous insérons toutes les instructions qui vont suivre dans une boucle qui va se répéter dix fois.

Nous effectuons les tirage aléatoires pour le dé et la pièce.

Si la valeur de la variable Piece est égale à 1 (par convention 1 : pile et 2 : face) nous traçons une ligne de De unités de longueur vers la droite.

Si la valeur de la variable Piece est égale à 2 nous traçons une ligne de De unités de longueur vers la gauche.

Nous effectuons les tirage aléatoires pour le dé et la pièce.

Si la valeur de la variable Piece est égale à 1 nous traçons une ligne de De unités de longueur vers le haut.

Si la valeur de la variable Piece est égale à 2 nous traçons une ligne de De unités de longueur vers le bas.

Programmation dans Scratch

Définissons les variables que nous allons utiliser.

De : contiendra un nombre aléatoire entre 1 et 6

Piece : Contiendra un nombre entre 1 et 2. Par convention, nous fixons que la valeur 1 correspond au coté pile et la valeur 2 au coté face.

Code Scratch pour le lutin Dessin

Nous commençons par positionner le curseur au centre de l’écran et affecter la valeur 0 aux variables De et Piece. Avec les blocs de type Stylo, nous effaçons l’écran, mettons le stylo en position d’écriture, choisissons la couleur rouge et la taille 2 pour le stylo.

Nous créons un boucle qui va nous permettre de répéter dix fois le code qui va suivre en utilisant le bloc répéter x fois. Tout le code Scratch du lutin “Dessin” qui va être décrit dans la suite devra être inséré dans cette boucle.

Nous allons écrire le code pour le déplacement horizontal. Nous effectuons le tirage aléatoire pour le dé et la pièce. L’affichage des tirages sera géré par le lutin “Pièce” et le lutin “Dé“, nous envoyons donc le message “Affichage” pour déclencher le script lié à l’affichage (il sera développé dans le code Scratch des lutins “Dé” et “Pièce“). Ensuite nous ajoutons le bloc demander et attendre pour que le joueur puisse effectuer le tracé lui même sur une feuille s’il veut s’entrainer. Nous laissons le message vide afin de ne rien afficher sur l’écran, pour continuer il suffit d’appuyer sur Entrée.

Ensuite, nous testons la variable Piece, si sa valeur est égale à 1 (coté pile) nous incrémentons l’abscisse x d’une valeur positive, si elle est égale à 2 (coté face), nous incrémentons l’abscisse x d’une valeur négative. L’unité de déplacement ne peut pas être le pixel car le dessin serait trop petit et illisible. Nous fixons cette unité à 8 pixels, ainsi, pour un tirage de dé de 5 nous nous déplacerons de 40 pixels (5 X 8). Dans ce projet, 1 unité de déplacement correspond à 1/2 carreau. Nous pourrions prendre une valeur plus grande, mais il y aurait de forte chance que le dessin ne tienne pas entièrement à l’écran.

Nous appliquons la même méthode pour le déplacement vertical. Au lieu d’incrémenter x pour le déplacement nous incrémentons y en fonction des tirages du dé et de la pièce.

Attention

Il ne faut pas oublier d’insérer les codes des déplacements horizontaux et verticaux dans la boucle répéter 10 fois.

Code Scratch pour le lutin Piece

Nous réduisons la taille du lutin et le positionnons aux coordonnées x=-200 et y=140 (dans le coin supérieur gauche). Il ne doit pas apparaître avant le premier tirage, donc nous le cachons.

Le bloc quand je reçois Affichage permet de déclencher le script qui le suit lorsque l’instruction envoyer à tous Affichage est envoyé par le lutin “Dessin“. Quand le lutin “Pièce” va recevoir ce message, il va tester la valeur de la variable Piece. Si elle est égale à 1 nous basculons sur le costume correspondant au coté pile et si elle est égale à 2 sur le costume qui correspond au coté face. Ensuite nous ajoutons le bloc montrer pour que la pièce soit affichée à l’écran.

Code Scratch pour le lutin De

Comme pour le lutin “Pièce“, nous réduisons sa taille. Nous le positionnons dans le coin supérieur droit aux coordonnées x=200 et y=140, puis nous le cachons.

Le message Affichage envoyé par le lutin “Dessin” s’adresse aussi au lutin “Dé“. Quand il reçoit ce message, il effectue une série de tests imbriqués afin de savoir sur quel costume basculer en fonction de la valeur de la variable De.

Lien

Vous pouvez consulter la ressource théorique sur la notion de tests imbriqués : cliquer

Le projet en vidéo

Pour aller plus loin

Nous pouvons effectuer tous les tirages et les présenter dans un tableau. L’élève devra dessiner la figure entièrement, avant de la faire apparaître à l’écran.

Nous pouvons aussi demander au programme de calculer si le tracé final tient dans la feuille en prenant le centre comme point de départ. Si ce n’est pas le cas, il devra placer le point de départ de telle façon que le graphique tienne sur la feuille.

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Dessin animé

Description du projet

Dans ce projet, nous allons écrire une histoire simple et la présenter sous forme de dessin animé. Les protagonistes seront représentés par des lutins que nous déplacerons à l’écran. Les dialogues se présenteront sous forme de bulles. Le scénario que nous vous proposons raconte l’histoire de Tom, un petit garçon, qui cherche son chat dans la maison mais il ne le trouve pas. Sa maman lui conseille d’aller le chercher dehors. Dans le jardin, Tom retrouve son chat perché dans un arbre, il ne peut plus descendre. Son papa va aller le chercher avec son échelle.

Dans cet exercice, l’élève va pouvoir se familiariser avec la manipulation des lutins et de leurs costumes. Il sera amener à les déplacer à l’écran, changer leurs costume et les faire dialoguer.Il devra aussi manipuler les instructions qui permettent aux lutins de dialoguer entre eux afin de déclencher les différents éléments du scénario au bon moment.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin par défaut.

Ajouter les lutins enfant, maman, papa, chat et echelle fournis dans les ressources. Les fichiers contiennent tous les costumes des lutins qui en possèdent plusieurs.

Charger les trois costumes (chambre, dehors et fin) des arrière-plans de la fenêtre scène.

Partie 2 -Programmation

Pour écrire ce programme, nous devons afficher le lutin qui est présent dans la partie du scénario, lui faire afficher ses dialogues, le déplacer s’il y a besoin. Ensuite, nous devrons déclencher l’évènement suivant. Un autre lutin peut apparaître, dialoguer, se déplacer et déclencher un nouvel évènement. Ce cheminement sera répété jusqu’à la fin de l’histoire.

Afficher un lutin, le faire dialoguer, il peut éventuellement se déplacer et ensuite déclencher déclencher l’évènement suivant.

Afficher un lutin, le faire dialoguer, il peut éventuellement se déplacer et ensuite déclencher déclencher l’évènement suivant.

… ainsi de suite jusqu’à la fin du scénario.

Programmation dans Scratch

Pour ce projet, nous n’allons pas expliquer les code Scratch lutin par lutin. En effet, le principe de ce programme est de passer d’un lutin à l’autre en fonction du scénario. Il serait incompréhensible de traiter les lutins un par un, nous allons donc suivre le cours de l’histoire et décrire le code des lutins au fur et à mesure de leurs apparitions. Avant de décrire les actions exécutées par le script, nous écrirons en gras et en italique le nom du lutin auquel il se rapporte.

arrière-plan

L’histoire commence dans la chambre de Tom, nous afficherons donc l’arrière-plan chambre en premier. Nous placerons donc les deux blocs suivants dans la fenêtre script de la scène.

enfant

Le premier personnage à entrer en scène est Tom. Nous allons donc l’afficher à l’écran avant les autres lutins. Nous le plaçons aux coordonnées x=-60 et y=-90, l’orientons vers la droite, choisissons le costume enfant1 et affichons le lutin.

Tous les autres lutins n’entrent pas en scène tout de suite, il ne faut pas qu’il soient visibles. Nous plaçons donc un bloc quand drapeau vert est cliqué suivi d’un bloc cacher au début du script de tous les autres lutins (maman, papa, chat et échelle).

Le personnage est prêt, nous pouvons commencer l’histoire. Nous lui faisons dire “maman, je ne trouve pas le chat !” pendant deux secondes. Ensuite nous utilisons le bloc envoyer à tous message. Cette instruction permet d’envoyer un message à tous les lutins présents dans le programme. Lorsqu’un lutin reçoit ce message, nous pouvons, avec le bloc quand je reçois message, déclencher un script. Attention, ces message ne seront jamais affichés à l’écran, ils ne servent qu’à faire communiquer les lutins entre eux pour qu’ils puissent déclencher des scripts au moment opportun.

Nous envoyons le message “maman”, il est destiné au lutin maman.

Note

Lorsque, dans un script, un lutin envoie un message, il est possible de savoir à qui il est destiné. Il suffit de cliquer sur l’instruction envoyer à tous message avec le bouton de droite de la souris et de sélectionner show receivers dans le menu déroulant. Le ou les lutin(s) qui reçoive(nt) ce message est(sont) entouré(s) en jaune dans la fenêtre qui contient tous les lutins. Nous pouvons aussi savoir qui envoie un message lorsque dans un script nous voyons l’instruction quand je reçois message. Pour cela, nous cliquons avec le bouton droite de la souris sur l’instruction et le lutin qui a envoyé le message est entouré en jaune.

maman

Le message envoyé par le lutin enfant est destiné au lutin maman, nous ajoutons donc un bloc quand je reçois maman dans la fenêtre script du lutin maman. Nous allons coller, à la suite de ce bloc, toutes les instructions qui vont permettre à l’histoire de se dérouler. Dans notre scénario, la maman doit demander à Tom s’il a bien cherché dans toute la maison. Tout d’abord, nous plaçons le lutin aux coordonnées x=240 et y=-80 (sur le bord de droite de l’écran) et nous montrons le lutin. Nous utilisons l’instruction glisser en 1 secondes à x:70 y:-80. Le lutin va se déplacer d’un point à l’autre en une seconde, donnant ainsi l’impression que la maman entre dans la chambre.

Note

Vous n’êtes pas obligé de taper les valeurs des coordonnées x et y des lutins dans les blocs aller à x: y: , glisser en .. secondes à x: y: … Il suffit de placer le lutin à l’endroit où l’on désire le voir dans la fenêtre scène, les coordonnées sont automatiquement affichées dans les instructions qui nécessitent ces coordonnées. Il suffit alors de prendre le bloc considéré et de le placer dans la fenêtre script. Ainsi, même les utilisateurs qui ne maîtrisent pas le système de coordonnées dans Scratch peuvent créer des dessin animés.

Ensuite, nous faisons afficher le dialogue “Tu as bien cherché dans toute la maison ?” pendant trois secondes. Les temps d’affichage des dialogues sont arbitraires pour l’instant, vous pouvez les modifier si les utilisateurs n’ont pas assez de temps pour lire. Ensuite, nous envoyons le message “Maman demande si Tom a bien cherché”. Ce message est destiné au lutin enfant. Les messages envoyés peuvent être plus court. Nous avons choisit des messages longs, qui décrivent bien les situations, afin de bien suivre le cheminement du scénario.

enfant

Lorsqu’il reçoit le message “Maman demande si Tom a bien cherché”, le lutin enfant bascule sur le costume enfant2 et répond “Oui, j’ai cherché partout.”. Le message “Le chat n’est pas dans la maison” est envoyé.

maman

Quand le lutin reçoit le message “Le chat ,n’est pas dans la maison”, elle répond “Alors, c’est qu’il doit être dehors.” et nous le faisons basculer sur le costume2 pour l’orienter vers la droite. Nous faisons glisser le lutin vers la position par laquelle il est entré et nous le cachons. Il envoie en suite le message “Va chercher dehors”. Le lutin maman n’apparaîtra plus dans l’histoire, il restera caché jusqu’à la fin.

enfant

Nous basculons sur le costume enfant1 et Tom répond “D’accord, je vais aller chercher dans le jardin.”. Nous le faisons sortir par le bord de droite de l’écran et le cachons. Ensuite nous envoyons le message “Tom va dehors”. Ce message s’adresse à l’arrière-plan et aux lutins echelle et chat. Nous expliquerons ce qu’il se passe pour ces blocs par la suite, car, pour l’instant, Tom n’a pas fini ses actions.

Ensuite, nous plaçons le lutin enfant devant la porte de la maison (x=-15 et y=-60 Ne pas oublier que les coordonnées s’écrivent automatiquement dans les blocs lorsque nous plaçons le lutin à la position désirée.). Nous l’orientons vers la gauche, le faisons se déplacer puis nous utilisons le bloc penser à .. pendant .. secondes. Ce bloc permet d’afficher un dialogue (comme dire .. pendant .. secondes), la seule différence vient de la forme de la bulle qui évoque quelqu’un qui pense. Nous lui faisons donc penser “Où peut-il bien être ? Je ne le trouve pas.” pendant trois secondes, l’orientons vers la droite et le faisons glisser jusque vers l’arbre. Lorsque Tom se trouve au pied de l’arbre, il va dire “Oh, il est dans l’arbre et il ne peut pas descendre”, puis le lutin envoie le message “Le chat est dans l’arbre”.

Avant d’examiner ce qui se passe lorsque le message “Le chat est dans l’arbre” est reçu, nous devons d’abord nous intéresser au message “Tom va dehors”. Quand le lutin enfant a envoyé ce message, il a continué à effectuer des actions. Par contre, d’autres lutins ont reçu ce message, leurs scripts seront donc effectuer en même temps que celui que nous venons de décrire juste au-dessus.

arrière-plan

Lorsqu’il reçoit le message “Tom va dehors”, nous faisons basculer l’arrière-plan sur le costume dehors qui représente la maison et l’arbre.

chat

Lorsqu’il reçoit le message “Tom va dehors”, nous positionnons le chat dans l’arbre et le faisons apparaître.

echelle

Quand l’arrière-plan représentant l’extérieur de la maison est affiché, nous positionnons l’échelle contre le mur (x=-160 et y=-40) et la faisons apparaître.

Les deux lutins et l’arrière-plan qui ont reçu le message “Tom va dehors” et qui ont exécuter leur script en même temps que le lutin enfant, ont maintenant fini leurs actions. Nous pouvons passer au traitement des actions déclenchées par le message “Le chat est dans l’arbre” envoyé par le lutin enfant à la fin de son dernier script.

papa

Le message “Le chat est dans l’arbre” était destiné au lutin papa. Pour son entrée en scène, nous positionnons le lutin sur la gauche de l’écran (x=-240 et y=-80), l’orientons vers la droite, l’affichons et le faisons glisser vers Tom. Il demande “Qu’est-ce qu’il se passe ici ?” et envoie le message “Que se passe-t’il ?”.

enfant

Lorsque le papa demande ce qu’il se passe, nous orientons le lutin enfant vers la gauche, le basculons sur le costume2 et lui faisons répondre “Le chat est dans l’arbre et il ne peut pas descendre tout seul.”. Nous envoyons le message “Il faut l’échelle” et basculons sur le costume1.

papa

Lorsqu’il reçoit le message “Il faut l’échelle”, nous basculons sur le costume papa2 et affichons le dialogue : “Heureusement, il y a l’échelle, je pense qu’elle est assez grande.”. Nous le faisons se déplacer vers l’échelle en basculant sur le costume papa4 qui donne l’impression que le lutin saisi l’échelle. Nous envoyons le message “Papa amène l’échelle“. Comme précédemment, le lutin papa continue ses actions après avoir envoyé le message. Nous continuons de décrire le code pour ce lutin et verrons les actions effectuées suite à ce message par les autres lutins par la suite.

Nous déplaçons le lutin au pied de l’arbre en deux secondes (x=79 y=-78) et le faisons monter à l’échelle en une seconde (x=113 y=48). Nous basculons sur le costume papa4 et affichons “Viens petit chat, je vais t’aider à descendre.” et envoyons le message “Papa attrape le chat”. Ensuite, nous introduisons un temps d’attente de une seconde. Ce temps d’attente va permettre au lutin chat, qui aura reçu le message “Papa attrape le chat.” de se déplacer jusque dans le bras du papa, comme nous allons le voir tout à l’heure.

Le lutin descend de l’échelle, se tourne vers la gauche, bascule sur le costume papa3 et dit “Tiens Tom, le chat est sauvé, tu vas pouvoir lui faire un câlin pour le réconforter.” et envoie le message “Fin”.

L’histoire est finie, mais il reste à voir les actions qui ont été déclenchées par les messages “Papa amène l’échelle” et “Papa attrape le chat”.

enfant

Quand il reçoit le message “Papa amène l’échelle”, nous déplaçons le lutin enfant vers la gauche (x=-27 y=-95), pour que les deux lutins ne se trouvent pas l’un sur l’autre à la fin du déplacement du lutin papa.

echelle

Le message “Papa amène l’échelle” est envoyé lorsque le lutin papa se déplace du bord gauche de l’écran vers l’arbre avec l’échelle dans les mains. Nous devons donc déplacer le lutin echelle en même temps que le lutin papa. Nous le faisons donc glisser pendant deux secondes vers sa position d’arrivée contre l’arbre. Ici, le temps pour le déplacement n’a pas été choisir de manière arbitraire, il doit obligatoirement être le même que celui que met le lutin papa pour faire le même trajet afin que les deux lutins soient synchronisés. Ainsi, nous avons l’impression que le papa porte l’échelle jusqu’au pied de l’arbre.

Nous avons fini de traiter les actions déclenchées par le message “Papa va chercher l’échelle”, intéressons nous maintenant au message “Papa attrape le chat” envoyé par le lutin papa au lutin chat.

chat

Quand ce lutin reçoit le message “Papa attrape le chat”, nous le déplaçons jusque dans les bras du lutin papa en une seconde. Nous avons vu, précédemment, que nous avons introduit un temps d’attente de une seconde dans le script du lutin papa . Ce délai permet au lutin chat de se diriger vers les bras du papa sauveur. Il faut donc que l’on ait les mêmes temps d’exécution pour ce déplacement et le délai d’attente. Ensuite, nous faisons descendre l’échelle au lutin chat. Il doit aussi mettre le même temps que le lutin papa pour effectuer cette action.

arriere-plan

Lorsque le message “Fin” est reçu, nous basculons sur l’arrière-plan fin.

Pour aller plus loin

Vous pouvez enregistrer les dialogues et faire parler les personnage plutôt que d’afficher des bulles.

Vous pouvez stimuler l’imagination des élèves en leur faisant créer de nouvelles histoires et les dessins qui leur seront associés pour créer de nouveaux dessins animés.

(code source, ressources graphiques et fiche récapitulative)

Projets SCRATCH débutants

Labyrinthe

Description du projet

Dans ce projet, nous allons déplacer un lutin dans un labyrinthe et lui faire trouver la sortie. L’élève va se familiariser avec les déplacements des lutins en utilisant les abscisses (x) et les ordonnées (y) dans un repère orthonormé. Il faudra gérer les collisions avec les murs du labyrinthe. La saisie des touches du clavier se fera à l’aide de la commande touche pressée ? dans les blocs de type “Capteurs”.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut.

Ajouter le lutin “lutin_Cody_labyrinthe.png” contenu dans les ressources du projet.

Dessiner le lutin sortie qui symbolisera l’arrivée. Dans l’éditeur de costume, tracer un rectangle de 28 pixels de largeur et d’environ 10 pixels de hauteur de la couleur que vous voulez. Il faut bien respecter la longueur pour que le lutin occupe toute la largeur de la sortie. Ne pas oublier de faire coïncider le centre du costume avec le centre du rectangle en utilisant l’outil définir le centre du costume (voir fiche projet Localisation dans un repère orthonormé). Sinon, vous pouvez utiliser le lutin “lutin_sortie_labyrinthe.png” fourni dans les ressources

Ajouter l’image d’arrière plan représentant le labyrinthe (labyrinthe.png) fournie dans les ressources. Contrairement à certains projets, cette image est essentielle car elle représente le labyrinthe dans lequel va évoluer le joueur. Vous pouvez importez une autre image représentant un labyrinthe à condition qu’elle ait une taille de 480 pixels par 360 pixels et que les murs soient noirs. Si vous changez la couleur des murs, les collisions entre le joueur et les murs ne seront pas détectées dans le programme.

Partie 2 – Programmation

La démarche à suivre pour ce programme est la suivante :

attendre qu’une touche soit pressée;

si la touche pressée est la flèche du haut et qu’il n’y a pas de mur en haut, faire monter le lutin;

si la touche pressée est la flèche du bas et qu’il n’y a pas de mur en bas, faire descendre le lutin;

si la touche pressée est la flèche de droite et qu’il n’y a pas de mur à droite, déplacer le lutin vers la droite;

si la touche pressée est la flèche de gauche et qu’il n’y a pas de mur à gauche, déplacer le lutin vers la gauche;

si le lutin atteint la sortie, signaler que le joueur a gagné et arrêter le programme;

recommencer au début.

Pseudo code

Tant que sortie touchée==faux Si touche flèche haut pressée==vrai Alors Si lutin touche mur==vrai Alors le lutin ne bouge pas Sinon l'abscisse x du lutin est incrémentée de 4 Fin Si Fin Si Si touche flèche bas pressée==vrai Alors Si lutin touche mur==vrai Alors le lutin ne bouge pas Sinon l'abscisse x du lutin est décrémentée de 4 Fin Si Fin Si Si touche flèche droite pressée==Vrai Alors Si lutin touche mur == Vrai Alors le lutin ne bouge pas Sinon l'ordonnée y du lutin est incrémentée de 4 Fin Si Fin Si Si touche flèche gauche pressée==vrai Alors Si lutin touche mur==vrai Alors le lutin ne bouge pas Sinon l'ordonnée y du lutin est décrémentée de 4 Fin Si Fin Si Si la sortie est atteinte Alors Ecrire "Bravo, tu as gagné." Fin Si Fin Tant que

Programmation dans Scratch

Code Scratch pour le lutin Cody

Nous commençons par placer le lutin représentant le joueur à l’entrée du labyrinthe et lui donner la bonne taille. Attention, si vous choisissez d’utiliser une autre image d’arrière-plan que labyrinthe, l’entrée a peu de chance de se trouver au même endroit que celui présent dans les ressources, il faudra donc positionner le lutin différemment.

Maintenant, nous allons gérer les déplacements et les collisions. Nous allons utiliser la commande couleur touchée ? pour tester si le lutin touche le labyrinthe. Ce bloc permet de savoir si le lutin touche un élément d’une couleur donnée présent sur l’écran. Les murs du labyrinthe sont noirs, nous effectuerons le test sur la couleur noire.

Nous pourrions utiliser le code suivant pour gérer le déplacement du lutin.

Nous faisons avancer le lutin de 4 pixels vers le haut si la touche ↑ est pressée et si le lutin ne touche pas la couleur noire (mur du labyrinthe). Le problème vient du fait que le lutin peut très bien ne pas être en contact avec le mur avant de se déplacer et se retrouver à le toucher après le déplacement. Par exemple, s’il se trouve à 3 pixels du mur, il pourra avancer vers lui, mais à la fin du déplacement, il touchera le mur. On arrive donc dans une position que le programme ne peut pas gérer, en effet, dans l’algorithme tel que nous l’avons écrit, il n’y a rien de prévu dans le cas où le lutin touche le mur.

Cette méthode ne peut pas fonctionner, il faut trouver un autre moyen de gérer les collisions.

Nous allons d’abord faire avancer le lutin, dès que son déplacement est terminé, nous testons s’il touche le mur. S’il ne touche pas, nous laissons le lutin en place et attendons la prochaine commande. Si le lutin touche le mur, nous le ramenons à sa position de départ en le faisant reculer du même nombre de pixels qu’il avait avancé. Nous pouvons écrire le code Scratch suivant qui correspond à cette procédure de la façon suivante pour le déplacement vers le haut :

Si la flèche du haut est pressée, nous ajoutons 4 pixels à l’ordonnée (y) du joueur pour le faire monter. A la fin du déplacement, nous testons si le lutin touche la couleur noire. Si c’est le cas, nous le renvoyons à sa position de départ en enlevant 4 pixels à l’ordonnée du joueur.

Le déplacement, le test et le retour au point de départ se font si rapidement que nous n’avons pas le temps de voir le lutin avancer et reculer à l’écran lorsqu’il se trouve contre le mur.

Nous répétons cette opération pour les déplacements dans les trois autres directions.

Si nous laissons le code tel quel, nous ne pourrons effectuer qu’un seul déplacement. Il faut donc insérer la partie qui gère les déplacements dans une boucle. Nous pourrions le faire dans une boucle infinie répéter indéfiniment et tester à la fin de chaque déplacement si la sortie est atteinte.

Nous allons plutôt utiliser l’instruction répéter jusqu’à condition. Dans la condition, nous allons introduire le bloc lutin touché ? , qui permet de savoir si notre lutin en touche un autre. Lorsque notre lutin Cody touchera le lutin sortie, c’est qu’il a atteint son but, nous pouvons donc sortir de la boucle et écrire que le joueur a gagné.

Code Scratch pour le lutin sortie

Ce lutin nécessite juste d’être placé à la bonne position.

Pour aller plus loin

Nous pouvons ajouter des costumes différents pour le lutin Cody pour qu’il change d’apparence suivant la direction dans laquelle il se déplace.

(code source, ressources graphiques et fiche récapitulative)