A2 · Episode 8 · 6:40
Adding Interactions in a Scratch Game
This episode teaches how to code interactions between a sprite and the background in Scratch, including bouncing off screen edges, detecting collisions with other sprites, and triggering game events based on background color detection.
Source：Montagne Vincent / tube-numerique-educatif.apps.education.fr · License：CC BY 4.0
Transcript
Coder un jeu avec Scratch, septième épisode dans lequel nous allons voir comment
Coding a game with Scratch—Episode 7, in which we’ll learn how to
ajouter des interactions entre un lutin et l'arrière- plan.
add interactions between a sprite and the background.
L'arrière- plan, c'est le décor de notre jeu.
The background is the scene of our game.
Alors ici, par exemple, dans le jeu de pong,
For example, in this Pong game,
la balle rebondit sur la raquette, ça c'est de l'interaction entre deux lutins,
the ball bounces off the paddle—that’s an interaction between two sprites;
mais elle rebondit également sur les bords de l'écran, en haut,
but it also bounces off the top edge of the screen,
à gauche et à droite, ça c'est une interaction avec le décor,
and off the left and right edges—that’s an interaction with the scene,
c'est- à- dire avec l'arrière- plan,
that is, with the background;
mais également la balle s'arrête lorsqu'elle touche la partie grise de l'arrière-
also, the ball stops when it touches the gray part of the background—
plan, donc nous avons ici une autre interaction.
so here we have another type of interaction.
Donc c'est ce genre de choses que nous allons voir comment coder avec Scratch,
So we’ll now learn how to code exactly these kinds of interactions using Scratch,
et nous y allons tout de suite.
and we’ll get started right away!
Alors nous y voici, j'ai donc deux lutins, la balle et la raquette.
Here we are: I have two sprites—the ball and the paddle.
Donc la raquette, c'est juste un rectangle noir que j'ai dessiné avec les outils de
The paddle is simply a black rectangle,
dessin ici dans les costumes.
which I drew using the costume-drawing tools here.
Si je regarde son script, il est très simple, j'ai une initialisation,
If I look at its script, it’s very simple—I start with initialization,
je le mets à sa position initiale, donc x égal 0, y moins 80.
placing it at its starting position: x = 0, y = -80.
Et j'ai les déplacements avec les flèches du clavier vers la gauche ou vers la
Then come the movements—left and right—controlled by keyboard arrow keys,
droite. Donc on peut regarder ce que ça donne.
so let’s see how it works.
Voilà, vers la gauche, vers la droite.
There we go—left, right.
Et on va donc s'intéresser au script de
Now, let’s turn our attention to the ball’s script.
la balle. Alors on va aussi avoir une initialisation,
It also has an initialization step,
on va la mettre par exemple par ici au départ.
for instance, placing it here at the start.
Donc je vais la faire aller. . .
Now I’ll make it move…
Alors vous voyez que quand je prends le bloc ici" aller à", les
You’ll notice that when I select the “go to” block here,
coordonnées qui sont déjà affichées,
the coordinates shown,
ce sont celles que le lutin occupe actuellement.
are exactly the ones the sprite currently occupies.
Donc là, la balle, elle est actuellement à- 808, alors on va arrondir,
So right now, the ball is at -808; let’s round it.
on va mettre 0, 110 par exemple.
For example, we’ll set it to 0.110.
Voilà, et la balle va avancer droit devant elle,
There we go—the ball will move straight forward.
donc on va l'orienter dans une direction
So we’ll orient it in a specific direction.
donnée. Alors pour commencer, on va l'orienter par exemple à 45 degrés.
To start, let’s set it to 45 degrees.
On verra après ce qu'on peut faire pour avoir quelque chose qui augmente la
Later, we’ll see what we can do to increase the game’s difficulty.
difficulté du jeu.
—the game’s difficulty.
Et maintenant, donc on va faire avancer de 10 la balle, et ça,
Now, we’ll make the ball advance by 10 units—and keep doing so.
on va le faire indéfiniment.
—repeatedly, without stopping.
Tant que le jeu n'est pas fini, la balle doit avancer de 10.
As long as the game isn’t over, the ball must keep advancing by 10.
Et la première chose qu'on va faire,
The first thing we’ll do now is:
c'est d'ajouter une interaction avec les bords du jeu.
add interaction between the ball and the game boundaries.
Nous avons un bloc qui nous dit que la balle peut rebondir si le bord est atteint.
We have a block that makes the ball bounce when it hits a boundary.
Alors on peut tout de suite regarder ce que ça donne.
Let’s immediately check how this works.
Voilà, si la balle atteint le bord, elle rebondit sur le bord.
There you go—if the ball hits a boundary, it bounces off it.
Alors pour le moment, je n'ai pas mis d'interaction avec la raquette,
For now, I haven’t added interaction with the paddle,
donc elle passe à travers la raquette, c'est normal,
so it passes right through the paddle—that’s expected.
mais je vois que la balle rebondit sur
But I can see the ball bounces off any boundary it touches,
tous les bords qu'elle touche.
—immediately.
Alors on va rajouter tout de suite l'interaction avec la raquette.
Next, we’ll add interaction with the paddle right away.
Donc si. La raquette est touchée.
If the paddle is touched…
Donc ici, je choisis si la raquette
Here, I choose: if the paddle is touched,
est touchée, alors la balle, elle doit rebondir.
then the ball must bounce.
Alors il n'y a pas de bloc
However, there’s no built-in block in Scratch that lets us make one sprite bounce off another,
qui nous permette de faire rebondir un lutin sur un autre lutin,
—a sprite bouncing off another sprite.
on peut rebondir seulement sur les bords.
We can only make it bounce off the edges.
Alors ici, il y a quelque chose d'un petit peu compliqué,
Here, things get a bit complicated,
on va devoir orienter la balle dans une nouvelle direction, et en fait,
we’ll need to redirect the ball, and in fact,
on va avoir un angle qui est symétrique par rapport à la verticale,
the ball’s direction will form an angle symmetric to the vertical line,
l'orientation de.
that is, this direction.
de la balle, la nouvelle orientation.
Bullets, the new direction.
Alors je vous donne le calcul ici, c'est 180 degrés
So I give you the calculation here: 180 degrees
moins l'angle que faisait la balle, c'est- à- dire la direction ici.
minus the angle formed by the ball—that is, its direction here.
Vous voyez le bloc direction tout en bas, que je peux prendre ici.
You see the 'Direction' block at the very bottom, which I can select here.
Donc si la raquette est touchée,
So, if the racket is hit,
alors la balle va s'orienter à une nouvelle direction qui est 180 moins la direction
then the ball will travel in a new direction—
qu'elle avait auparavant.
180 degrees minus its previous direction.
Alors on peut essayer de voir ce que ça donne.
So we can try to see what it produces.
Voilà, donc là j'ai l'impression que la balle rebondit,
There we go—right now, I feel like the ball is bouncing,
enfin c'est pas une impression, la balle rebondit sur
no, it’s not just a feeling—the ball really is
la raquette tout à fait correctement,
bouncing perfectly off the racket,
mais là elle peut passer derrière la raquette, c'est pas ce que je veux.
yet right now it can pass behind the racket—which isn’t what I want.
Moi ce que je veux, c'est que si elle passe derrière la raquette,
What I want is that if she passes behind the racket,
la partie s'arrête.
the point ends.
Alors ce qu'on va faire, c'est qu'on va rajouter une interaction avec la couleur
So, what we’ll do is add an interaction with the gray color.
grise ici qui est derrière la raquette,
This gray is behind the paddle.
qui est la couleur de l'arrière- plan gris. C'est pas un lutin ici,
It’s the gray background color. There’s no sprite here.
c'est l'arrière- plan qui est gris.
Instead, the background itself is gray.
Donc on va avoir si.
So we’ll have…
Et cette fois, le capteur qu'on va utiliser, c'est si la couleur. . .
And this time, the sensor we’ll be using is the color sensor.
Alors vous voyez ici c'est couleur verte, mais je veux la couleur grise,
So you see, this is displayed in green, but I want gray.
donc ce que je fais, c'est que je clique dans le carré là où il y a la couleur
So I click on the square showing green,
verte, et je vais aller chercher la couleur grise sur l'écran.
and then select gray from the screen.
Voilà, et maintenant c'est la couleur grise.
Here we go—now it’s gray.
Donc si la couleur grise est touchée.
So, if the gray color is touched,
Le jeu doit s'arrêter, donc on va stopper tout le jeu.
the game must stop—so we’ll halt the entire game.
Alors voyons voir ce que ça donne.
Let’s see how this works.
Donc ici, je rattrape la balle, si je la rattrape pas, le jeu est arrêté.
Here, I catch the ball—if I miss it, the game ends.
Alors on peut rajouter un petit effet avant que le
We can add a small visual effect,
jeu soit arrêté.
just before the game stops.
On va rajouter un petit effet, donc on va répéter par exemple 20
We’ll add a color effect—repeating it 20 times, for example.
fois un effet de couleur sur la balle.
That is, apply the color effect to the ball 20 times.
Alors on peut choisir ce que l'on veut, c'est juste pour.
We can choose whatever we like—
pour voir quelque chose, donc on va ajouter 5 par exemple,
it’s just to make something visible.
20 fois à l'effet couleur, on va voir ce que ça donne.
For instance, let’s try 5 or 20 color effects and see what happens.
Donc faut pas hésiter, voilà, la balle change de couleur plusieurs fois,
So don’t hesitate—look: the ball changes color several times,
le jeu est terminé.
and then the game ends.
Donc ici j'ai un jeu qui est déjà
Right now, I’ve built a playable game.
jouable, on peut rajouter évidemment beaucoup de choses,
Of course, we can add many more features.
mais surtout ce qu'on peut rajouter c'est au départ que la balle s'oriente dans une
But especially, we can add this: at the start,
direction aléatoire, parce que là en fait on a toujours le même angle au départ et
the ball should head off in a random direction—
donc en fait on a toujours le même jeu.
because right now it always starts at the same angle, so the gameplay is always identical.
Donc ce qu'on va faire ici c'est qu'on va remplacer" s'orienter à 45 degrés",
So here, we’ll replace ‘point in direction 45°’,
on va générer un nombre aléatoire, donc ici je suis dans les opérateurs,
and instead generate a random number.
nombre aléatoire, alors entre 1 et 10, on va changer ça,
In the Operators category, pick ‘pick random’, initially set from 1 to 10—we’ll adjust that.
sur Scratch les angles sont entre- 180 degrés et+ 180 degrés.
In Scratch, angles range from −180° to +180°.
Et là si je recommence la partie, plusieurs fois,
Now, if I restart the game several times,
la balle à chaque fois part dans une direction différente,
the ball heads off in a different direction each time.
vous voyez si je recommence.
You see—I’ll restart again.
Voilà, donc là on a un jeu qui est opérationnel,
Here we have a working game.
alors bien sûr on peut rajouter beaucoup de choses, le comptage des points,
Of course, we can add many features—like scoring,
etc, augmenter la difficulté, rajouter des bonus, etc, mais nous avons un jeu.
etc. We can also increase difficulty, add bonuses, etc.—but we already have a game.
qui est déjà opérationnel comme ceci.
It’s already operational like this.
Voilà, le script est terminé.
And that’s it—the script is complete.
Cet épisode est terminé, ne manquez pas le prochain épisode dans lequel nous verrons
This episode ends here—don’t miss the next one,
que les lutins peuvent communiquer entre eux.
in which we’ll see how sprites can communicate with each other.
À bientôt!
See you soon!