Circuit de voiture

CodeWeekFR2018
Public : enfants
Durée de l'activité : 1H
Ressources : Vidéo Youtube
Element d'évaluation des acquis :
  • Dessin (en mode pixel ou raster),
  • Scripts : algorithmes / séquences d’instructions,
  • Blocs de branchement conditionnel (si ….)
  • Tests logiques (capteurs, couleur touchée, ...)
  • Couleur et catégorie des blocs,
  • Forme des blocs et règles d'assemblage
  • Systèmes de coordonnées (x, y)
Aménagement et matériel spécifique nécessaire : Poste connecté à internet pour accès à Scratch (https://scratch.mit.edu/) ou avec Scratch pré-installé
Capacités de l'animateur : Encourager les participants à s'aider entre eux (pair/shoulder programming)

Description Générale

Dessiner un circuit et y faire circuler une voiture en l’empêchant de sortir de la route. Lorsqu’elle touche la couleur de fond, elle revient au départ et lorsqu’elle touche la ligne d’arrivée, elle indique qu’elle a gagné.

Objectifs pédagogiques

Notion de Programme :
  • construit avec des séquence ordonnées d'instructions (blocs) qui commencent par un évènement
  • pour réaliser quelque chose comme un jeu ou une application, pour des utilisateurs ou pour quelqu'un.
Revue des blocs à travers leur forme et leur couleur
  • Marron foncé pour les évènements au début des scripts
  • Beige pour les blocs de contrôle et de branchement conditionnel, qui modifient le déroulement du programme.
  • Bleu pour les instructions de mouvement : déplacements et orientation,
  • Bleu/violet pour les blocs qui modifient l'apparence dont la taille ou les bulles de texte,
  • Violet pour les sons,
  • Bleu ciel pour les capteurs, comme le bloc qui capte si une couleur est touchée
  • Orange pour les données
  • Vert pour les calculs.
Forme des blocs : correspondance à leur contenu et à la manière dont on peut les assembler.
  • avec encoches que l'on peut empiler comme des legos et qui sont exécutés dans l'ordre, de haut en bas.
  • à dos rond : au début de chaque script, on ne peut rien mettre avant.
  • à fond plat : on ne peut rien mettre en dessous. C'est le cas du bloc "stop tout"
  • arrondis sur les côtés qui contiennent une valeur. Ils ont utilisés à l'intérieur les autres blocs,
  • pointus sur les côtés qui contiennent : vrai ou faux. On les utilise surtout dans les blocs de contrôle.

Déroulement

Dessiner un circuit et y faire circuler une voiture en l’empêchant de sortir de la route. Lorsqu’elle touche la couleur de fond, elle revient au départ et lorsqu’elle touche la ligne d’arrivée, elle indique qu’elle a gagné.

Réalisation

Vous pouvez suivre les indications de cette vidéo ou celles qui suivent.

Point de départ : Pour cette première version, vous pouvez créer un nouveau projet, ou démarrer à partir du canevas de projet qui comprend déjà un dessin de la piste et deux blocs de démarrage.

Dessin du circuit et création du lutin voiture

  • Créez un nouveau projet Scratch et sélectionnez la scène (en bas à gauche) puis l’onglet Arrière-plan (en haut vers la droite).
  • Vérifiez que vous êtes en mode bitmap avec le menu à gauche de la zone de dessin. Si le menu est à droite (mode vecteur), cliquez sur le bouton Bitmap en bas à droite.
Dessin fond Dessin Arrière plan
  • Remplir avec un fond vert,
  • puis dessiner une route noire avec un pinceau de largeur maximale,
  • et avec un trait plus fin, de couleur différente, une ligne droite qui correspond à la ligne d’arrivée.
Dessin route Dessin ligne d'arrivée
  • Créez un nouveau lutin correspondant à la voiture, en choisissant une image dans la librairie. Choisissez plutôt une image compacte plutôt que pointue ou allongée. Ca sera plus facile.
Nouveau lutin Choix voiture
  • Renommez ce lutin en “voiture” après avoir appuyé sur le i du lutin.
  • puis supprimez le lutin “Sprite1” en sélectionnant les ciseaux (en haut) et en cliquant sur le lutin à supprimer.
Nommer lutin Detruire lutin

vous pouvez aussi pointer sur le lutin à supprimer et cliquer avec le bouton droit pour faire apparaitre un menu contextuel (ou sur certains navigateurs en appuyant sur la touche majuscule/shft et en cliquant sur le bouton gauche). Vous aurez alors l’option “supprimer”.

Sélection des deux évènements (blocs de contrôle) auxquels le programme doit réagir.

Depuis l’onglet des blocs de contrôle dans le panier des blocs, glissez/déposez vers la zone de programmation

  • un bloc “Quand on clique sur le drapeau vert “pour le démarrage du jeu
  • et un bloc “Quand la barre d’espace est pressée ” pour faire avancer la voiture
Event blocks

Programme ou script correspondant au clic sur Drapeau vert : démarrage du jeu

  • Ajoutez un bloc de mise à l’échelle, Mise echelle blocks
    et réglez la valeur à l’intérieur du bloc, pour que la taille de la voiture soit à peu près un tiers de la largeur du circuit;
    A chaque fois que l’on clique sur le bloc, il s’exécute et change la taille de la voiture pour la valeur donnée dans le bloc.L1_deplacerLutinAuDepart.png
  • Glissez / Déplacez la voiture avec la souris pour la mettre devant la ligne d’arrivée, sans qu’elle touche cette ligne, ni les bords de la route. Les coordonnées du curseur sont alors affichées en bas à droite.
    Vous pouvez donc connaitre les coordonnées de l’endroit où est la voiture en mettant le pointeur de la souris sur la voiture. Notez ces coordonnées x et y (par exemple x = -55 et y = 109).
    L1_deplacementBlocks.png
  • Nous allons maintenant ajouter un bloc qui va faire glisser la voiture à cet endroit au début du jeu, quand on clique sur le drapeau vert.
  • Dans la catégorie (ou l’onglet) des mouvements nous avons le choix entre le bloc “aller à x:_ y:_ ” ou le bloc “glisser en _ secondes à x:_ y:_ ” pour déplacer ou faire glisser la voiture au coordonnées de départ x et y. Nous prendrons le deuxième bloc.
  • Ajoutez le bloc “glisser en 1 secondes à x:_ y:_” après le bloc de mise à la taille, puis vérifiez que les coordonnées. Si ce ne sont pas les mêmes que celles que vous avez notées, modifiez les avec les valeurs notées. Si vous avez déplacé la voiture au bon endroit juste avant, les coordonnées seront bonnes car les nouveaux blocs de déplacement ont automatiquement les coordonnées x et y du dernier déplacement. L1_TailleEtdeplacementBlocks.png
  • Pour tester, déplacez la voiture n’importe où avec la souris et cliquez sur le drapeau vert ou le bloc de déplacement. La voiture doit retourner au point de départ.Nota 1: le fait que les coordonnées des blocs de déplacement soient mises à jour automatiquement après chaque déplacement, évite de passer du temps à expliquer les systèmes de coordonnées, mais il faut le signaler aux participants pour qu’ils comprennent pourquoi le lutin va au bon endroit.Nota 2: vous pouvez également ajouter un bloc d’orientation de la voiture dans le sens de la piste (ça évite parfois des contacts avec les bords quand la voiture est mal orientée).

Programme (script) correspondant à « quand barre d’espace pressée » : faire avancer la voiture

  • Ajouter un bloc d’orientation vers le pointeur de la souris
  • Ajouter un bloc pour avancer (de 4 pixels) L1_TailleEtdeplacementBlocks.png

Remarque :

Si la barre d’espace reste pressée, après l’exécution de ces 2 blocs, ils sont de nouveau exécutés puisque la barre d’espace est toujours pressée. Donc la voiture avance tant que l’on appuie sur la barre d’espace. Nous modifierons ce comportement dans une version suivante.

Tester le fonctionnement du jeu en l’état, et discuter de ce qu’il faut faire :

  • retour au départ si la voiture touche le vert,
  • et arrêt de la partie si la voiture touche le bleu (arrivée).

Compléter le programme ou le script qui fait avancer la voiture.L1_avancer1Blocks.png

  • Ajouter un bloc de contrôle de branchement conditionnel : si … alors
  • Mettre dans la condition un test « couleur touchée » et choisir la couleur avec la pipette
  • A l’intérieur du bloc de test, dupliquer le bloc qui renvoie au départ. Ce bloc ne sera exécuté que si la réponse du test est vraie (i.e. si la voiture touche le vert)
  • Dupliquer le bloc de branchement conditionnel, mais avec la couleur de la ligne d’arrivée.
  • A l’intérieur utilisez un bloc qui affiche « j’ai gagné » puis ajouter un bloc “stop tout”.

Tester le fonctionnement du jeu,

Debriefing sur les notions mises en œuvre et préparation des leçons suivantes

Revue des notions mises en œuvre

  • Programmer :
    On programme pour réaliser quelque chose, comme un jeu ou une application utile à quelqu’un. Les jeux les plus réussis sont ceux où le créateur a pris le temps de penser à la manière dont les utilisateurs vont jouer et à ce qui va les amuser.
  • Un programme est construit avec des séquences de blocs qui commencent par un évènement La séquence d’instructions qui correspond à chaque évènement s’appelle un script. Chaque script concerne le lutin dans lequel il est écrit (par exemple la voiture). Dans un programme il peut y avoir beaucoup de lutins et beaucoup de scripts. Ca devient parfois difficile de s’en rappeler.
  • La couleur et la forme des blocs :
    La couleur des blocs correspond à leur catégorie fonctionnelle
  • Marron foncé pour les évènements, qui démarrent des séquences d’instructions, par exemple quand le joueur clique sur le drapeau vert ou appuie sur la barre d’espace.
  • Beige pour les blocs de contrôle, qui permettent de modifier le déroulement de la suite du programme. Nous avons utilisé un bloc si : les instructions à l’intéreieur ne sont exécutés que si la condition est vérifiée ou vraie.
  • bleu pour les blocs ou instructions de mouvement : déplacements et orientation,
  • bleu/violet pour les blcs qui modifient l’apparence dont la taille ou les bulles de texte,
  • violet pour les sons que nous utiliserons plus tard,
  • bleu ciel pour les capteurs,comme le bloc qui capte si une couleur est touchée
  • orange pour les données et vert pour les blocs de calcul.

La forme des blocs correspond à leur contenu et à la manière dont on peut les assembler.

  • La plupart des blocs ont une encoche au-dessus et une en-dessous. On peut les empiler en séquence dans un script. Ils sont exécutés dans l’ordre, de haut en bas.
  • Certains blocs ont le dos rond, on ne peut rien mettre avant. Ils démarrent chaque séquence ou script et correspondent le plus souvent aux évènements extérieurs au programme, par exemple quand le joueur clicke sur le drapeau vert. (Nous verrons plus tard que le programme peut également générer des évènements, avec les messages).
  • Certains blocs ont le fond plat, on ne peut pas coller de bloc en dessous. C’est le cas du bloc stop tout
  • Il y a aussi des blocs qui n’ont pas d’encoche et qui sont arrondis ou pointus sur les côtés.Ces blocs contiennent une valeur, que l’on utilise à l’intérieur les autres blocs, comme les blocs de contrôle.
  • Les blocs pointus ne peuvent prendre que 2 valeurs, vrai ou faux. Ils correspondent à ce qu’on appelle des variables booléennes. On les utilise surtout dans les blocs de contrôle, par exemple pour savoir si les instructions à l’intérieur du bloc doivent être exécutées. Les blocs arrondis que nous verrons dans la leçon suivante, peuvent contenir des nombres ou des textes ou chaînes de caractères.
  • La valeur de ces blocs peut être le résultat d’un calcul ou d’un test, par exemple

contient la valeur Faux,

contient la valeur 7,

contient la valeur textuelle“Vous avez perdu”,

Préparer les étapes suivantes

Faites discuter les participants sur le jeu et la manière de l’améliorer.
Comme ils en sont à leur 1° ou 2° leçon, vous ne pourrez pas passer tout de suite en création libre, mais vous pourrez situer les prochaines leçons comme des améliorations de la première version. Dans un premier temps, proposez de travailler sur les idées ci-dessous. Nous les avons classées dans l’ordre des exercices suivants :

  • Ajouter des sons
  • Compter les vies (fin du jeu quand la voiture n’a plus de vies)
  • Changer la vitesse de la voiture, accélérer et ralentir
  • chronométrer les tours,
  • compter les tours,
  • Choisir et changer sa voiture
  • mettre des obstacles,
  • attaquer la voiture, lancer des pierres,
  • passer par une pompe à essence, tomber en panne
  • faire plusieurs niveaux,