Projets SCRATCH débutants-intermédiaires

 

Projets SCRATCH débutants-intermédiaires


 

 

Projets SCRATCH débutants-intermédiaires


Jeu de Nim

vignette_jeu_de_nim

Description du projet

Le jeu de Nim est un jeu de stratégie qui se joue à deux joueurs. Nous disposons de treize allumettes au départ, chacun à son tour, les joueurs doivent prendre une, deux ou trois allumettes. Le joueur qui prend la dernière a perdu.

Le but du projet est d’écrire un programme qui permettra à un joueur d’affronter l’ordinateur. La méthode la plus simple pour déterminer le nombre d’allumettes prises par l’ordinateur est d’effectuer un tirage aléatoire entre 1 et 3.

Dans ce jeu, il existe une méthode qui permet d’élaborer une stratégie gagnante. Nous allons aussi implémenter cette méthode pour le tirage de l’ordinateur.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut.

Ajouter les lutins “lutin_Allumette_nim.png” et “lutin_Joueur_nim.sprite2” contenus dans les ressources. Pour le lutin Joueur, les deux costumes sont intégrés dans la ressource.

Ajouter l’arrière-plan “fond_tapisdejeu_nim.png“.

Note

Dans les ressources du projet, en plus des lutins et de l’arrière-plan, nous avons inclus les codes scratch des 3 versions développées.

Partie2 – Programmation

La démarche à suivre pour construire ce programme est la suivante :

fixer le nombre d’allumettes du départ à 13;

demander au joueur combien il veut prendre d’allumettes et les décrémenter du nombre d’allumettes restantes dans le jeu;

vérifier s’il reste des allumettes en jeu. Si oui, continuer, sinon, le joueur a perdu et on arrête le programme;

tirer un nombre aléatoire entre 1 et 3 et le décrémenter du nombre d’allumettes restantes en jeu;

vérifier s’il reste des allumettes en jeu. Si oui, continuer, sinon, l’ordinateur a perdu et on arrête le programme;

recommencer au début.

Pseudo code pour le Jeu de Nim

Nb_allumettes←13 Boucle infinie Ecrire "Combien voulez-vous prendre d'allumettes ?" Lire reponse Nb_allumettes←Nb_allumettes-reponse Si Nb_allumettes<1 Ecrire "Vous avez perdu !" Stop Fin Si Nb_allumettes←Nombre aléatoire entre 1 et 3 Si Nb_allumettes<1 Ecrire "Vous avez gagné !" Stop Fin Si Fin boucle infinie

Programmation dans SCRATCH

Commençons d’abord par définir les variables dont nous aurons besoin :

Nb_allumettes : cette variable contient le nombre d’allumettes qui sont en jeu (13 au départ). Il faudra cocher la case devant le nom de la variable dans Scratch afin qu’elle soit visible à l’écran et que l’on sache combien il reste d’allumettes;

Prise_ordi : contient le nombre d’allumettes prises par l’ordinateur.

Code Scratch pour le lutin Joueur

Nous commençons par positionner le lutin à la bonne place. Nous affectons la variable Nb_allumettes. La valeur treize a été fixée arbitrairement, nous pourrons, à condition d’ajuster les valeurs des variables dans le projet, utiliser une autre valeur.

nim_joueur_scratch1

On crée une boucle infinie dans laquelle on insérera tout le code qui va être développé par la suite.

nim_joueur_scratch2

Code Scratch pour le joueur

Nous allons étudier le code Scratch pour le joueur.

Nous commençons par basculer sur le costume 1 qui représente le joueur, puis nous demandons “Combien voulez-vous prendre d’allumettes (1 à 3) ?”. Il faut être sûr que la réponse sera comprise entre 1 et 3, c’est pour cela que nous avons utilisé une boucle répéter jusqu’à. Si la réponse est comprise entre 1 et 3, on passe à la suite du programme, sinon, nous écrivons, “Le nombre d’allumettes doit être compris entre 1 et 3.” et nous répétons la question.

nim_joueur_scratch3

Nous décrémentons la variable Nb_allumettes du nombre d’allumettes choisies par le joueur. Nous testons s’il reste au moins une allumette. Si c’est le cas, nous continuons l’exécution du programme, sinon, cela veut dire que le joueur a perdu, nous le signalons et nous arrêtons les programme.

nim_joueur_scratch4

Le tour du joueur est terminé, nous pouvons passer à celui de l’ordinateur.

Code Scratch pour l’ordinateur

Nous basculons sur le costume 2 et temporisons pendant une seconde en écrivant que l’ordinateur réfléchit. Nous affectons à la variables Prise_ordi un nombre aléatoire entre1 et 3. Nous indiquons ensuite le nombre d’allumettes prises par l’ordinateur.

nim_joueur_scratch5

Nous suivons la même méthode que pour le jour, nous décrémentons la variable Nb_allumettes et nous testons sa valeur pour savoir si l’ordinateur a perdu.

nim_joueur_scratch6

Code Scratch pour les lutins allumettes

Nous allons créer 13 lutins allumettes.

Code SCRATCH pour la première allumette

Nous plaçons la première allumette à la bonne position (x=-180 et y=80), à la bonne taille (30 % de la taille initiale) et nous l’affichons.

nim_allumette_scratch1

Pendant toute la partie, nous testons si le nombre d’allumettes restantes est supérieur à 1. Si nous avons plus d’une allumette, l’allumette numéro 1 doit rester affichée. S’il y en a moins, on la cache.

nim_alumette_scratchl2

Code SCRATCH pour la deuxième allumette

Nous plaçons la deuxième allumette à coté de la première (x=-150 et y=80), nous lui donnons la bonne taille et nous l’affichons.

nim_allumette_scratch3

Cette fois, nous allons tester si le nombre d’allumettes restantes est supérieur à 2. S’il y a moins de 2 allumettes en jeu, celle-ci sera cachée.

nim_allumette_scratch4

Nous continuons avec cette méthodologie pour toutes les autres allumettes.

Méthode alternative pour gérer les allumettes

La procédure décrite ci-dessus pour les lutins allumettes devient vite fastidieuse, il faut créer autant de lutins qu’il y a d’allumettes. De plus, si on veut rajouter des allumettes, il faudra décaler les premières allumettes pour qu’elles puissent toutes tenir sur l’écran et donc changer les valeurs de x pour tous les lutins existants.

SCRATCH propose une méthode permettant de gérer plusieurs lutins identiques, les clones. Les commandes permettant de manipuler les clones sont des blocs de type contrôle.

Pour créer des clones, il faut d’abord commencer par créer un lutin. Nous créons donc le lutin Allumette. Nous allons utiliser une nouvelle variable que nous nommons Numero. Attention, pour créer cette variable, il faut cocher la case Pour ce lutin uniquement. Cela signifie que cette variable ne s’applique qu’à ce lutin, pour les autres, elle n’existe pas. Cet type de variable s’appelle une variable locale.

nim_clone_scratch1

Ecrivons le code SCRATCH pour le lutin Allumette.

Nous commençons par le cacher et lui donner la bonne taille, nous initialisons la variable Numero à 0 et nous nous plaçons à la position de la première allumette. La boucle répéter Nb_allumettes fois va servir à créer les clones. A chaque fois, nous incrémentons Numero de 1 et nous créons un clone du lutin Allumette.

nim_clone_scratch2

 

Info sur les clones et les variables locales

Quand nous créons le premier clone, la variable locale Numero aura la valeur 1. Cette variable est locale, elle ne s’appliquera donc qu’au premier clone, elle va nous permettre de l’identifier. Ainsi, le premier clone sera associé à la valeur 1 de la variable Numero. Lorsque nous créons le deuxième clone, la variable Numero aura la valeur 2. Le deuxième clone sera donc identifié par la valeur 2 de la variable locale Numero. Il en sera de même pour tous les autres clones.

 

Nous allons maintenant utiliser la commande Quand je commence comme un clone. Lorsqu’un clone est créé, toutes les instructions qui suivent ce bloc seront exécutées. Les allumettes seront espacées de 30 pixels, donc, à chaque clone créé, on avance de 30 multiplié par le numéro du clone pour le positionner. Ensuite nous affichons le clone créé. Les 13 clones vont être affichés à l’écran.

nim_clone_scratch3

Maintenant, il va falloir effacer les allumettes quand elles auront été prises par les joueurs. Pour cela, nous créons une nouvelle variable, Efface et nous lui affectons la valeur 14. Dans le code Scratch du lutin Joueur, chaque fois qu’une allumette est enlevé, nous décrémenterons la valeur de cette variable. Quand c’est le tour du joueur, nous insérerons, après la décrémentation de la variable Nb_allumette le code suivant :

nim_clone_scratch4

Pour le tour de jeu de l’ordinateur, nous insérerons, dans le code Scratch du lutin joueur, après la décrémentation de la variable Nb_allumettes :

nim_clone_scratch5

Lorsque la première allumette sera retirée du jeu, la variable Efface va prendre la valeur 13. Il suffit maintenant, pour le lutin Allumette, de faire le test suivant : Si Numero == Efface Alors nous supprimons le clone. Les clones sont identifiés par la variable Numero, donc, lorsque Efface prendra la valeur 13, le clone numéro 13 (soit la 13ème allumette) sera effacé.

A la suite de la série de blocs qui commence par Quand je commence comme un clone, pour le lutin Allumette, nous ajoutons les instructions suivantes :

nim_clone_scratch6

Cette méthodologie est un peu plus complexe à comprendre, par contre, elle va nous faciliter la vie. Si nous voulons changer le nombre d’allumettes (X est le nombre d’allumettes voulues), il suffira d’affecter X à la variable Nb_allumettes, X+1 à la variable Efface et de modifier l’espacement entre les allumettes dans la commande :

nim_clone_scratch7

Algorithme permettant de gagner

Comme nous l’avons annoncer dans la description du projet, il existe une méthode qui permet de gagner à tous les coups si l’adversaire ne la connaît pas ou si nous commençons avec le bon nombre d’allumettes.

Nous avons perdu quand il ne reste plus qu’une allumette à prendre. Si nous voulons gagner, il faut donc, qu’à l’avant dernier coup à jouer, il nous reste entre 2 et 4 allumettes. En effet, s’il reste 2 allumettes nous en prenons 1, s’il en reste 3, nous en prenons 2 et s’il en reste 4, nous en prenons 3. Dans tous les cas, il ne restera plus qu’une allumette à l’adversaire après notre tour de jeu.

Si nous voulons avoir entre 2 et 4 allumettes lorsque c’est notre tour de jouer, il faut que l’adversaire ait 5 allumettes au coup d’avant. Il pourra prendre entre 1 et 3 allumettes, ce qui nous en laissera entre 2 et 4 pour notre tour de jeu. Le but est donc de laisser 5 allumettes au joueur adversaire.

jeu_de_nim_figure

En reprenant ce raisonnement, on montre facilement qu’au tour de jeu d’avant il faudra laisser à l’adversaire 9 allumettes et ainsi de suite (13 – 17 – 21 ….). Il est donc impossible de gagner si on commence avec un nombre d’allumettes égal à 5 ou 9 ou 13 ou 17…

En fait, il faut toujours laisser à l’adversaire un nombre d’allumettes qui est égal à 1 + un multiple de 4.

En informatique, l’instruction modulo nous permet de connaître le reste d’une division euclidienne. Si le nombre1 est divisible par le nombre2, alors nous avons :

nombre1 modulo nombre2 = 0.

Par exemple 12 modulo 4 = 0.

Par contre 13 modulo 4 = 1 (4 * 3 =12 et il reste 1)

Nous allons appliquer cette méthode pour le tour de jeu de l’ordinateur. Lorsque c’est son tour de jouer, nous testons le résultat de l’opération (Nb_allumettes-1) modulo 4. Si le résultat est 0, alors nous sommes dans la situation où il reste 5 ou 9 ou 13 … allumettes, il est impossible de gagner. Nous effectuons donc un tirage aléatoire entre 1 et 3. Par contre, si le résultat est différent de 0, il suffit de prendre le nombre d’allumettes correspondant au résultat de l’opération (nombre d’allumettes – 1) modulo 4 pour que ce soit l’adversaire qui se retrouve dans une position où il ne peut pas gagner.

nim_gain_scratch1

Il suffit de mettre ce bloc d’instruction à la place du tirage aléatoire lors du tour de jeu de l’ordinateur. Si nous commençons avec un nombre d’allumettes égal à 5 ou 9 ou 13 ou 17 …, il nous sera impossible de gagner.

Pour aller plus loin

Il existe des variantes aux règles du jeu de Nim. L’une d’entre elle propose de jouer avec plusieurs tas d’allumettes. Les joueurs peuvent prendre autant d’allumettes qu’ils le souhaitent mais dans un seul tas. Le but du jeu reste le même, il ne faut pas prendre la dernière allumette.

 

(code source, ressources graphiques et fiche récapitulative)

 

Projets SCRATCH débutants-intermédiaires


Le théorème de Pythagore et les collisions

Description du projet

Ce micro-projet montre un cas concret d’utilisation d’une formule mathématique classique telle qu’elle pourrait être utilisée dans la programmation d’un jeu vidéo en deux dimensions. Le code expliqué ici pourra être réutilisé dans des projets plus vastes.

La notion de collision dans la programmation de jeu vidéo

Lorsque l’on programme un jeu, on s’intéresse tôt ou tard à la collision entre les différents objets du jeu. Que ce soit pour programmer un personnage qui collecte des pièces d’or, un véhicule qui roule sur un corps solide (le sol) ou encore la mort d’un personnage après avoir été pourfendu, nous testons des collisions.

Pour cela nous avons recours à différents algorithmes utilisant bien évidemment les mathématiques.

Nous allons voir ci-dessous que lorsque l’on veut tester la collision entre deux objets de forme sphérique, il est possible d’utiliser le théorème de Pythagore.

Note

Le langage de SCRATCH permet également de tester des collisions de manière purement visuelle , à l’aide des capteurs de couleur par exemple et donc sans utiliser aucun calcul mathématique. Ce même projet pourrait donc être réalisé sans calcul.

Partie 1 – Principe théorique

 

Partie 2 – Préparation de l’application et ajout des ressources

Supprimer le lutin de SCRATCH présent à l’écran par défaut (le chat)

Ajouter les deux lutins contenus dans les ressources de ce projet et les renommer cercle 1 et cercle 2.

Le lutin cercle 1 contiendra 2 costumes, l’un où il est de couleur bleue, l’autre où il est de couleur rouge (fournies dans les ressources graphiques de ce projet)

Partie 3 – Programmation : application concrète du test de collision à deux cercles

Faisons maintenant un programme qui affichera deux cercles et testons la collision entre eux lors du déplacement de l’un d’eux sur l’écran. Le cheminement de ce programme est le suivant :

Afficher 2 cercles, cercle 1 et cercle 2 de 80 [glossary slug=’pixel’]pixels[/glossary] de diamètre

Permettre le déplacement du ‘cercle 2’ sur l’axe des abscisses à l’aide des touches droite et gauche du clavier.

Tester si une collision se produit entre ‘cercle 1’ et ‘cercle 2’ en vérifiant le théorème de Pythagore. S’il y a collision, le cercle 1 change de couleur.

Voyons d’abord comment cela pourrait se traduire en pseudo code .

Rappel : la notion de pseudo code, ainsi que les conventions que nous utilisons sont disponibles ici

Pseudo code pour le cercle 2

Boucle Infinie Si la touche flèche droite pressée==vrai Alors le lutin cercle 2 avance de 10 pixels sur l'axe des abscisses Fin Si Si touche flèche gauche pressée==vrai Alors le lutin cercle 2 avance de -10 pixels sur l'axe des abscisses Fin Si Fin Boucle Infinie

Signification de ce pseudo code : nous testons en permanence si les touches directionnelles droite et gauche sont pressées par l’utilisateur et déplaçons notre lutin conformément.

Lien

Le déplacement de lutin a été traité plus en détails dans ce projet antérieur : cliquer

Pseudo code pour le cercle 1

 

diametre1←80 diametre2←80 r1←diametre1/2 r2←diametre2/2 Boucle Infinie a←abscisse du lutin cercle1-abscisse du lutin cercle2 b←ordonnée du lutin cercle1-ordonnée du lutin cercle2 distance←racine de (a²-b²) Si distance<r1+r2 Alors Afficher le lutin cercle1 en rouge Sinon Afficher le lutin cercle1 en bleu Fin Si Fin Boucle Infinie

Signification de ce pseudo code:

Nous déclarons 2 variables diametre1 et diametre2 contenant le diamètre de nos cercles.

Puis nous déclarons 2 variables r1 et r2 contenant le rayon de nos cercles respectifs.

Finalement nous vérifions en permanence la distance entre nos 2 cercles grâce au théorème de Pythagore et si cette distance est inférieure à zéro le cercle 1 change de couleur.

Programmation dans SCRATCH

Créons 2 lutins qui contiendront chacun un cercle (images cercle1.png et cercle2.png comprises dans les ressources du projet) et nommons les ‘cercle 1’ et ‘cercle 2’.

pr_nv1_02_CP_1

Chaque cercle fait 80 pixels de diamètre.

Note importante si vous souhaitez changer le diamètre des lutins pour ce projet

Les ressources disponibles avec ce projet sont deux cercles de 80 pixels de diamètre. Scratch ne permet pas de définir la taille d’un ‘costume’ en [glossary slug=’pixel’]pixels[/glossary] mais uniquement en % par rapport à sa taille initiale (qui elle est bien en pixel). Par ailleurs, l’éditeur graphique permettant de dessiner des costumes ne dispose pas de fonctionnalités de mesures précises. Si nous souhaitons, par exemple, dessiner un cercle de 120 pixels de diamètre précisément, il faudra donc le faire à l’aide d’un logiciel d’édition graphique externe à Scratch ( Paint, Photoshop, Gimp, Inkscape, etc ) puis l’importer dans Scratch.

Le code Scratch du lutin ‘cercle 2’

Ce lutin est celui qui testera en permanence la distance qui le sépare du lutin cercle2 et qui changera de couleur lorsqu’une collision se produira.

Pour programmer cela nous allons d’abord définir les variables que nous allons utiliser dans ce programme : diametre1, diametre2, r1, r2, a, b et distance.

pr_nv1_02_SC_3

Puis nous affectons les variables dont nous connaissons les valeurs: le diamètre de nos 2 cercles et de fait, leur rayon respectif:

pr_nv1_02_SC_4

Comme nous l’avons vu dans le pseudo code, nous allons utiliser une boucle infinie qui contiendra notre algorithme de test de collision. Cette boucle nous permet de recalculer certaines variables en permanence afin que le test soit mené à bien à tout moment : nous recalculons la valeur de c, donc la distance entre nos 2 cercles, grâce au théorème de Pythagore. Si distance est inférieure à la somme de r1 et r2, il y a collision, donc changement donc le costume de notre lutin ‘cercle 2’ pour le costume rouge, sinon il garde le costume bleu.

pr_nv1_02_SC_5

 

Le code du lutin ‘cercle1’

Ce lutin est celui que l’on déplace sur l’écran à l’aide des touches du clavier. Pour cela nous utilisons des blocs capteurs , mouvement et contrôle.

pr_nv1_02_SC_1

Pour aller plus loin :

voir le projet SCRATCH ‘Celvolution‘, jeu dont le principe est celui d’une cellule de forme circulaire qui doit en absorber d’autres plus petites (sur le même principe que le jeu vidéo actuellement extrêmement populaire Agar.io) puisqu’il utilise ce même principe pour sa gestion de collision.

 

(code source, ressources graphiques et fiche récapitulative)

 

Projets SCRATCH débutants-intermédiaires


Pong

 

vignette pong

Description du projet

Le projet consiste à créer un jeu de Pong. Ce jeu a été l’un des premiers développé sur ordinateur, il s’agit d’une simulation simplifiée du ping-pong. Il se joue à 2 joueurs, chacun possède une raquette sur un coté de l’écran, le but est de faire rebondir la balle sur sa raquette afin de l’empêcher de franchir le bord. Si on rate la balle, l’adversaire marque 1 point. Le premier qui atteint 10 points a gagné.

Partie1 – Préparation de l’application et ajout des ressources

Tous les lutins peuvent être dessinés avec l’éditeur de costumes. La taille des 2 raquettes est de 45 pixels en hauteur et 7 pixels en largeur. Ces dimensions peuvent être modifiées si vous voulez des raquettes plus grandes, par exemple. La balle est un disque et sa taille est de 11 pixels de diamètre. Comme pour les raquettes, on peut aussi modifier cette taille. Vous pouvez aussi charger les fichiers “lutin_raquette_pong.png” et “lutin_balle_pong.png” fournis dans les ressources du projet.

L’arrière-plan qui symbolise le terrain est représenté par un fond noir avec une ligne blanche verticale au milieu pour séparer les 2 camps. Il n’est pas facile de trouver précisément le milieu dans l’éditeur d’arrière plan, la croix représentant le centre du plan de travail que l’on trouve dans l’éditeur de costume n’est pas représentée ici. Vous pouvez charger l’image”fond_ terrain_pong.png” présent dans les ressources associées au projet.

Partie2 – Programmation

Pseudo code du projet

La programmation de ce projet va se dérouler en deux étapes principales distinctes :

le déplacement de la balle : Elle devra rebondir si elle touche un des 2 bords horizontaux ou une des raquettes des joueurs. Si elle sort sur un des bords verticaux, c’est que le joueur a raté la balle, son adversaire marque un point.

le déplacement des raquettes : Le joueur 1 se trouve à gauche de l’écran et le joueur 2 à droite. Le déplacement des raquettes se fait avec les flèches du haut et du bas pour le joueur 1 et avec la souris pour le joueur 2.

Démarche à suivre pour construire le pseudo code :

tester si un des joueur a atteint 10 points. Dans ce cas, la partie est terminée et nous stoppons le programme et nous annonçons le joueur gagnant;

suivant le joueur qui engage, envoyer la balle vers son adversaire avec un angle aléatoire;

déplacer la balle en respectant les règles suivantes :

si elle touche un des bords horizontaux, on la fait rebondir;

si elle touche une raquette, on la fait rebondir en tenant compte de l’endroit où elle frappe la raquette. L’angle du rebond ne sera pas le même si la balle touche la partie centrale de la raquette ou les bords de celle-ci;

augmenter régulièrement la vitesse de la balle;

gérer le déplacement des raquettes en fonction des touche flèches du haut et du bas et de la souris;

tester si l’abscisse de la balle est sortie de l’aire de jeu. Si c’est la cas, nous ajoutons 1 point au joueur qui a marqué et nous reprenons à l’étape n°1. Sinon, nous continuons à animer la balle en reprenant à l’étape 3.

Le projet contiendra 3 lutins, la balle, la raquette du joueur 1 et la raquette du joueur 2.

Intéressons nous d’abord à la gestion du déplacement des 2 raquettes.

Pseudo code pour le lutin “raquette1“

Les déplacements sont gérés par les flèches du haut et du bas.

Xraq1←-190 Yraq1←0 Boucle Infinie Si touche flèche bas pressée==vrai Alors la raquette descend de 10 pixels Fin Si Si touche flèche haut pressée==vrai la raquette monte de 10 pixels Fin Si Fin Boucle Infinie

Description du pseudo code :

Définition des variables :

Xraq1 : abscisse du centre de la raquette du joueur 1.

Yraq1 : ordonnée du centre de la raquette du joueur 1.

On affecte -190 à l’abscisse Xraq1 et 0 à l’ordonnée Yraq1 de la raquette 1 pour qu’elle se trouve au centre de la ligne de fond du joueur 1 en début de partie (le joueur 1 est à gauche de l’écran).

On démarre une boucle infinie.

Si la flèche bas est pressée, le lutin “raquette1” descend de 10 pixels sur l’écran.

Si la flèche haut est pressée, le lutin “a raquette1” monte de 10 pixels sur l’écran.

Pseudo code pour le lutin “raquette2”

Les déplacements sont gérés par la souris.

Xraq2←-190 Yraq2←0 Boucle Infinie Yraq2←Ysouris Fin Boucle Infinie

Description du pseudo code :

Définition des variables :

Xraq2 : abscisse du centre de la raquette du joueur 2;

Yraq2 : ordonnée du centre de la raquette du joueur 2.

On affecte 190 à l’abscisse Xraq2 et 0 à l’ordonnée Yraq2 de la raquette 2 pour qu’elle se trouve au centre de la ligne de fond du joueur 2 en début de partie (le joueur 2 se trouve à droite de l’écran).

On affecte la valeur de l’ordonnée de la souris à Yraq2.

Pseudo code pour le lutin “balle”

Pour le lutin “balle“, nous allons décomposer l’algorithme en plusieurs parties afin que les explications soient plus lisibles.

Joueur1←0 Joueur2←0 Point←1 Vitesse←0 Xballe←0 Yballe←0 Orientation←0

Dans la première partie du pseudo code, nous affectons les valeurs des différentes variables.

Définition des variables :

Joueur1 : score du joueur 1;

Joueur2 : score du joueur 2;

Point : cette variable permet de savoir qui engage. Par convention, lorsque cette variable vaut 1, c’est le joueur 1 qui commence, la balle partira donc vers le joueur 2 au moment de l’engagement. Pour la valeur 2, c’est l’inverse. Lorsque la partie commence, c’est le joueur 1 qui engage puisque la valeur de Point est fixé à 1 au début du programme;

Vitesse : cette variable représente la vitesse de la balle. elle va nous permettre d’augmenter cette vitesse régulièrement pendant le jeu;

Xballe : abscisse du centre de la balle;

Yballe : ordonnée du centre de la balle;

Orientation : direction du déplacement de la balle.

La suite du pseudo code sera intégrée dans une boucle infinie.

Si Joueur1==10 Alors Ecrire "Le joueur 1 a gagné" Arreter le programme Sinon Si Joueur2==10 Alors Ecrire "le joueur2 a gagné" Fin Si Fin Si

Nous testons la variable Joueur1. Si elle est égale à 10, le joueur 1 a gagné et la partie est terminée.

Nous testons la variable Joueur2. Si elle est égale à 10, le joueur 2 a gagné et la partie est terminée.

Si Point==1 Alors Orientation←nombre aléatoire en 70 et 110 Sinon Orientation←nombre aléatoire entre -110 et -70 Fin Si

Nous testons la variable Point. Si elle est égale à 1, c’est le joueur 1 qui engage, la balle doit se diriger vers le joueur 2 donc vers la droite de l’écran. Le programme tire un nombre aléatoire entre 70 et 110 qui donnera la direction de la balle en degré. Si Point est égal à 2, la balle partira avec un angle compris entre -110 et -70 degré.

Rappel

Mesure des angles dans SCRATCH : La mesure des angles se fait par rapport à une droite verticale orientée vers le haut, comme on peut le voir sur le schéma ci-dessous.

mesure-des-angles-dans-Scratch

TantQue Xballe>-200&&Xballe<200 Vitesse←Vitesse+1 Faire rebondir la balle sur les bords inférieur et supérieur Faire avancer la balle de (Vitesse/100)+5 pixels Si raquette1 touchée==vrai Alors Si valeur absolue(Yraq1-Yballe)<10 Alors Orientation←(-1)*Orientation Sinon Orientation←(-1)*Orientation+Yraq1-Yballe Fin Si Emettre un son Fin Si Si raquette touchée==vrai Si valeur absolue(Yraq2-Yballe)<10 Alors Orientation←(-1)*Orientation Sinon Orientation←(-1)*Orientation-Yraq2-Yballe Fin Si Emettre un son Fin Si Fin TantQue

L’aire de jeu est délimitée par les abscisses x=-200 (à gauche) et x=200 (à droite). Tant que la balle est dans cette zone, on exécute le pseudo code qui est dans la boucle Tant Que Xballe > -200 && Xballe < 200. Cette partie du programme permet d’animer la balle.

A chaque passage dans la boucle, on augmente la variable Vitesse de 1.

Si la balle touche un des bords supérieur ou inférieur, on la fait rebondir.

Nous faisons avancer la balle de (Vitesse/100)+5 pixels.

Nous testons si le lutin “raquette1” est touchée. Si c’est le cas, nous nous intéressons au point d’impact de la balle sur la raquette. Nous décomposons la raquette en 3 zones (cf figure), la partie centrale, la partie supérieure et la partie inférieure. Nous fixons les limites de la zone centrale à une distance de 10 pixels du centre.Zones_raquettesNous ne traiterons pas le rebond de la même manière s’il a lieu dans la zone centrale ou dans les deux zones extrêmes.

Si la balle touche la zone centrale, nous le traiterons comme un rebond normal sur une surface plane, la trajectoire de la balle est symétrique par rapport à la normale n (voir figure). Si nous mesurons les angles α et β par rapport à la verticale, nous avons : β = -α.

Si la balle touche la zone supérieure ou inférieure, nous modifions l’angle après le rebond, d’une valeur qui va être proportionnelle à la distance du point d’impact par rapport au centre de la raquette. Cette valeur est égale à Yraq1 – Yballe. Sur la figure ci-dessous, nous voyons qu’après le rebond sur la zone supérieure la valeur absolue de l’angle α après le rebond sera inférieure à la valeur absolue de β, angle avant le rebond. Nous avons l’effet inverse pour le rebond sur la partie inférieure de la raquette.pong_rebonds_zones

Ensuite nous émettons un son.

Nous appliquons le même principe si la balle touche la raquette 2.

Si Xballe<-220 Alors Joueur2←Joueur2+1 Point←2 Vitesse←0 Fin Si Si Xballe>220 Alors Joueur1←Joueur1+1 Point←1 Vitesse←0 Fin Si

Maintenant que la balle est sortie de la zone de jeu, pour savoir qui marque le point, nous testons la variable Yballe. Si sa valeur est inférieure à – 220, la balle est sortie du coté gauche, c’est le joueur 1 qui a raté la balle et donc le joueur 2 marque 1 point. On incrémente la variable Joueur2 de 1, on affecte la valeur 2 à la variable Point (c’est le joueur 2 qui aura l’engagement). On réinitialise la variable Vitesse à 0 pour que la balle ait la même vitesse qu’au début du jeu.

Il ne faudra pas oublier d’insérer le pseudo code dans une boucle infinie afin qu’il puisse s’exécuter pendant toute la durée du jeu.

Programmation dans Scratch

Code Scratch pour le lutin “raquette1“

Comme nous l’avons vu dans le projet Création et déplacement d’un lutin sur la scène, il existe 2 méthodes pour la gestion des touches clavier. Nous emploierons ici la méthode utilisant les blocs de type “capteur”.

Lien

Projet “Création et déplacement d’un lutin” : cliquer

Dans SCRATCH, nous n’avons pas besoin d’utiliser la variable Xraq1 car elle existe déjà. En effet, x et y dans les blocs Mouvement représentent les coordonnées du lutin, nous les utilisons donc pour gérer les mouvements de la raquette. Lorsque le flèche du bas est pressée, nous décrémentons donc y de 10 pour faire déplacer la raquette de 10 pixels vers le bas. Inversement, lorsque la flèche du haut est pressée, nous incrémentons y de 10. La variable Yraq1 servira à tester la position horizontale de la raquette par rapport à celle de la balle au moment du contact, nous lui affectons la valeur de l’ordonnée y de la raquette.

pong_raquette1_scratch

Code Scratch pour le lutin “raquette2“

Ici, les mouvements sont beaucoup plus facile à gérer. Il suffit d’affecter à y la valeur de l’ordonnée de la souris. La variable Yraq2 servira à tester la position horizontale de la raquette par rapport à celle de la balle au moment du contact, nous lui affectons la valeur y de l’ordonnée de la raquette.

pong_raquette2_scratch

Code Scratch pour le lutin “balle“

Comme pour le pseudo code, on décompose le code SCRATCH pour avoir une meilleure lisibilité.

De même que pour les raquettes, nous n’avons pas besoin d’utiliser les variables Xballe, Yballe et Orientation car elles existent déjà.

pong_balle_scratch1

Toute la suite du code SCRATCH sera insérée à l’intérieur de une boucle infinie.

pong_balle_scratch2

 

Nous plaçons la balle au centre du terrain et nous vérifions si un des 2 joueurs a gagné. Si c’est le cas, l’instruction stop tout arrête le programme.

pong_balle_scratch3

 

Nous testons la variable Point pour savoir qui commence. Nous attendons 2 secondes pour que le joueur ait le temps de réagir à l’engagement.

pong_balle_scratch4

 

L’instruction Répéter Tant Que x>-220 et x<220,utilisée dans le pseudo cod,e est remplacée par Répéter Jusqu’à x<-220 ou x>220. Nous incrémentons la vitesse de 1 et faisons rebondir la balle si elle touche un des bords horizontaux. Ensuite, nous faisons avancer la balle de (Vitesse/100)+5 pixels. Cette valeur a été fixée empiriquement pour que la balle ne se déplace pas trop rapidement au début du jeu et que l’accélération ne soit pas trop forte. Nous gérons ensuite les rebonds sur les raquettes avec les règles que nous nous sommes fixées Le son pop est déjà présent dans SCRATCH, il n’y a pas besoin de le charger.

pong_balle_scratch5

 

Lorsque nous sortons de la boucle précédente, c’est que la balle est passée derrière l’une des deux raquettes. Nous testons qui a marqué le point. Si l’abscisse de la raquette est inférieure à -220, la balles est sorti du coté gauche, c’est donc le joueur 2 qui a gagné cet échange. Nous lui ajoutons 1 point, nous affectons 2 à la variable Point et affectons 0 à ma variable Vitesse. Si l’abscisse de la balle est supérieure à 220, c’est le joueur 1 qui marque.

pong_balle_scratch6

 

 

Aller plus loin :

Limiter l’angle maximum de la balle.

Programmer un jeu de casse brique.

 

(code source, ressources graphiques et fiche récapitulative)

 

Projets SCRATCH débutants-intermédiaires


Jeu de plateforme – niveau 1

vignette_jeu_plateforme_niv1

Description du projet

Ce projet est la suite du projet Création et déplacement d’un lutin sur la scène. Nous allons améliorer les déplacements du lutin en utilisant le décor dans lequel il se trouve. Le lutin se déplacera sur le sol, il ne pourra pas retrouver dans l’air. Il ne pourra monter que s’il est sur une échelle. S’il se trouve sur le bord d’une plateforme et qu’il continue dans le vide, il tombera jusqu’à ce qu’il touche le sol. Nous allons aussi lui donner la possibilité de sauter. Ensuite, nous ajouterons des bonus qu’il pourra prendre et qui lui feront marquer des points.

L’élève va pouvoir approfondir sa prise en main de SCRATCH. Il sera amené à utiliser des conditions et à manier des variables.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin SCRATCH par défaut.

Ajouter les lutins “lutin_cody_plateforme1.sprite2“, “lutin_pomme_plateforme1.png“, “lutin_banane_plateforme1.png“, “lutin_echelle_plateforme1.png” et “lutin_plateforme_plateforme1.png” fournis dans les ressources. le lutin “Cody” contient les 2 costumes.

Ajouter l’arrière-plan “arriere_plan.png“. Dans ce projet, l’arrière-plan est important, il est donc essentiel de l’intégrer dans le projet.

Partie 2 -Programmation

Le programme devra suivre le cheminement suivant :

lorsque la touche flèche droite ou gauche est pressée, déplacer le lutin vers la droite ou la gauche;

lorsque la touche flèche haut ou bas est pressée et que le lutin est sur une échelle, faire monter ou descendre le lutin;

lorsque la touche espace est pressée, faire sauter le lutin;

si le lutin ne touche pas le sol, le faire descendre jusqu’à ce qu’il touche le sol;

Si le lutin touche un bonus, augmenter le score et faire disparaitre le bonus.

Pseudo code pour le projet

Boucle Infinie Si touche flèche gauche pressée==vrai Alors l'abscisse du lutin est décrémentée de 3 pixels Si lutin touche plateforme==vrai Alors l'abscisse du lutin est incrémentée de 3 pixels Fin Si Fin Si Si touche flèche droite pressée==vrai Alors l'abscisse du lutin est incrémentée de 3 pixels Si lutin touche plateforme==vrai Alors l'abscisse du lutin est décrémentée de 3 pixels Fin Si Fin Si Si touche flèche haut pressée==vrai && echelle touchée==vrai Alors l’ordonnée du lutin est incrémentée de 2 pixels Fin Si Si touche flèche bas pressée==vrai && echelle touchée==vrai Alors l'ordonnée du lutin est décrémentée de 3 pixels Si ordonnée du lutin<-102 Alors Nous affectons la valeur -102 à l'ordonnée du lutin Fin Si Fin Si Si touche espace pressée==vrai && lutin touche le sol==vrai Alors le lutin effectue un saut Fin Si Fin Boucle Infinie

Description du pseudo code :

Le pseudo code est insérée dans une boucle infinie;

Nous testons si la flèche gauche est pressée. Si c’est le cas, nous faisons déplacer le lutin vers la gauche de 3 pixels. Ensuite, nous testons s’il touche la plateforme. En cas de collision, nous ramenons notre lutin à son point de départ (déplacement de 3 pixels vers la droite);

Nous effectuons le même test pour la touche flèche droite;

Nous testons si la flèche haut est pressée et si le lutin touche l’échelle, si c’est le cas, nous incrémentons l’ordonnée du lutin de 3 pixels;

Nous effectuons un test similaire pour la direction bas. Lorsque nous avons fait descendre le lutin, nous testons si son ordonnée est inférieure à -102. Si c’est le cas, c’est que le lutin est plus bas que le sol, nous affectons la valeur -102 à son ordonnée;

Nous testons si la barre espace est pressée et si le lutin touche le sol. Si ces 2 conditions sont réunies, nous faisons sauter le lutin. La méthode pour faire sauter le lutin est décrite plus bas afin de ne pas trop alourdir le pseudo code.

Programmation dans SCRATCH

Dans ce projet nous allons utiliser des variables.

Lien

La déclaration et l’affectation de variable dans SCRATCH sont présentés dans le support théorique vidéo suivant : cliquer

 

score : Cette variable contient le nombre de points marqués par le joueur.

action : cette variable va nous permettre de savoir si le lutin saute ou marche.

gravité : cette variable est utilisée pour les sauts.

Pour la variable score, il faut penser à cocher la case qui se trouve devant son nom dans SCRATCH, ceci permet de l’afficher à l’écran. Le score sera visible pendant la partie.

Maintenant nous allons décrire le code SCRATCH pour notre lutin Cody.

Code Scratch pour le lutin “Cody“

Au début du programme, nous commençons par affecter les bonnes valeurs aux variables, action prend la valeur marche et le score est égal à 0. Ensuite, nous plaçons notre lutin à sa position de départ.

plateforme_niv1_cody_scratch1

Nous avons vu dans le projet Création et déplacement d’un lutin sur la scène, qu’il existe deux méthodes pour prendre en compte la gestion des entrées clavier.

Lien

Le projet “Création et déplacement d’un lutin” est disponible ici: cliquer

 

Pour notre exemple, nous utiliserons la méthode de gestion des touches du clavier grâce aux blocs de type capteur.

Nous insérerons le code qui gère les déplacements du joueur dans une boucle infinie.

plateforme_niv1_cody_scratch2

Nous allons commencer par tester si le lutin se trouve sur le sol ou pas. Sur l’arrière-plan de notre projet, nous avons tracé des lignes roses sur les éléments qui représente le sol. Cette couleur été choisie afin de bien voir les éléments représentant le sol, il sera préférable de choisir une couleur plus neutre si vous voulez créer un jeu. Nous pourrons savoir si Cody touche le sol en testant si le lutin touche la couleur rose grâce au bloc couleur touchée?.

Si le lutin est en train de marcher (action=marche) nous allons regarder s’il ne se trouve pas dans les airs en effectuant un test Si Alors avec la condition non couleur rose touché? L’opérateur non indique que l’on teste la condition inverse :

Si couleur rose touchée? : nous testons si le lutin touche la couleur rose.

si non couleur rose touchée? : nous testons si le lutin ne touche pas la couleur rose.

De plus, nous ajoutons une deuxième condition qui est de savoir s’il est sur une échelle. En effet, si le lutin se trouve sur une échelle, il ne touchera pas le sol mais il ne faudra pas le faire tomber.

Si ces deux conditions sont réunies, on fait tomber notre lutin en décrémentant l’ordonnée y de 2.

plateforme_niv1_cody_scratch3

Commençons par nous intéresser au déplacement du lutin sur la gauche. Lorsque le touche flèche gauche est pressée, nous basculons sur le costume vue_de _profil et nous orientons Cody vers la gauche (-90°). Ensuite nous décrémentons l’abscisse x de 3, ce qui aura pour effet de déplacer notre lutin de 3 pixels vers la gauche. Lorsque ce déplacement a été effectué, nous testons s’il touche le lutin plateforme. Si c’est le cas, nous incrémentons l’abscisse x de 3, pour le déplacer de 3 pixels vers la droite. Cette opération nous permet de faire comme si le lutin n’avait pas bougé, il a avancé de 3 pixels vers la gauche puis de 3 pixels vers la droite. Le lutin ne pourra donc pas passer au travers de la plateforme lorsqu’il monte à l’échelle ou lorsque qu’il est en train de tomber depuis le bord de la plateforme.

plateforme_niv1_cody_scratch4

Nous utilisons la même méthode pour le déplacement vers la droite.

plateforme_niv1_cody_scratch5

Si la touche flèche haut est pressé, nous allons faire monter le lutin. Cette condition n’est pas suffisante, il faut aussi que le lutin se trouve sur un échelle. Nous allons donc introduire les deux conditions dans notre test (si touche flèche haut pressée? et si echelle touché?). Lorsque le lutin peut monter, nous basculons sur le costume vue_de_dos et incrémentons l’ordonnée y de 2.

plateforme_niv1_cody_scratch6

Nous répétons la même opération pour aller vers le bas. Par contre, quand le lutin est en bas de l’échelle, si la touche flèche bas est pressée, il va descendre et passer à travers le sol.Il faut donc vérifier s’il ne descend pas trop bas. Quand Cody touche le sol du bas, son ordonnée y est égale à -102. Nous allons donc effectuer un test sur cette ordonnée pour savoir s’il passe à travers le sol. Si y est plus petit que -102, nous lui réaffectons la valeur -103, ainsi y ne pourra jamais être inférieur à -102 et le lutin ne passera jamais à travers le sol.

plateforme_niv1_cody_scratch7

Le code qui permet de déplacer notre lutin dans les 4 directions est maintenant terminé.

N’oubliez pas d’insérer ce code dans la boucle répéter indéfiniment dont nous avons parlé au début.

Pour écrire le code qui va permettre au lutin de sauter, nous allons ajouter une série d’instructions commençant par quand drapeau vert cliqué. Le code qui suivra cette instruction s’exécutera en même temps que celui que nous venons d’écrire. Grâce à cette méthode, quand le lutin sautera, il pourra aussi se déplacer sur la droite et la gauche. Nous ajoutons aussi une boucle répéter indéfiniment comme pour les déplacements.

plateforme_niv1_cody_scratch8

La touche utilisée pour le saut sera la barre d’espace, nous ferons donc le test sur cette touche. Nous ne voulons pas que le lutin puisse sauter s’il est déjà en train d’effectuer un saut ou s’il est en train de tomber d’une plateforme. Il faut donc aussi tester si notre lutin touche le sol. Lorsque ces deux conditions sont réunies, le lutin peut sauter, nous affectons la valeur saut à la variable action. Cette action permet d’empêcher le code gérant les déplacements de faire tomber le lutin dès qu’il aura commencé son saut.

 

plateforme_niv1_cody_scratch9

Code Scratch pour le lutin “echelle“

Le code pour le lutin echelle sert juste à le positionner au bon endroit

plateforme_niv1_echelle_scratch

Code Scratch pour le lutin “plateforme“

De même, ce code sert juste à placer la plateforme au bon endroit.

plateforme_niv1_plateforme_scratch

Nous allons maintenant rajouter des bonus, une pomme et une banane, qui rapporteront respectivement 5 et 10 points au joueur lorsqu’il les ramassera.

Code Scratch pour le lutin pomme

Dans un premier temps, nous ajustons la taille du lutin, nous l’affichons et le plaçons sur l’écran aux coordonnées x=-100 et y=8.

plateforme_niv1_pomme_scratch1

Dans un second temps, pendant toute la durée de la partie, nous testons si le lutin Cody touche la pomme. Lorsque le joueur touche la pomme, on incrémente la variable point de 5 et on fait disparaître la pomme de l’écran.

plateforme_niv1_pomme_scratch2

Code Scratch pour le lutin banane

Nous procédons de la même manière pour que pour le lutin pomme. Il suffit de changer les coordonnées et d’incrémenter la variable points de 10 au lieu de 5.

plateforme_niv1_banane_scratch

Pour aller plus loin

Vous possédez maintenant les bases pour créer un jeu de plateforme. Vous pouvez ajouter quelques améliorations pour rendre le jeu plus intéressant ou plus difficile.

Vous pouvez ajouter des plateformes et des échelles.

Vous pouvez ajouter des bonus et fixer un temps limité pour les attraper.

Vous pouvez ajouter des obstacles ou des ennemis qui vous gêneront dans la progression du jeu.

 

(code source, ressources graphiques et fiche récapitulative)

 

Projets SCRATCH débutants-intermédiaires


Casse brique

vignette_casse_brique

Description du projet

Dans ce projet, nous allons créer un jeu de casse brique. Le principe du jeu est d’éliminer toutes les briques présentes sur l’écran. Le joueur contrôle une raquette en bas de la zone de jeu. Il devra faire rebondir la balle sur sa raquette afin de la renvoyer vers le haut et de toucher les briques. Lorsqu’une brique est touchée par la balle, le joueur marque un point et la brique disparaît.

Ce projet fait suite au projet Pong, il n’y aura plus qu’un seul joueur et une seule raquette. Pour afficher les briques, l’élève devra utiliser les clones dans Scratch.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut

Ajouter les trois lutins “lutin_raquette_cassebrique.png“, “lutin_balle_cassebrique.png” et “lutin_brique_cassebrique.png“fournis dans les ressources.

Ajouter l’arrière-plan “fond_brique_cassebrique.png“

Partie 2 – Programmation

Démarche à suivre pour construire le pseudo code.

Afficher toutes les briques.

Répéter tant qu’il reste des briques.Déplacer la balle en respectant les règles suivantes :

Si la balle touche un des bords verticaux ou le bord supérieur, la faire rebondir.

Si l’ordonnée de la balle est inférieure à 150, écrire “Vous avez perdu.” et arrêter le programme.

Si la balle touche la raquette, la faire rebondir en tenant compte de la position de la balle sur la raquette au moment de l’impact.

Si la balle touche une brique, incrémenter le score de 1 point et faire disparaître la brique.

Gérer les déplacements de la raquette avec la souris

Le projet contient trois lutins, nous allons d’abord nous intéresser au pseudo code associé à la raquette.

Pseudo code pour la raquette

abscisse_raquette←0 ordonnée_raquette←-140 Boucle infinie abscisse_raquette←abscisse_souris Fin boucle infinie

Signification du pseudo code :

Au début de la partie, nous affectons la valeur 0 à l’abscisse de la raquette et la valeur -140 à l’ordonnée de la raquette;

Durant la partie, nous affectons la valeur de l’ordonnée de la souris à l’ordonnée de la raquette.

Pseudo code pour les briques

Xbrique←-120 Ybrique←40 Nb_brique←30 Pour compteur←1 à 30 Si Xbrique<150 Alors Xbrique←-120 Ybrique←Ybrique+20 Sinon Xbrique←Xbrique+30 Afficher un clone du lutin brique aux coordonnées Xbrique,Ybrique Fin Si Fin Pour Boucle Infinie Si balle touchée?==vrai Nb_brique←Nb_brique-1 Effacer la brique touchée Fin Si Fin Boucle Infinie

Signification du pseudo code :

Dans la boucle compteur←1 à 30, nous créons 3 rangées de 10 briques. La première rangée commence aux coordonnées x=-120 et y=40, la deuxième aux coordonnées x=-120 et y=60 et la troisième aux coordonnées x=-120 et y=80;

Ensuite, pendant toute la partie, nous testons si la balle touche une brique. Si c’est le cas, nous décrémentons la variable Nb_brique et nous effaçons la brique.

Pseudo code pour la balle

Nous allons découper le pseudo code en plusieurs partie pour clarifier les explications

abscisse←0 ordonnée←0 direction←170 score←0

Signification du pseudo code :

Nous affectons 0 à l’abscisse et l’ordonnée de la balle afin de la placer au centre de l’écran;

Nous affectons la valeur 170 ° à la direction de la balle. Au début du jeu, elle partira donc vers le bas;

Nous affectons la valeur 0 au score.

 

TantQue nombre_brique>0 // ... insérer le pseudo code décrit plus bas ... Fin TantQue Ecrire "Vous avez éliminé toutes les briques"

Le reste du pseudo code sera intégré dans une boucle Tant Que qui testera s’il reste toujours des briques en jeu. S’il n’y a plus de brique, on sort de la boucle et on écrit “Vous avez éliminé toutes les briques”.

 

Faire avancer la balle de 10 pixels Faire rebondir la balle sur les bords latéraux et supérieur Si ordonnée<-150 Alors Ecrire "Vous avez perdu" Arréter le programme Fin Si

Cette partie du pseudo code gère les déplacements de la balle.

Nous faisons avancer la balle de 10 pixels.

Si la balle touche un des bords verticaux ou le bord supérieur, nous faisons rebondir la balle.

Si l’ordonnée de la balle est inférieure à -150, c’est que le joueur a raté la balle avec sa raquette, car l’ordonnée de la raquette est -140. On affiche “Vous avez perdu” et on arrête le programme.

 

Si raquette touchée?==vrai Alors Si Abs(abscisse_raquette-abscisse_souris)<10 Alors direction←180-direction Sinon direction←180-direction-(abscisse_raquette-abscisse_balle)/2 Fin Si Fin Si Si brique touchée?==vrai direction←180-direction Fin Si

Cette partie du pseudo code gère les collisions avec la raquette et les briques.

Nous testons si la balle touche la raquette pour la faire rebondir dessus le cas échéant. Comme pour le projet Pong, afin de ne pas toujours avoir le même angle de la balle du début, à la fin du jeu, il faut tenir compte de la position de la balle par rapport au centre de la raquette.

Info

La mesure des angles dans SCRATCH :

Dans le jeu Pong, lorsque la balle touchait le centre de la raquette, il suffisait d’inverser la direction pour avoir la nouvelle direction prise par la balle (direction←-direction). Nous pouvions faire ceci car les raquettes étaient verticales. En effet, la mesure des angles dans Scratch se fait par rapport à un axe vertical.

Si une balle arrive avec un angle de 130° sur une raquette verticale, elle repartira avec un angle de -130° après le rebond. L’angle par rapport à la normale de la raquette est le même que celui utilisée par Scratch.

Pour une raquette horizontale, ce principe ne fonctionne plus. L’angle après le rebond, se calcule avec la formule suivante :

nouvelle_direction = 180° – ancienne_direction

 

Nous testons si la balle touche une brique et la faisons rebondir si c’est le cas.

Programmation dans SCRATCH

Tout d’abord, définissons les variables dont nous aurons besoin par la suite pour tous les lutins :

Score : contient le score du joueur;

Nb_brique : contient le nombre de briques qu’il faudra détruire;

Xbrique : abscisse des briques;

Ybrique : ordonnées des briques;

Efface : cette variable nous servira pour effacer les briques comme nous le verrons dans le code Scratch du lutin brique.

Code Scratch pour le lutin raquette

Nous affectons la valeur 0 à l’abscisse de la raquette et -140 à son ordonnée, la balle sera positionnée au milieu de l’écran. Ensuite, nous créons une boucle répéter indéfiniment dans laquelle nous affectons la valeur de l’abscisse de la souris à l’abscisse de la raquette. L’ordonnée de la raquette ne changera pas durant toute la partie, la souris nous permettra donc de déplacer la raquette le long d’une ligne d’ordonnée y=-140.

raquette1

Code Scratch pour le lutin balle

Nous positionnons la balle au centre de l’écran (x=0, y=0) et l’orientons à 170°. Nous affectons la valeur 0 à la variable Score. Ensuite, nous introduisons un temps d’attente de 2 secondes pour que le jeu ne commence pas dès que le joueur a cliqué sur le drapeau vert.

balle1

Pour que le jeu s’arrête lorsque toutes les briques ont été détruites, nous utiliserons une boucle répéter jusqu’à Nb_brique=0. Quand il n’y aura plus de brique à l’écran, le programme sortira de la boucle et écrira “Vous avez éliminé toutes les briques.”

balle2

Attention

Tous les codes qui vont être décrits par la suite devront être insérés dans la boucle que nous venons de créer.

Nous faisons avancer la balle de 10 pixels. Cette valeur est arbitraire et vous pouvez la changer. Si vous prenez un nombre de pixels plus grand, la balle ira plus vite et, inversement, si le nombre est plus petit, la balle ira moins vite. Ensuite nous testons si l’ordonnée de la balle est inférieure à -150. Si c’est le cas, c’est qu’elle se trouve sous la raquette, le joueur a donc perdu, nous écrivons “Vous avez perdu.” et nous arrêtons le programme.

balle3

Nous allons maintenant tester si la balle touche la raquette. Nous pourrions utiliser la méthode utilisant le théorème de Pythagore pour savoir si le lutin balle touche le lutin raquette. Scratch nous simplifie la tâche grâce au bloc lutin touchée ?. Cette commande nous permet de savoir, sans calcul, si le lutin pour lequel nous écrivons le code touche un autre lutin.

Si la balle touche le lutin raquette, nous faisons jouer le son pop (il est déjà inclus dans SCRATCH par défaut, il n’y a pas besoin de l’importer.) Ensuite nous allons tester si la balle se trouve dans la partie centrale de la raquette ou non. Si le point d’impact est dans la partie centrale de la raquette, la balle repart vers le haut avec un angle opposé à celui qu’elle avait en descendant, sinon, nous incrémentons la direction de la valeur abscisse_raquette – abscisse_balle.

Lien

Le projet Pong : cliquer

balle4

Pour finir, nous testons si la balle touche une brique. Dans ce cas, nous la faisons rebondir. L’effacement de la brique et l’augmentation du score seront géré dans le lutin brique.

balle5

Code Scratch pour le lutin brique

Pour ce projet, nous allons afficher 30 briques à l’écran. Il est possible de créer 30 lutins briques identiques, qui ne différeraient que par leurs positions à l’écran.Cette méthode est laborieuse car il faut définir la position de chaque brique, le programme devient vite très lourd. Comme pour le projet Jeu de Nim, nous allons utiliser les clones.

Lien

Le projet du jeu de Nim : cliquer

Nous allons d’abord créer une variable locale Num_brique qui sera réservée à ce lutin, elle ne sera pas accessible par les autres lutins. Elle servira à différencier les clones, chaque clone créé portera un numéro unique, Num_brique. Pour ajouter une tel type de variable, il faut cliquer sur le bouton Pour ce lutin uniquement lorsque nous créons la nouvelle variable.

brique1

 

Ensuite nous initialisons les différentes variables qui vont être nécessaires par la suite et nous cachons le lutin brique. Nous affectons la valeur 0 aux variables Num_brique, Nb_brique et efface. Nous fixons les coordonnées de la première en affectant -120 à Xbrique et 40 à Ybrique. Nous créons les trente clones en incrémentant de 1 à chaque fois les variables Nb_brique et Num_brique.

brique2

Nous allons maintenant utiliser la commande quand je commence comme comme un clone qui permet de dire à un clone ce qu’il doit faire à partir du moment où il est créé.

Nous fixons son abscisse et son ordonnée à Xbrique et Ybrique respectivement et nous affichons le clone. Si la variable Xbrique est inférieure à 150, nous l’incrémentons de 30 pour créer le clone suivant. Sinon, nous affectons -120 à Xbrique et incrémentons Ybrique de 20 pour créer la prochaine rangée de brique.

brique3

Maintenant, nous allons gérer l’effacement des briques lorsqu’elles sont touchées par la balle. Nous créons une boucle répéter indéfiniment. Nous testons si le lutin brique touche le lutin balle. S’il y a contact, nous décrémentons la variable Nb_brique de 1. Nous affectons la valeur Num_brique à la variable efface. En effet, la variable Num_brique identifie le clone qui a été touché, la variable efface aura donc la valeur du numéro du clone à effacer. Finalement nous testons si la variable Num_brique est égale à la variable efface. Lorsque la condition est remplie, le clone qui porte le numéro Num_brique est supprimé.

brique4

Pour aller plus loin

Introduire plusieurs types de briques qui n’auront pas la même couleur et ne marqueront pas le même nombre de points.

Faire continuer le jeu, lorsque toutes les briques ont été détruites, en affichant un nouveau niveau avec des briques disposées différemment .

Faire augmenter la vitesse de la balle au fur et à mesure du temps.

 

 

 

Projets SCRATCH débutants-intermédiaires


Puzzle – carte des régions de France

vignette_puzzle_regions

Présentation du projet

Le but de ce projet est de construire un puzzle basé sur les régions françaises en métropole (la taille de la scène de SCRATCH étant trop petite nous n’avons pu réaliser que le puzzle de la France métropolitaine). Le fond d’écran représentera une carte de France métropolitaine vierge, où seules les frontières seront représentées. les treize régions seront les pièces du puzzle. Lorsque la région sera placée à la bonne position, un message le signalera et cette région ne pourra plus être déplacée. Lorsque les treize pièces seront bien positionnée, le puzzle est terminé.

Nous allons être amené à placer les différentes régions à des positions précises sur l’écran. Il faudra donc bien maîtriser le système de coordonnées utilisé par Scratch.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut.

Ajouter le lutin”lutin_cody_puzzle_regions.png“.

Ajouter les 13 lutins représentant les régions. Le format de ces lutins (.svg) n’est pas celui que l’on utilise habituellement, il est utilisé pour des images dites vectorielles. L’avantage de ce type de fichier, c’est que l’on peut agrandir les images sans effet de pixellisation, l’image sera toujours aussi nette, même en grand format.

Ajouter l’arrière-plan “fond_france_puzzle_regions.png“.

Partie 2 – Programmation

Déroulement du programme :

afficher les pièces régions aléatoirement sur l’écran;

si une pièce est positionnée, vérifier si elle se trouve au bon endroit. Quand elle est à la bonne position, le signaler et l’empêcher de bouger pour la suite;

si toutes les pièces sont à la bonne place, afficher que le joueur a gagné.

Pseudo code pour le puzzle

x←valeur aléatoire entre -200 et 200 y←valeur aléatoire entre -160 et 160 Afficher le lutin aux coordonnées x et y TantQue le lutin n'est pas à la bonne position Afficher le lutin Fin TantQue Ecrire "Quel est le nom de la région ?" Lire reponse Si reponse==nom de la région Alors Ecrire "Bien, tu as trouvé le nom de la région" sinon Ecrire"Le nom de cette région est "+nom de la région Fin Si Boucle Infinie Afficher le lutin à la bonne position Fin boucle Infinie

Description du pseudo code :

nous affichons le lutin de manière aléatoire à l’écran;

tant que la région n’aura pas été placée à la bonne position, le programme se contente d’afficher le lutin la représentant;

lorsqu’elle est est bien positionnée, nous demandons son nom à l’utilisateur. S’il ne le trouve pas, le programme l’affiche;

ensuite, le lutin est affiché à la bonne position et ne peut plus être déplacé.

programmation dans Scratch

Nous n’aurons besoin que de deux variables dans ce projet :

region_trouvee : cette variable contient le nombre de régions qui sont bien positionnées.

i : cette variable servira de compteur.

Code Scratch pour le lutin “joueur“

Nous créons un lutin joueur qui sera représenté par la mascotte Cody, il ne servira qu’à savoir si toutes les régions ont été placées au bon endroit.

Nous le plaçons dans le coin inférieur gauche et augmentons sa taille. La variable region_trouvee est mise à zéro, puis nous informons l’utilisateur qu’il va devoir replacer les 13 régions à la bonne place.

puzzle_regions_joueur_scratch1

Pendant tout le déroulement du programme, ce lutin va tester si le nombre de régions trouvée atteint la valeur 13. Quand les 13 régions auront été positionnées correctement, nous affichons à l’écran que le joueur a réussi et nous stoppons le programme.

puzzle_regions_joueur_scratch2

Code Scratch pour les lutins régions

Le code Scratch est pratiquement le même pour tous les lutins, il n’y a que les coordonnées de chaque région qui vont différer. Nous allons étudier le code en prenant le lutin correspondant à la région Corse.

Au début, la région est positionnée de manière aléatoire sur l’écran. Nous avons limitée la plage de tirage pour les abscisses de -200 à 200 et de -160 à 160 pour les ordonnées. Si nous effectuons ce tirage aléatoire sur la totalité de l’écran, certaines régions peuvent se retrouver complètement sur le bord et devenir difficilement visibles (notamment pour les petites régions comme l’Ile de France ou la Corse). Nous ajustons aussi la taille pour la faire correspondre avec le fond de carte.

puzzle_regions_region_scratch1

Ensuite, nous testons si le lutin est placé à la bonne position sur le fond de carte par l’utilisateur. Pour la Corse, cette position correspond aux coordonnées :

x = 132

y = -138

Nous ne pouvons pas demander au joueur de positionner le lutin exactement à ces coordonnées, il faut lui laisser une marge d’erreur. En effet, il est pratiquement impossible de tomber exactement sur cette position en déplaçant la région avec la souris. Nous allons donc laisser une marge d’erreur de +/- 3 pixels en abscisse et en ordonnée. Tant que le lutin se trouve à une distance de plus de 3 pixels de là où il devrait se situer sur la carte, nous nous contentons de montrer le lutin. Pour être sûr que le joueur a bien positionné la région au bon endroit, nous ajoutons la condition non souris pressée? au test sur la position x et y. Si, en déplaçant la région avec la souris, le lutin passe au-dessus de la position correcte sans lâcher le bouton de la souris, la condition ne sera pas respectée. Pour que l’on considère que le joueur a bien placé le lutin, il faut qu’il ait lâché le bouton de la souris. Si la position correcte est trouvée, nous affichons “Bravo” pendant 1 seconde.puzzle_regions_region_scratch2

Maintenant que le joueur a réussi a bien placer la région, nous allons lui demander le nom de cette région et nous lui laisserons trois chances pour trouver. Nous commençons par affecter la valeur 0 au compteur i, il va nous servir à compter le nombre de réponse fausse. Ensuite, nous posons la question “Quel est le nom de cette région ?”. Nous insérons cette instruction dans une boucle qui se répètera tant que le bonne réponse n’aura pas été trouvée ou que le compteur n’aura pas atteint la valeur 3.

puzzle_regions_region_scratch3

Le programme peut sortir de la boucle précédente pour deux raisons : soit la réponse est bonne, soit le compteur i=3. Nous effectuons un test sur cette réponse. Si c’est la réponse attendue, nous affichons “Bravo, tu as trouvé le nom de la région”, sinon, nous donnons la bonne réponse au joueur. Nous incrémentons la variable region_trouvee de 1.

puzzle_regions_region_scratch4

Nous indiquons alors au lutin de se placer à la position exacte ( ici x=132 et y=-138). Nous voulons être sûr que le lutin ne se superpose pas au-dessus d’une région qui n’a pas été placée car elle deviendrait inaccessible au joueur. Nous ajoutons donc une instruction qui la déplace de 10 plans en arrière. Nous insérons ces deux instructions dans une boucle infinie, ainsi, même si l’utilisateur essaie de déplacer cette région par la suite, elle reviendra instantanément à sa position.

puzzle_regions_region_scratch5

Il suffit maintenant d’appliquer la même méthode pour les douze autres régions.

Copie dans Scratch

Pour copier un bloc d’instructions et le placer dans un autre lutin, il existe deux méthodes :

nous pouvons faire un clic droit sur le bloc et sélectionner l’option dupliquer et ensuite déposer le code sur le lutin considéré;

nous pouvons aussi prendre le code avec la souris en cliquant sur le bouton de gauche et le glisser directement sur le lutin voulu.

Info

Il sera préférable de jouer en plein écran, ainsi, les noms des régions apparaissant dans la fenêtre lutin ne seront pas visibles. Pour pouvoir déplacer les lutins dans ce type d’affichage, il faut modifier un paramètre. En cliquant sur le i en haut à gauche de l’icône représentant le lutin, nous faisons apparaître une fenêtre qui contient les informations relatives à ce lutin. Il faut cocher la case “peut glisser dans le lecteur” pour que l’utilisateur puisse déplacer le lutin en affichage plein écran.

info_lutin

 

(code source, ressources graphiques et fiche récapitulative)

 

Projets SCRATCH débutants-intermédiaires


 

Angry monkey – partie 1

vignette_angrymonkey1

Description du projet

Le but du projet est de créer un jeu de type angry bird. Le joueur doit lancer un projectile en choisissant l’angle de départ et la force du lancer avec la souris. Dans la première partie de ce projet, nous ne nous occuperons que du lancer. Une seconde partie sera dédiée à la gestion des ennemis, des collisions et du score.

Dans ce projet, le lancer des projectiles est effectué avec la souris. Lorsque nous cliquons sur le bouton de gauche, une ligne apparaît entre le viseur et le curseur de la souris. Cette ligne représente la direction et la force avec lesquels le projectile va être lancé. Quand on lâche le bouton, le projectile est lancé. Le mouvement du projectile sera géré grâce aux équations fondamentales de la cinématique. Les formules permettant de calculer l’abscisse et l’ordonnée du projectile au cours du temps vous serons données, il suffira de les recopier et de les utiliser avant d’afficher le projectile à l’écran.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut.

Ajouter le lutin “lutin_banane_angry_monkey1.png” fourni dans les ressources. Le lutin “viseur” est représenté par un carré noir de 4 pixels de coté, il est facile de le dessiner avec l’éditeur. Il ne faut pas oublier de définir son centre.

Ajouter l’arrière plan “fond_foret_angry_monkey1.png“.

Partie 2 -Programmation

Déroulement du programme :

Si le bouton de la souris est cliqué, nous affichons la ligne représentant l’angle et la puissance du lancer:

Lorsque le bouton de gauche est relâché, le projectile est lancé;

Tant que le projectile ne sort pas de l’écran par la droite, la gauche ou le bas, nous l’affichons;

Si le projectile sort de l’écran par le haut, nous continuons à calculer sa trajectoire car il peut revenir sur l’écran en retombant;

Répéter les opérations précédentes.

Pseudo code pour angry monkey partie 1

Tir←faux Boucle Infinie Si souris pressée==vrai Alors Afficher ligne viseur Tir←vrai Fin Si Si Tir==vrai Alors Tir←faux Si x<240 || x>-240 || y>-180 Alors Afficher projectile Fin Si Fin Si Fin Boucle Infinie

Signification du pseudo code

Nous assignons la valeur faux à la variable booléenne Tir.

Si le bouton de la souris est pressé, nous affichons la ligne qui symbolise l’angle et la puissance du lancer et nous assignons vrai à la variable Tir.

Si la valeur de la variable Tir est vraie alors le tir est effectué. Nous affichons le projectile tant qu’il ne sort pas de l’écran par le bas, la gauche ou la droite. Nous assignons faux à la variable Tir.

Programmation dans Scratch

Définition des variables :

Tir : variable booléenne qui nous permet de savoir si nous devons déclencher un tir.;

Xviseur : abscisse du viseur. Les projectiles seront lancés depuis ce point;

Yviseur : ordonnée du viseur. Les projectiles seront lancés depuis ce point;

a : distance entre l’abscisse du viseur et celle du pointeur de la souris;

b : distance entre l’ordonnée du viseur et celle du pointeur de la souris;

g : constante gravitationnelle. Cette constante nous servira dans le calcul de la trajectoire du projectile.

Code Scratch pour le lutin “viseur“

Nous positionnons le viseur dans le coin inférieur gauche de l’écran, assignons la valeur faux à Tir et assignons 0 aux variables a et b. La constante g est fixée à -9.81, elle “représente” la force de gravité. Nous effaçons l’écran et affichons le viseur.

angry1_viseur_scratch1

Nous introduisons un temps d’attente d’une seconde pour que le clic sur le drapeau vert qui permet de lancer le programme ne soit pas pris en compte. Le reste du code développé pour le lutin “viseur” sera inséré dans une boucle infinie.

angry1_viseur_scratch2

Nous testons ensuite si le bouton de la souris est pressée, si c’est la cas, nous affichons la ligne qui représente l’angle et la force du tir. Le code permettant l’affichage de cette ligne sera donc inséré dans une boucle répéter jusqu’à avec la condition non souris pressée? (il sera exécuté jusqu’à ce que le bouton de la souris soit relâché).

Nous choisissons la couleur bleue et la taille 1 du stylo pour tracer un trait entre le viseur et le pointeur de la souris. Nous attendons un dixième de seconde et nous traçons un trait blanc de taille 3 entre le curseur et le viseur, ce qui équivaut à effacer le trait que nous venons de tracer. Cette opération a pour effet de tracer une ligne qui clignote entre le pointeur et le viseur. Nous avons choisi une taille supérieure pour le stylo (taille=3) lorsque l’on trace en blanc pour être sûr d’effacer le trait même si le pointeur a légèrement bougé pendant le temps d’attente d’un dixième de seconde. Nous calculons ensuite la valeur pour les variables a et b, elles nous serviront lorsque le tir devra être effectué. Enfin, nous assignons la valeur vrai à la variable Tir. Lorsque nous sortirons de la boucle, il faudra déclencher le tir.

angry1_viseur_scratch3

Si la valeur de la variable booléenne Tir est égale à vrai, nous envoyons le message “tir” qui va déclencher le lancer du projectile. Le calcul de la trajectoire et l’affichage du projectile seront faits dans le lutin “banane“.

angry1_viseur_scratch4

Code Scratch pour le lutin “banane”

Nous allons utiliser les clones pour pouvoir tirer plusieurs projectiles qui seront présents en même temps à l’écran. Il faut créer des variables locales qui seront spécifiques à chaque clone, elles permettront de gérer leurs mouvements.

Vx : représente la composante horizontale de la vitesse du projectile.

Vy : représente la composante verticale de la vitesse du projectile.

Xprojectile : abscisse du projectile.

Yprojectile : ordonnée du projectile.

temps : variable qui permet de simuler le temps dans l’équation du mouvement.

Au début du jeu, nous plaçons le projectile sur le viseur, nous lui donnons la bonne taille et nous l’affichons.

angry1_banane_scratch1

Durant toute la durée de la partie, nous allons tester si le bouton de la souris est appuyé. Quand le joueur appuie sur le bouton de la souris c’est qu’il est en train de viser avant de lancer un projectile, nous affichons donc le projectile aux coordonnées du pointeur de la souris. Si le joueur ne clique pas, le projectile sera affiché sur le viseur.

angry1_banane_scratch2

Quand le message “tir” est reçu, nous créons une clone du projectile.

angry1_banane_scratch3

Lorsqu’un clone est créé, le projectile a été lancé, il va falloir calculer la position de ce projectile en respectant les équations du mouvement soumis à la gravité. Le niveau d’étude des élèves ne leur permet pas d’avoir connaissance de ces formules, c’est pourquoi nous les fournissons et nous ne développerons pas la théorie complète associée à ces équations. Il suffit juste de savoir que ces équations dépendent de trois facteurs :

la position de départ du projectile : cette position nous est donnée par les variables Xviseur et Yviseur car les projectiles sont lancés depuis le viseur.

le temps : la position du projectile évolue en fonction du temps. Pour un temps t donné, nous pouvons calculer la position exacte du projectile.

la vitesse de départ : les variables Vx et Vy nous donne les valeurs des composantes horizontales et verticales de cette vitesse de départ.

La vitesse horizontale (Vx) est représentée par la variable a, plus l’abscisse du curseur de la souris sera éloignée de l’abscisse du viseur, plus la vitesse horizontale sera grande. Il en est de même pour la vitesse Vy qui est représentée par la variable b. Nous remarquons que l’angle de départ α du projectile n’apparaît à aucun endroit dans les formules. En fait, ce sont les valeurs des variables Vx et Vy qui représentent cet angle.

composantes_vitesse_de_depart

Nous affectons donc les valeurs de a et de b aux variables Vx et Vy respectivement. Le temps est mis à zéro et nous affectons les valeurs Xviseur et Yviseur comme abscisse et ordonnée de départ. Nous assignons la valeur faux à la variable Tir afin que le lutin “viseur” ne déclenche pas un nouveau tir tant que le bouton de la souris n’aura pas été cliqué.

angry1_banane_scratch4

Nous allons maintenant calculer la position du projectile. Nous insérons ce code dans une boucle qui teste si le projectile ne sort pas de l’écran, hormis par le haut.

angry1_banane_scratch5

Les équations qui permettent de calculer les coordonnées du projectile au temps t sont les suivantes :

Xprojectile = Vx*t + Xdepart

Yprojectile = Vy*t +(g/2)*t² + Ydepart

Ce qui se traduit en code Scratch :

angry1_banane_scratch6

Nous testons ensuite si le projectile n’est pas sorti par le haut de l’écran. Dans ce cas, nous l’affichons et ajoutons une rotation entre chaque nouvelle position, sinon, nous continuons de calculer sa trajectoire sans l’afficher. Si le projectile, dans la suite du mouvement, revient à l’écran, il pourra de nouveau être affiché.

lance-hors-ecran

Ensuite nous incrémentons la variable temps de 0.1, cette valeur est fixée arbitrairement. Si vous voulez augmenter la vitesse des projectiles, vous pouvez augmenter cette valeur.

angry1_banane_scratch7

Lorsque nous sortons de la boucle principale, le clone a terminé sa trajectoire, nous le supprimons. Nous obtenons donc le code complet suivant pour afficher la trajectoire du projectile :

angry1_banane_scratch8

Code Scratch pour l’arrière-plan

Pour faire clignoter le trait entre le viseur et le pointeur de la souris, nous dessinons un trait bleu puis nous traçons un trait blanc par dessus pour l’effacer.

Nous avons ajouté une image pour l’arrière plan, donc le trait blanc va apparaître sur cet arrière plan. Pour éviter cela, toutes les 0.1 secondes, nous effaçons ce qui est dessiné. Ainsi, la ligne de visée clignote, mais les traits blancs ne restent pas affichés sur le dessin représentant la forêt.

angry1_foret_scratch

 

Projets SCRATCH débutants-intermédiaires


Angry monkey – partie 2

vignette_angrymonkey2

Description du projet

lien test

Ce projet fait suite à Angry monkey partie 1. Nous avons créé le code permettant de lancer les projectiles. Maintenant nous allons ajouter les lutins sur lesquels notre singe va devoir jeter ses bananes. Les lutins représenteront des oiseaux que le singe devra chasser de la forêt en les visant avec ses bananes. Lorsqu’un oiseau est touché, le joueur marque un point et l’oiseau sort de l’écran en se déplaçant vers le bord de droite. Les oiseaux apparaîtront de façon aléatoire sur la partie droite de l’écran toutes les secondes et s’il y a plus de dix oiseaux qui sont présents, le jeu est terminé. Pour corser la difficulté du jeu, lorsque le nombre de points augmentera, nous diminuerons le temps entre l’apparition de deux oiseaux.

Nous allons utiliser les clones pour pouvoir faire apparaître plusieurs ennemis à l’écran. Nous serons amené à gérer le score ainsi que les conditions qui vont faire que la partie sera terminée.

Partie 1 -Préparation de l’application et ajout des ressources

Charger le projet “angry_monkey_partie1.sb2“.

Ajouter le lutin “lutin_oiseau_angry_monkey.png“.

Partie 2 – Programmation

Le programme devra suivre le cheminement suivant :

faire apparaître un oiseau toutes les secondes à une position aléatoire de l’écran;

si le nombre d’oiseau est plus grand que 10 nous arrêtons le programme;

si l’oiseau est touché par un projectile, le faire disparaître et ajouter un point au joueur.

Pseudo code pour angry monkey partie 2′

nb_oiseau←0 point←0 TantQue nb_oiseau<=10 Afficher lutin oiseau toutes les secondes Si projectile touche oiseau==vrai Effacer oiseau point←point+1 Fin Si Fin TantQue

Code Scratch pour le lutin “oiseau”

Nous devons ajouter des variables pour pouvoir gérer les points et le nombre d’ennemis présents à l’écran.

points : nombre de points marqués par le joueur.

nb_oiseau : nombre d’oiseaux présents à l’écran.

delai : détermine le temps séparant l’apparition de deux oiseaux.

Au début de la partie, nous assignons la valeur 0 à la variable nb_oiseau et nous cachons le lutin. Pendant toute la durée du jeu nous créons un clone du lutin et nous testons le nombre de points déjà marqués par le joueur. Nous affectons la valeur adéquate à la variable delai. Un nouvel oiseau apparaîtra donc dans la forêt au bout d’un temps qui est fixé par la variable delai (exprimée en seconde).

angry2_oiseau_scratch1

Quand un clone est créé, nous le plaçons sur l’écran de manière aléatoire et nous l’affichons. Nous ne faisons pas apparaître les oiseaux sur tout l’écran mais seulement sur la partie de droite (x>1). Nous avons fait ce choix pour que les oiseaux ne puissent pas se trouver directement sur les bananes. Cela rend aussi le jeu plus lisible, on ne risque pas de se retrouver avec des oiseaux partout sur l’écran. Nous incrémentons la variable nb_oiseau de 1.

angry2_oiseau_scratch2

Nous testons dans une boucle infinie si notre lutin est touché par un projectile. En cas de collision, on décrémente de 1 la variable nb_oiseau et on déplace l’oiseau vers sa zone de sortie.

angry2_oiseau_scratch3

Maintenant, il va falloir modifier le code que nous avons déjà écrit.

Modification du code Scratch pour le lutin viseur

Nous devons tout d’abord affecter la valeur 0 à la variable points en début de partie.

angry2_viseur_scratch1

Ensuite, nous devons prendre en compte le nombre d’oiseaux présents à l’écran pour savoir si la partie est terminée. Plutôt que d’utiliser une condition en testant la valeur de la variable nb_oiseau et forcer la sortie de la boucle quand nous avons atteint 10 oiseaux, nous allons modifier la boucle infinie. A la place, nous utilisons une boucle répéter jusqu’à nb_oiseau>10. Lorsque nous sortons de la boucle, nous envoyons le message “fin” à tous les lutins, écrivons que le joueur a perdu et stoppons le script.

angry2_viseur_scratch2

Nous allons fixer le nombre de projectiles maximum à cinq afin de rendre le jeu un peu plus difficile. Lorsque le joueur aura tiré cinq projectiles, il devra attendre qu’il y en ait un qui disparaisse avant de pouvoir en tirer un autre. Pour que cette règle puisse être respectée, nous allons ajouter une condition supplémentaire dans le bloc qui crée un clone du lutin banane. D’abord, nous devons créer une nouvelle variable nb_banane qui contiendra le nombre de projectile déjà tiré. Pour qu’un nouveau clone du lutin banane soit créé, il faudra respecter les deux conditions suivantes :

tir == 1

nb_banane < 5

Nous obtenons donc :

angry2_viseur_scratch3

Modification du code Scratch pour le lutin banane

La variable nb_banane est initialisée à 0 quand la partie commence.

angry2_banane_scratch1

Lorsque l’on crée un clone du lutin, nous incrémentons la valeur de la variable nb_banane.

angry2_banane_scratch2

Il faut tester si le lutin touche un oiseau. Nous ajoutons ce test juste après avoir incrémenté la variable temps de 0.1. Quand un oiseau est touché, nous décrémentons le nombre de projectile de 1, rajoutons 1 point et supprimons le clone. Le test de collision sera aussi effectué dans le lutin oiseau, nous sommes donc obligé d’introduire une temporisation très courte (un millième de seconde) pour que les tests puissent être effectués dans les deux lutins. En effet, si nous supprimons cette temporisation, lorsque le test “oiseau” touché ? est vrai, le clone du lutin banane est supprimé et le test ne pourra pas être effectué dans le lutin oiseau puisque le clone aura été supprimé avant.

angry2_banane_scratch3

 

Pour aller plus loin

Nous pouvons augmenter encore la difficulté en cours de partie en diminuant le nombre maximum de projectiles ou en diminuant leurs tailles.

Nous pouvons aussi faire apparaître des oiseaux qui ne seront plus statiques, nous pouvons les faire se déplacer sur l’écran.

 

 

 

Projets SCRATCH débutants-intermédiaires


 

Gobtou

vignette_gobtou

Description du projet

Le principe du jeu Gobtou est basé sur celui du jeu Pacman. Le joueur se retrouve enfermé dans un labyrinthe avec quatre ennemis. Le but du jeu est de ramasser tous les bonus disséminés dans les couloirs sans se faire attraper par les ennemis. Le joueur possède trois vies au début. Chaque fois qu’un ennemi le touche, il perd une vie. Le jeu se termine quand le joueur a ramassé tous les bonus ou quand il n’a plus de vie.

Ce projet est une version améliorée du labyrinthe. Il va falloir gérer les déplacements des ennemis. Nous utiliserons un système de déplacement aléatoire, à chaque intersection, la prochaine direction empruntée par le lutin sera tirée au hasard.

Le déplacement du joueur va être programmé de manière un peu plus complexe. Lorsqu’il presse une touche, son lutin va se déplacer dans la direction demandée jusqu’à ce qu’il rencontre un mur, même s’il lâche la touche de direction. Pendant le déplacement, si une touche de direction différente est pressée, nous testerons s’il peut aller dans cette direction tant que cette touche restera pressée.

Partie 1 – Préparation de l’application et ajout des ressources

Supprimer le lutin Scratch par défaut.

Ajouter le lutin “lutin_joueur_gobtou.sprite2” et “lutin_ennemi_gobtou.sprite2” et “lutin_murs_gobtou.png” fournis dans les ressources.

Dupliquer le lutin “ennemi” trois fois afin d’avoir quatre ennemis au total. Nous utiliserons quatre lutins identiques et non des clones car le but du projet, à terme, sera de définir une intelligence artificielle différente pour chaque ennemis. Penser à définir les bonnes coordonnées de départ pour chaque ennemi (voir les explications dans le code Scratch du lutin “ennemi“).

Ajouter l’arrière-plan “fond_bonus_gobtou.png“.

Partie 2 – Programmation

Le programme devra suivre le cheminement suivant :

Fixer le nombre de vies à 3 et les points à 0;

Répéter tant que le nombre de vie est supérieur à 0 et le nombre de points maximum n’est pas atteint;

Si une touche de direction est pressée, vérifier si le joueur peut emprunter cette direction et, le cas échéant, actualiser la direction du joueur dans le sens de la flèche pressée;

Faire avancer le joueur dans la direction demandée;

Faire avancer les ennemis;

Tester si un ennemi touche un joueur. Si c’est le cas, enlever une vie et repositionner les lutins en position de départ;

Tester si le joueur touche un bonus. Si c’est le cas, ajouter un point et effacer le bonus de l’écran.

Pseudo code pour le lutin joueur

 

Vie←0 Points←0 Direction←0 TantQue Vie!=0 || Points!=nombre de bonus Si touche "flèche haut" pressee==vrai Alors Si lutin touche mur==faux Alors Direction←haut Fin Si Fin Si Si touche "flèche bas" pressee==vrai Alors Si lutin touche mur==faux Alors Direction←bas Fin Si Fin Si Si touche "flèche droite" pressee==vrai Alors Si lutin touche mur==faux Alors Direction←droite Fin Si Fin Si Si touche "flèche gauche" pressee==vrai Alors Si lutin touche mur==faux Alors Direction←gauche Fin Si Fin Si Faire avancer le joueur vers Direction Si bonus touché==vrai Alors Points←Points+1 Effacer le bonus Fin Si Fin TantQue

Explication du pseudo code

Nous initialisons les variables Vie, Points et Direction à 0.

Le reste du code s’exécutera tant qu’il reste des vies au joueur ou tant qu’il reste des bonus à l’écran.

Nous testons si la flèche vers le haut est pressée. Lorsqu’elle est pressée, nous testons si le lutin peut monter. Si c’est le cas, nous fixons la direction du mouvement vers le haut.

Nous effectuons les mêmes test pour les flèches du bas, de droite et de gauche.

Nous faisons avancer le joueur dans la direction fixée par la variable Direction.

Si le lutin touche un bonus, nous incrémentons la variable Points de 1 et effaçons le bonus.

Pseudo code pour le lutin ennemi

Direction←nombre aléatoire entre 1 et 4 Boucle Infinie Si ennemi touche joueur==vrai Alors Vie←Vie-1 Afficher tous les lutins à leurs positions d'origine Fin Si Si nombre de directions possibles>2 Alors Direction←nombre aléatoire entre 1 et 4 Fin Si Si mur touché==vrai Alors Direction←nombre aléatoire entre 1 et 4 Sinon Faire avancer le lutin vers Direction Fin Si Fin Boucle Infinie

Explication du pseudo code

Nous affectons un nombre aléatoire entre1 et 4 à la variable Direction. (Par convention, nous fixons 1 : droite, 2 : haut, 3 : gauche et 4 : bas.)

Le reste du code sera effectué pendant toute la partie.

Si un ennemi touche le joueur, nous décrémentons la variable Vie de 1 et nous replaçons tous les lutins à leurs positions de départ.

Si le lutin est à une intersection, nous lui affectons une directions aléatoire.

Si le lutin touche un mur, nous lui affectons une directions aléatoire, sinon, il continue d’avancer.

Programmation dans Scratch

Définissons les variables dont nous aurons besoin.

Vie : nombre de vie du joueur. Il faut cocher la case devant le nom de la variable pour qu’elle apparaisse à l’écran.

Points : nombre de point du joueur. Il faut cocher la case devant le nom de la variable pour qu’elle apparaisse à l’écran.

DirJoueur : direction vers laquelle se dirige le joueur.

Avance : vitesse du joueur. Cette variable est exprimée en pixel, elle représente le nombre de pixels qui est incrémenté à chaque fois que le lutin avance.

ProcDir : représente la prochaine direction que le joueur souhaite emprunter.

Code Scratch pour le lutin joueur

Nous commençons par affecter les bonnes valeurs aux variables, mettre le costume joueurdroite et positionner le joueur au centre du labyrinthe.

gobtou_joueur_scratch1

Nous créons une boucle dans laquelle nous insérerons le code qui gère le déplacement du joueur. Les conditions pour sortir de la boucles sont :

le nombre de vie est égal à 0;

le nombre de points est égal à 106. A chaque fois que le joueur mange un bonus, il marque 1 point. Le labyrinthe proposé contient 106 bonus. Il faudra penser à ajuster ce nombre si nous créons d’autres labyrinthes.

gobtou_joueur_scratch2

 

Nous allons maintenant tester les entrées clavier pour savoir si une des touches direction a été pressée. Nous avons convenu que lorsque le joueur avance dans une direction, il continue d’avancer, même s’il lâche la touche de direction correspondante. Lorsque le joueur presse une touche, c’est qu’il veut changer de direction, nous affectons donc la variable ProcDir. Nous lui donnons la valeur correspondant à la touche pressée et si aucune touche n’est pressée elle est égale à 0. Nous verrons plus loin comment nous traitons cette variable pour gérer le déplacement du joueur.

gobtou_joueur_scratch3

Maintenant, nous allons déplacer le lutin “joueur” dans le labyrinthe. Comme dans le projet labyrinthe, nous déplaçons notre lutin de Avance pixels, nous testons s’il touche un mur et si c’est le cas, nous le faisons reculer de la même distance. Nous procédons ainsi pour la droite et la gauche.

Lien

Lien vers le projet Labyrinthe : cliquer

gobtou_joueur_scratch4

Pour les déplacements verticaux, nous allons ajouter une condition. En effet, au milieu du labyrinthe, nous avons un tunnel qui nous permet de passer directement du haut vers le bas ou inversement. Lorsque le personnage se trouve contre les murs supérieurs du labyrinthe son ordonnée est égale à y=135, il ne peut pas aller plus haut. Si son ordonnée est supérieure à 135, c’est qu’il se trouve dans le tunnel donc nous le faisons passer directement en bas en affectant la valeur -135 à y.

gobtou_joueur_scratch5

Nous procédons de la même manière pour le bas du tunnel.

gobtou_joueur_scratch6

Lorsque le déplacement est fait, nous testons si le lutin touche un bonus. Si c’est le cas, nous incrémentons la variable Points de 1. Nous devons aussi effacer ce bonus, afin qu’il ne soit plus présent à l’écran. Nous allons utiliser le stylo en lui donnant la couleur blanche pour peindre l’arrière-plan et ainsi le faire disparaître. Au moment du contact, tout le bonus ne sera pas recouvert par le lutin “joueur“, il faut prendre une taille de crayon plus grande que le lutin, nous la fixons à 30. Seul le bonus sera effacé, car les murs ne font pas partie de l’arrière plan.

gobtou_joueur_scratch7

Il ne faut pas oublier d’insérer le code que nous venons de développer dans la boucle que nous avons créée au début.

Maintenant, nous allons traiter les changements de direction. Comme nous l’avons vu précédemment, lorsqu’une touche est pressée, c’est que le joueur veut changer de direction, nous affectons donc la variable ProcDir avec la valeur correspondant à la touche. Pour savoir si nous pouvons affecter cette valeur à la variable DirJoueur, nous regardons si le déplacement dans la direction demandée est possible. Le test effectué sera le même que pour les déplacements, nous avançons, nous regardons si le lutin touche le mur et nous le faisons reculer si le mur est touché. Si le mur n’est pas touché, la direction demandée est possible , nous changeons donc la valeur de la variable DirJoueur. Cette dernière gardera la valeur donnée jusqu’à ce que le lutin touche un mur ou qu’une nouvelle direction demandée soit possible. Le joueur continuera donc d’avancer, même si la touche direction est relâchée. Ensuite, nous basculons sur le costume qui représente le lutin allant vers la droite.

Nous obtenons donc le code suivant pour le test sur la droite :

gobtou_joueur_scratch8

Pour les autres directions, nous avons :

gobtou_joueur_scratch9

Ces tests s’effectueront dès le début du jeu et pendant toute la durée de la partie, nous insérons donc le code que nous venons de développer dans une boucle infinie.

gobtou_joueur_scratch11

Lorsque le lutin “joueur” sera touché par un lutin “ennemi“, ce dernier enverra un message “touché”. Quand nous recevons ce message, nous annulons le déplacement du joueur, nous enlevons une vie et replaçons le lutin au centre du labyrinthe.

gobtou_joueur_scratch10

Lorsque la partie est terminée, nous écrivons “Partie terminée”” pendant deux secondes et nous arrêtons tous les scripts.

gobtou_joueur_scratch12

 

Code Scratch pour le lutin “ennemi”

Nous allons définir trois nouvelles variables qui ne seront utilisées que par ce lutin. Lorsque nous dupliquerons les lutins ennemis, ces variables deviendront des variables locales spécifiques à chaque lutin dupliqué.

DirEnnemi : direction de l’ennemi.

AvanceEnnemi : vitesse de l’ennemi.

PossibiliteEnnemi : donne le nombre de directions possibles dans une intersection.

Nous plaçons le lutin dans le coin inférieur droit, fixons sa vitesse de déplacement à 2 et sa direction est tirée aléatoirement. Nous n’effectuons pas de test pour savoir si la direction choisie est possible. Si le lutin ne peut pas aller dans cette direction, une nouvelle valeur sera tirée au tour suivant, jusqu’à avoir une bonne valeur. Les calculs sont effectués si rapidement, que nous ne verrons même pas le lutin hésiter s’il faut tirer plusieurs valeurs avant d’avoir une direction possible. Nous ferons de même dans la suite du programme, ceci nous permet d’alléger l’écriture.

gobtou_ennemi_scratch1

Le reste du code devra être inséré dans une boucle infinie.

gobtou_ennemi_scratch2

Nous allons déplacer le lutin. Nous ne pouvons pas utiliser les valeurs haut, bas ,droite et gauche, car les directions sont tirées au hasard, il sera plus simple, pour la suite, d’utiliser la convention suivante :

1 : droite;

2 : haut;

3 : gauche;

4 : bas.

Le mouvement est géré comme pour le joueur, en tenant compte du tunnel, sauf que si le lutin touche un mur, on tire une nouvelle direction au hasard. Nous avons donc, pour les quatre directions :

gobtou_ennemi_scratch3

Une fois le lutin déplacé, nous testons s’il y a collision avec le joueur.

gobtou_ennemi_scratch4

Maintenant, nous allons tester si l’ennemi se trouve à une intersection. Si c’est le cas, nous tirerons une nouvelle direction au hasard. D’abord, nous réinitialisons la variable PossibiliteEnnemi avec la valeur 0. Comme pour le joueur, nous avançons, testons si le lutin touche le mur et nous le faisons reculer. Si le mur n’est pas touché, nous incrémentons la variable PossibiliteEnnemi de 1.

Note

Le lutin ennemi se déplace de 2 pixels. Il peut arriver, s’il est mal centré dans le couloir, que le lutin avance de 2 pixels vers un mur sans le toucher (si le mur se trouve à 3 pixels de distance, par exemple). Pour tester les intersections, nous allons donc faire avancer le lutin de deux fois la valeur de la variable AvanceEnnemi, ainsi nous serons sûr des tests de collision avec les murs.

 

Pour tester l’existence d’un couloir sur la droite, nous avons donc le code suivant :

gobtou_ennemi_scratch5

Nous répétons le même test pour les trois autres directions.

gobtou_ennemi_scratch6

Si le nombre de possibilités est plus grand que 2, nous nous trouvons à une intersection, nous tirons donc une nouvelle direction aléatoirement.

gobtou_ennemi_scratch7

Quand le joueur a été touché par l’un des lutins “ennemi“, le message “touché” est reçu. nous arrêtons le déplacement, nous introduisons une temporisation d’un demi seconde, plaçons l’ennemi à sa position de départ et tirons une valeur aléatoire pour le déplacement.

gobtou_ennemi_scratch8

Quand le message “partie terminée” est reçu, on stoppe tous les scripts du lutin.

gobtou_ennemi_scratch9

La programmation du lutin ennemi est maintenant terminée. Vous pouvez le dupliquer trois fois afin d’avoir quatre ennemis sur le tableau et de rendre la tâche du joueur plus difficile. Il faut bien penser à mettre les bonnes coordonnées pour les nouveaux lutin :

coin inférieur gauche : x=-186 y=-134

coin supérieur gauche: x= -186 y=134

coin supérieur droit : x=186 y=134

Les coordonnées doivent être modifiées dans la boucle principale, mais aussi dans le bloc d’instructions quand je reçois “mangé”.

Code Scratch pour le lutin “murs”

Il suffit juste de placer le lutin à la bonne position pour qu’il soit centré avec l’arrière-plan.

gobtou_murs_scratch

Code Scratch pour l’arrière-plan

Nous introduisons la commande effacer tout qui a pour effet d’effacer tout ce qui a été écrit avec le stylo pour faire apparaître tous les bonus en début de partie.

gobtou_arriere_plan_scratch

Pour aller plus loin

Nous pouvons ajouter un bonus spécial qui permettrait de manger ou de tirer sur les ennemis pendant un certain temps.

Nous pouvons continuer lorsque tous les bonus ont été mangé en recommençant le tableau ou en introduisant de nouveaux niveaux.

Nous pouvons implémenter une intelligence artificielle pour les lutins ennemi. Au lieu de se déplacer au hasard, leur mouvement aurait un but (se rapprocher du joueur, par exemple).

 

 

Date de dernière mise à jour : 2022-04-06

  • Aucune note. Soyez le premier à attribuer une note !

Ajouter un commentaire

Anti-spam
 
×