Circuit V1

Durée estimée: 45 minutes

Ce que vous allez faire :

Dessiner un circuit et y faire circuler une voiture en l’empêchant de sortir de la route. Lorsqu'elle touche le vert (couleur de fond), elle revient au départ et lorsqu'elle touche la ligne d'arrivée, elle dit qu'elle a gagné.
Vous pourrez le faire en suivant la vidéo ou les instructions ci-dessous.
Compléter (par vous même) cette version pour que la voiture continue à avancer quand on relâche la barre d'espace,
faire une revue classe entière des notions mises en oeuvre

Notions abordées :

dessin en mode pixel ou raster,
scripts et séquences d’instructions,
blocs de branchement conditionnel (si …),
test sur capteur : couleur touchée,
couleur des blocs : correspondance avec leur catégorie (fonctionnelle)
forme des blocs : correspondance avec les règles d'assemblage
coordonnées x, y

Réalisation

Ressources de départ :

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

Remarque :
Dans les versions suivantes, nous vous demanderons d'utiliser le même fond de scène (circuit) et le même costume pour la voiture, afin que le fonctionnement soit similaire pour tous les participants. Ca ne vous empêchera pas de créer un 2° fond scène à votre goût et un 2° costume pour la voiture, mais pour le travail en commun nous utiliserons les mêmes.

ou Réaliser avec un guide vidéo :

Réaliser avec un guide pas à pas

Dessin du circuit et création du lutin voiture
- Créez un nouveau projet Scratch et sélectionnez la scène (en bas à droite) puis l'onglet Arrière-plan (en haut vers la droite).
- Vérifiez que vous êtes en mode bitmap. Le bouton en bas à gauche doit être "convertir en mode vecteur". Sinon, cliquez sur "convertir en mode bitmap"
- Remplir avec un fond vert,
- puis dessiner une route noire avec un pinceau de largeur maximale (100),
- et avec un trait plus fin, en bleu, une ligne droite qui correspond à la ligne d’arrivée.
- Créez un nouveau sprite 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.
- Renommez ce sprite en "voiture".
- puis sélectionnez et supprimez le sprite "Sprite1".
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
Programme ou script correspondant au clic sur Drapeau vert : démarrage du jeu
- Ajouter un bloc de mise à l’échelle,
  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.
- 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.
- Dans la catégorie des mouvements récupérer le bloc "aller à x:_ y:_ " ou le bloc "glisser en _ secondes à x:_ y:_ " pour déplacer ou faire glisser la voiture à cet endroit. Les coordonnées x, y correspondent au dernier déplacement du sprite. Vous ne devriez donc pas avoir besoin de les modifier. Sinon ajustez les valeurs de x et y et cliquez sur le bloc pur vérifier.
  Placez le bloc de déplacement après le bloc de mise à la taille. Pour vérifier que les coordonnées sont bonnes, déplacez la voiture avec la souris et cliquez à nouveau sur le bloc. La voiture doit revenir au bon endroit.
  Nota: vous pouvez également ajouter un bloc d'orientation de la voiture pour quelle soit dans le sens de la piste.
Programme (script) correspondant à « quand barre d’espace pressée » qui fait avancer la voiture
- Ajouter un bloc d’orientation vers le pointeur de la souris
- Ajouter un bloc pour avancer (de 4 pixels)
Tester le fonctionnement du jeu en l’état, et identifier ce qui reste à faire :
1. retour au départ si la voiture touche le vert,
2. 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.
- 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 changez la couleur pour mettre celle de la ligne d’arrivée (utiisez la pipette pour avoir exactement la bonne couleur)
- A l’intérieur utilisez un bloc qui affiche « j’ai gagné » puis ajouter un bloc "stop tout".
Tester le fonctionnement du jeu,analyser et corriger les bugs, ajuster la taille de la voiture ou le dessin du circuit, ...

Extension à réaliser vous même

Dans le jeu que vous venez de réaliser, vous avez constaté que la voiture s'arrête quand vous cessez d'appuyer sur la barre d'espace.

C'est normal, car le script déclenché oriente et déplace la voiture une seule fois et s'arrête. Si la barre d'espace est restée appuyée, l'évènement se produit à nouveau et la voiture continue à avancer.

Mais si vous n'appuyez plus sur la barre d'espace la voiture s'arrête après l'exécution du script.

Ce que vous devez faire :

Vous devez modifier le programme pour que les opérations de déplacement soient répétées indéfiniment mêmeison ne touche plus la barre d'espace. Pour ça vous allez ajouter une structure de contrôle que nous avons déjà utilisée dans Blockly.

Trouvez laquelle et modifiez le programme.

A faire

Lorsque vous aurez terminé et vérifié que ça fonctionne, enregistrez le lien et envoyez le à cette adresse ou à celle indiquée par vos enseignants :

Revue des notions mises en oeuvre

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 comprend 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 sprite dans lequel il est écrit (par exemple la voiture).
Dans un programme il peut y avoir beaucoup de sprites et beaucoup de scripts. Ca devient parfois difficile de s'en rappeler.
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 ceux qui modifient l'apparence, 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 teste si une couleur est touchée
- orange pour les données et vert pour les blocs de calcul.
La forme des blocs correspond à 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, comme des legos. Ils sont exécutés dans l'ordre, de haut en bas.
- Certains blocs ont le dos rond, on ne peut rien mettre avant.
  Ce sont les évènements qui déclenchent l'exécution d'une séquence ou d'un script. Par exemple "quand" le joueur clique sur le drapeau vert. (Nous verrons plus loin que le programme peut envoyer des messages dont la réception est un évènement).
- Certains blocs ont le fond plat, on ne peut pas coller de bloc en dessous. C'est le cas du bloc stop tout
- Les blocs sans encoche, symétriques et arrondis ou pointus contiennent une valeur. On les utilise à l'intérieur d'autres blocs, pour représenter cette valeur.
  - Les blocs arrondis peuvent contenir des nombres ou des textes ou chaînes de caractères. Les variables sont des blocs arrondis.
  - Les blocs pointus ne peuvent valoir que 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.
  - 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",