Présentation et réalisation d'une première version du jeu

Durée estimée: 45 minutes

Ce que l’on va 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é.

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 https://scratch.mit.edu/projects/175146528/ qui comprend déjà un dessin de la piste et deux blocs de démarrage.

Notions abordées :

utilisation du dessin (en mode pixel ou raster)
scripts et séquences d’instructions ordonnées,
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)

Déroulement

Dessin du circuit et création du lutin voiture
- Créez un nouveau projet Scratch et sélectionner 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.
- 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.
- 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.
- 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.
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. Les coordonnées du curseur sont 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 (dans l'image x = -55 et y = 109).
- Nous allons maintenant prendre 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 pouvons chosir 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 aux coordonnées x et y. Nous prendrons le deuxième bloc.
  Il faut y écrire les coordonnées de départ de la voiture que vous avez notées. Mais en fait, elles y sont peut-être déjà car les coordonnées des blocs du panier sont automatiquement mises à jour pour correspondre aux coordonnées x et y du dernier objet déplacé.
  C'est ce que vous venez de faire.
  Ajoutez le bloc après le bloc de mise à la taille, puis vérifiez que les coordonnées sont bonnes, déplacez la voiture avec la souris et cliquez sur le bloc. La voiture doit aller au bon endroit.
  Nota 1: le fait que les coordonnées des blocs du panier soient mises à jour automatiquement après cahque 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'orienation de a voiture dans le sens de la piste (ça évite parfois des contacts avec les bords quand la voitier 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)
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.
- 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 oeuvre et préparation des leçons suivantes

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 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 pur 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 comme des legos 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 aucune 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 leçons 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,

Page précédente

Page suivante

Circuit voiture