# 🏃 Atelier Scratch : Créer et Programmer le Sprite « Joueur »
### *Séance Découverte Algorithmics — Jeu « Stika Maa » (ستيكة ماء)*
*Guide pas-à-pas pédagogique illustré (pour enfants de 7 à 12 ans et animateurs)*

---

## 🎯 L'Histoire & Le Rôle du Joueur

Dans le jeu **Stika Maa (ستيكة ماء)**, nous sommes en plein été sur la célèbre **Corniche de Boujaafar à Sousse**, face à la Méditerranée, aux pierres colorées et au drapeau tunisien flottant fièrement.

Une pénurie d'eau frappe la ville ! Une camionnette de livraison d'eau minérale **Hayat (حياة)** traverse la corniche et sème des bouteilles sur la route.

Notre héros, habillé du **maillot rouge de l'équipe de Tunisie**, a une mission vitale :
1. **Courir de gauche à droite** sur le bas de la chaussée pour attraper un maximum de bouteilles.
2. **Réunir 20 bouteilles d'eau (ستيكة ماء complète)** pour approvisionner sa famille et ses voisins.
3. **Esquiver les obstacles dangereux** : les taxis jaunes tunisiens, les Peugeot 206 et les scooters qui foncent à toute allure !

---

## 🛠️ Étape 0 : Préparer le Sprite Joueur dans Scratch

Avant d'écrire la moindre ligne de code, nous devons installer notre personnage dans la scène :

1. **Créer le sprite :**
   - En bas à droite de l'éditeur Scratch, survole l'icône de chat bleue et clique sur **« Importer un sprite »**.
   - Choisis le premier fichier : `joueur_course1.svg` (dans le dossier `assets_du_jeu/sprites/` ou téléchargeable sur le site).
   - Renomme immédiatement le lutin en **`Joueur`** dans la boîte de propriétés du sprite.

2. **Ajouter le deuxième costume d'animation :**
   - Clique sur l'onglet **Costumes** (en haut à gauche, à côté de l'onglet Code).
   - Survole l'icône bleue de chat en bas de la liste des costumes et clique sur **« Importer un costume »**.
   - Sélectionne le fichier `joueur_course2.svg`.
   - Tu as maintenant 2 costumes : `joueur_course1` (jambe gauche tendue) et `joueur_course2` (jambe droite tendue). En alternant ces deux images, on crée une véritable illusion de course animée !

3. **Régler la taille et la direction :**
   - Dans le panneau des propriétés sous la scène :
     - **Taille :** inscris **`75`** (ni trop grand pour ne pas bloquer toute la route, ni trop petit pour bien voir le maillot de la Tunisie).
     - **Direction :** laisse à **`90`** (vers la droite).
     - **Style de rotation :** clique sur la direction et sélectionne **Gauche/Droite** (les deux flèches opposées `↔`).

---

## 🧩 Vue d'Ensemble des 5 Scripts du Joueur

Voici l'ensemble des 5 programmes qui animent notre héros. Ils sont tous très courts et ont chacun une mission bien précise :

![Tous les blocs du Joueur](captures_ecran/joueur_scripts_tous.png)

```
┌─────────────────────────────────────────────────────────────────────────────┐
│                            SPRITE « JOUEUR »                                │
├──────────────────────────────┬──────────────────────────────────────────────┤
│ 1. 🏁 Drapeau vert           │ 4. 🎮 Réception START : Déplacement          │
│    └─ Position départ (0,-130│    ├─ Boucle infinie si Jeu = 1              │
│    └─ Aller à l'avant-plan   │    ├─ Touche Flèche Gauche + Limite (x > -170│
│    └─ Montrer                │    └─ Touche Flèche Droite + Limite (x < 170)│
├──────────────────────────────┼──────────────────────────────────────────────┤
│ 2. 💥 Réception GAME OVER    │ 5. 🏃 Réception START : Animation de Course  │
│    └─ Cacher                 │    ├─ Boucle infinie si Jeu = 1              │
├──────────────────────────────┤    ├─ Costume suivant                        │
│ 3. 🏆 Réception VICTOIRE     │    └─ Attendre 0.12 secondes (cadence fluide)│
│    └─ Cacher                 │                                              │
└──────────────────────────────┴──────────────────────────────────────────────┘
```

> [!IMPORTANT]
> ### 💡 La Question d'Or Algorithmics : Pourquoi 2 boucles « START » séparées ?
> Remarque bien que le déplacement (Script 4) et l'animation des jambes (Script 5) sont dans **deux scripts différents**, lancés par le même message `START`.
> **Pourquoi ne pas les mettre ensemble ?**
> Dans le script d'animation, on utilise un bloc `attendre 0.12 secondes` pour que les jambes ne clignotent pas trop vite.
> Si on mettait les touches flèches dans la même boucle, Scratch attendrait 0.12 seconde à chaque pas avant de tester si l'enfant appuie sur la flèche ! Le personnage deviendrait lourd, saccadé et répondrait très mal.
> **En séparant en 2 scripts parallèles :**
> - Le script de déplacement tourne à **60 fois par seconde** sans aucune attente : le coureur réagit au millième de seconde !
> - Le script d'animation tourne à son propre rythme régulier (environ 8 pas par seconde). C'est le principe fondamental du **multitâche en programmation** !

---

## 📌 Script 1 : L'Initialisation au Drapeau Vert 🟢

Dès qu'on clique sur le drapeau vert, on replace le joueur au centre de la route, prêt à courir.

![Script 1 - Initialisation](captures_ecran/joueur_script_1_init.png)

```scratch
quand le drapeau vert est cliqué
aller à x: (0) y: (-130)
aller à l' [avant v] plan
montrer
```

### 🔍 Décorticage Pédagogique Bloc par Bloc :
| Bloc | Catégorie & Couleur | Que fait-il ? | Pourquoi ce bloc est indispensable ? |
| :--- | :--- | :--- | :--- |
| **`quand 🏁 est cliqué`** | 🟡 **Événements** (Jaune) | Déclencheur officiel de départ. | C'est le coup de sifflet qui lance la préparation du jeu à chaque nouvelle partie. |
| **`aller à x: 0 y: -130`** | 🔵 **Mouvement** (Bleu) | Téléporte le lutin à ces coordonnées. | `x = 0` le place pile au centre de la rue. `y = -130` le place tout en bas, là où le joueur a le temps de voir arriver les bouteilles et les voitures. Sans ce bloc, le joueur resterait là où la partie précédente s'est terminée ! |
| **`aller à l'avant-plan`** | 🟣 **Apparence** (Violet) | Place le sprite au-dessus des autres couches. | Indispensable ! Sans cela, le joueur pourrait se retrouver caché sous le goudron de la route ou derrière d'autres sprites. Le héros doit toujours être bien visible au premier plan. |
| **`montrer`** | 🟣 **Apparence** (Violet) | Rend le lutin visible. | Comme les scripts de Game Over ou de Victoire cachent le joueur à la fin de la partie, il faut impérativement le réafficher quand on relance le jeu ! |

---

## 📌 Scripts 2 & 3 : La Disparition en Fin de Partie (Game Over & Victoire)

Quand le jeu s'arrête (soit parce qu'une voiture nous a percuté, soit parce qu'on a gagné les 20 bouteilles Hayat), de grands panneaux illustrés apparaissent au centre de l'écran. Le joueur doit s'effacer pour laisser place au panneau de fin.

![Script 2 - Game Over](captures_ecran/joueur_script_2_gameover.png)
![Script 3 - Victoire](captures_ecran/joueur_script_3_victoire.png)

### Code du Script 2 :
```scratch
quand je reçois [GAME OVER v]
cacher
```

### Code du Script 3 :
```scratch
quand je reçois [VICTOIRE v]
cacher
```

### 🔍 Décorticage Pédagogique :
| Bloc | Catégorie & Couleur | Que fait-il ? | Pourquoi ce bloc ? |
| :--- | :--- | :--- | :--- |
| **`quand je reçois [GAME OVER]`** | 🟡 **Événements** (Jaune) | Écoute le message de défaite émis par le GameManager. | Dès qu'une collision fatale a lieu, ce script se réveille. |
| **`quand je reçois [VICTOIRE]`** | 🟡 **Événements** (Jaune) | Écoute le message de victoire émis par le GameManager. | Dès que le compteur atteint 20 bouteilles Hayat (*Stika Maa*), ce script se réveille. |
| **`cacher`** | 🟣 **Apparence** (Violet) | Rend le lutin invisible. | Évite que le joueur ne reste visible à travers le grand panneau de victoire "Mabrouk !" ou le panneau Game Over. |

---

## 📌 Script 4 : Le Déplacement Latéral & Les Barrières Invisibles 🕹️

C'est le **cerveau de contrôle** de notre joueur. Il lui permet de glisser à gauche et à droite sur la chaussée tout en l'empêchant de sortir de l'écran ou de tomber dans la mer !

![Script 4 - Déplacement et Limites](captures_ecran/joueur_script_4_deplacement.png)

```scratch
quand je reçois [START v]
répéter indéfiniment
    si <(Jeu) = [1]> alors
        si <touche [flèche gauche v] pressée ?> alors
            si <(abscisse x) > (-170)> alors
                ajouter (-7) à x
        si <touche [flèche droite v] pressée ?> alors
            si <(abscisse x) < (170)> alors
                ajouter (7) à x
```

### 🔍 Décorticage Pédagogique Bloc par Bloc :
| Bloc | Catégorie & Couleur | Que fait-il ? | Pourquoi ce bloc est indispensable ? |
| :--- | :--- | :--- | :--- |
| **`quand je reçois [START]`** | 🟡 **Événements** | Démarre la prise en main du joueur. | Le joueur ne peut pas bouger avant que le signal de départ officiel soit donné par le GameManager. |
| **`répéter indéfiniment`** | 🟠 **Contrôle** | Boucle permanente qui tourne 60 fois par seconde. | Scratch doit vérifier en continu si le doigt de l'enfant est appuyé sur une touche du clavier. |
| **`si <Jeu = 1> alors`** | 🟠 **Contrôle** + 🟢 **Opérateurs** | Condition de sécurité : la partie est-elle active ? | Si `Jeu = 2` (Game Over) ou `Jeu = 3` (Victoire), on bloque immédiatement les commandes. Le joueur ne peut plus bouger pendant l'affichage des scores. |
| **`si <touche flèche gauche pressée ?>`** | 🩵 **Capteurs** | Détecte si le joueur appuie sur la flèche `←`. | Déclenche l'intention d'aller vers la gauche. |
| **`si <abscisse x > -170> alors`** | 🟢 **Opérateurs** + 🔵 **Mouvement** | **La Barrière Gauche Invisible !** | L'écran Scratch mesure 480 pixels de large (de -240 à +240). À `x = -170`, se trouve le trottoir gauche de la corniche. Cette condition empêche le joueur de sortir de la route ou de disparaître hors de l'écran ! |
| **`ajouter (-7) à x`** | 🔵 **Mouvement** | Déplace de 7 pixels vers la gauche. | En mathématiques cartésiennes, soustraire à l'axe X fait reculer vers la gauche. Le chiffre 7 donne une vitesse de sprint très vive et agréable à jouer. |
| **`si <touche flèche droite pressée ?>`** | 🩵 **Capteurs** | Détecte si le joueur appuie sur la flèche `→`. | Déclenche l'intention d'aller vers la droite. |
| **`si <abscisse x < 170> alors`** | 🟢 **Opérateurs** + 🔵 **Mouvement** | **La Barrière Droite Invisible !** | À `x = 170`, se trouve le parapet maritime de Boujaafar ! On empêche le héros de plonger dans l'eau de la Méditerranée ! |
| **`ajouter (7) à x`** | 🔵 **Mouvement** | Déplace de 7 pixels vers la droite. | Ajouter un nombre positif à l'axe X fait avancer le personnage vers la droite. |

> [!TIP]
> **Pourquoi `ajouter 7 à x` et pas `avancer de 7 pas` ?**
> Le bloc `avancer de 7 pas` dépend de l'orientation du lutin (son angle). S'il s'est tourné de travers, il monterait ou descendrait !
> Le bloc `ajouter 7 à x` agit directement sur l'axe horizontal X : il garantit un déplacement strictement horizontal, fluide et fiable quel que soit le costume !

---

## 📌 Script 5 : L'Animation de Course Réaliste 🏃

Pour donner l'impression que notre coureur court vraiment au lieu de glisser comme une statue sur des roulettes, ce script alterne ses costumes en cadence.

![Script 5 - Animation de Course](captures_ecran/joueur_script_5_animation.png)

```scratch
quand je reçois [START v]
répéter indéfiniment
    si <(Jeu) = [1]> alors
        costume suivant
        attendre (0.12) secondes
```

### 🔍 Décorticage Pédagogique Bloc par Bloc :
| Bloc | Catégorie & Couleur | Que fait-il ? | Pourquoi ce bloc est indispensable ? |
| :--- | :--- | :--- | :--- |
| **`quand je reçois [START]`** | 🟡 **Événements** | Déclenche l'animation au coup d'envoi. | Le coureur se met à courir dès que la partie commence. |
| **`répéter indéfiniment`** | 🟠 **Contrôle** | Fait cycler les mouvements en continu. | Le coureur continue de battre des jambes tant que la partie est active. |
| **`si <Jeu = 1> alors`** | 🟠 **Contrôle** + 🟢 **Opérateurs** | Condition de jeu en cours. | Dès que la partie s'achève, le coureur s'immobilise. |
| **`costume suivant`** | 🟣 **Apparence** | Passe du costume 1 (jambe gauche) au costume 2 (jambe droite), puis revient au costume 1 ! | C'est le principe du dessin animé et du flip-book : la succession rapide de deux poses crée l'illusion du mouvement pour l'œil humain ! |
| **`attendre (0.12) secondes`** | 🟠 **Contrôle** | Règle le tempo de la course. | Sans ce bloc d'attente, Scratch changerait de costume 60 fois par seconde, ce qui produirait un clignotement désagréable. Avec `0.12 s`, on obtient environ 8 pas par seconde, ce qui correspond exactement à la vitesse d'un sprinter en plein élan ! |

---

## 🧪 Le Coin des Petits Scientifiques (Expériences à tester !)

Les ateliers Scratch sont faits pour expérimenter ! Propose ces défis aux enfants une fois que leur joueur fonctionne :

| Expérience | Modification dans les blocs | Ce qui se passe à l'écran |
| :--- | :--- | :--- |
| ⚡ **Mode TGV / Flash** | Remplace `ajouter -7 / 7` par **`-14 / 14`** | Le coureur va deux fois plus vite ! Attention aux réflexes sur le clavier ! |
| 🐢 **Mode Tortue / Fatigue** | Remplace `ajouter -7 / 7` par **`-3 / 3`** | Le joueur avance très lentement, il devient beaucoup plus difficile d'attraper les bouteilles éloignées ! |
| 🏃‍♂️ **Sprint Déchaîné** | Change `attendre 0.12 s` par **`0.05 s`** | Les jambes du joueur s'agitent à toute vitesse, comme un personnage de dessin animé comique ! |
| 🌙 **Ralenti Cinéma** | Change `attendre 0.12 s` par **`0.3 s`** | La foulée devient majestueuse et lente, comme dans un film au ralenti ! |
| 🚫 **Le Piège des Coulisses** | Enlève les blocs `si abscisse > -170` | Le joueur traverse les murs et peut se cacher complètement en dehors de l'écran ! Cela montre aux enfants l'importance des conditions de collision et de limites. |

---

## ✅ Fiche Récapitulative de Validation (Checklist pour l'Enfant)

Avant de passer au sprite suivant, l'enfant coche chaque étape pour valider son badge de programmeur :

- [ ] Le lutin s'appelle bien **`Joueur`** et sa taille est réglée sur **`75`**.
- [ ] Il a bien ses **2 costumes** (`joueur_course1` et `joueur_course2`) portant le maillot rouge de la Tunisie.
- [ ] Au clic sur le **Drapeau Vert 🟢**, il se place automatiquement à `x: 0, y: -130` et passe à l'avant-plan.
- [ ] Quand on appuie sur la **Flèche Gauche `←`**, il court vers la gauche et s'arrête proprement au bord de la route.
- [ ] Quand on appuie sur la **Flèche Droite `→`**, il court vers la droite et s'arrête au bord du trottoir.
- [ ] Ses jambes s'animent de manière fluide et naturelle sans bloquer le contrôle des flèches.
- [ ] En cas de **Game Over** ou de **Victoire**, le joueur disparaît proprement pour afficher l'écran final.

🎉 **Mabrouk ! Ton coureur tunisien est fin prêt à collecter la « Stika Maa » sur la corniche de Boujaafar !**