Magazine High tech

Scratch : tutoriel Spacewar

Publié le 13 avril 2016 par Jfcauche @jeffakakaneda

Spacewar

Spacewar ! (Ou plutôt Spassoire, comme diraient mes petits sixièmes…) Le premier jeu vidéo de l’histoire de l’informatique ! Spacewar a inspiré nombre de jeux et constitue une référence ultime, tant par son principe que par l’ordinateur mythique sur lequel il a été développé, le PDP-1 dont vous pouvez découvrir l’écran via l’image d’illustration.

J’ai plusieurs fois travaillé sur Spacewar avec des groupes d’enfants d’âges différents. C’est un jeu assez simple à développer en Scratch, tout au moins dans une version remixée et simplifiée que je vous propose dans ce tutoriel, dédicacé à mon amie Elaine avec qui j’aurais le plaisir prochainement d’animer un atelier autour de ce jeu. Pour info, c’est un atelier qui peut en fonction des enfants prendre une à deux séances d’1h30. On peut le coupler avec une initiation à la Makey Makey pour créer ensuite la manette du jeu.

Le principe est simple : un vaisseau au centre de l’écran qui s’oriente en fonction de la souris, des astéroïdes qui parcourent l’écran et qu’il va falloir éviter en les désintégrant.

Commençons par le décor. Ne supprimez pas le chat et en lieu et place du fond blanc, utilisons un arrière-plan noir, que l’on peut très facilement réaliser dans l’interface de dessin à l’aide de l’outil « pot de peinture ».

fond

A l’époque, les concepteurs de Spacewar avait créé un petit programme qui reproduisait fidèlement la voûte étoilée en décor. Nous ne serons pas aussi pointilleux mais que serait l’espace sans ses étoiles ? Notre astuce va constituer à cacher le chat et à lui faire dessiner au hasard 50 points blancs au démarrage du jeu. Cela reste cependant optionnel et vous pouvez passer cette étape pour intégrer directement le vaisseau spatial.

Je n’utilise pas les limites extrêmes de l’écran de Scratch (-240 et 240 pour X, -180 et 180 pour Y), histoire de ne pas avoir d’étoiles contre le bord de l’écran, ce qui est assez disgracieux. De même, la taille du stylo est portée à 2 sinon les étoiles paraissent très petites. On peut aussi faire varier la taille pour donner une impression de profondeur mais, pour aujourd’hui, je fais simple.

etoiles

Passons maintenant au vaisseau. Dans la bibliothèque des lutins, choisissons « spaceship ».

spaceship

Attention ! Pour que notre jeu fonctionne correctement, il va falloir l’orienter à droite, c’est-à-dire tourner la fusée vers la droite, ce qui est l’orientation naturelle des lutins de Scratch. Pour cela, je convertis l’image en bitmap (en bas à droite), utilise l’outil « sélectionner » et tourne le lutin grâce à la poignée à droite.

spaceship2

Ajoutons maintenant le code relativement simple pour ce personnage qui ne fait que tourner en s’orientant vers la souris.

spaceship-code

Les ennemis, les ennemis, les ennemis ! Dans la bibliothèque des lutins, choisissons « rocks ».

Le comportement de ce lutin est automatique : il avance sans cesse et se multiplie lorsqu’il rebondit sur les bords. On utilise pour cela la fonction « clone ». Lorsqu’il rebondit, on utilise un angle aléatoire entre 160 et 200 degrés, de manière à ce qu’il fasse demi-tour mais en le faisant dévier sinon notre lutin suivrait sans cesse la même trajectoire.

rocks-code

Ajoutons un autre test dans la boucle de manière à ce que lorsque « rocks » touche « spaceship » la partie soit perdue.

rocks-code2

Comme vous pouvez le constater, nous avons un léger bug. Pour éviter que l’astéroïde ne touche notre vaisseau dès le départ du jeu, ajoutons un peu d’aléatoire. Il se peut aussi parfois que votre astéroïde rebondisse un peu trop sur les bords. Dans ce cas, vous pouvez modifier l’angle par une valeur entre 180 et 220 ou plus.

rocks-code3

Pour que le clone ne reste pas inactif, il faut dupliquer le comportement du lutin de la manière suivante. Attention à bien supprimer la fonction « créer un clone de moi-même » sinon gare à la multiplication sauvage. En quelques secondes, ce sont des dizaines de clones qui vont envahir l’écran.

clonerocks

Il reste un sérieux problème : notre vaisseau ne peut pas se défendre. C’est le moment de lui dessiner un missile. Pour cela, je dessine nouveau lutin en forme de balle que je n’oublie pas de centrer.

ball

Ce lutin va avoir un comportement relativement simple aussi. Il est placé au centre, là où se trouve notre vaisseau. Lorsque l’on appuie sur la touche « espace », il apparaît, s’oriente vers la souris, avance droit devant lui jusqu’à ce qu’il touche le bord ou un astéroïde pour enfin disparaître (mais ce ne sera pas sans conséquences pour l’astéroïde😉 ).

Commençons par lui donner quelques paramètres de départ. La taille peut varier en fonction de votre dessin.

bullet1

Ajoutons les instructions pour le tir. Vous pouvez modifier la vitesse de tir en changeant le 10 par une valeur plus importante (plus facile) ou plus lente (plus dur !).

bullet2

Revenons maintenant à nos astéroïdes dont je ne donne pas cher de la peau lorsqu’ils rencontreront nos missiles. Il va falloir ajouter une boucle dans le code de manière à ce que l’astéroïde disparaisse lorsqu’il est touché. On peut choisir deux modes de jeu : le premier, le plus classique, est de terminer le jeu lorsqu’il n’y a plus d’astéroïde ; le second est infini et ne se terminera qu’à la mort de notre vaisseau. Personnellement je choisis le second. Notre astéroïde-mère va simplement être renvoyé ailleurs au hasard comme au début du code, tandis que les astéroïdes-clones seront purement et simplement supprimés.

Modifions le code de notre astéroïde-mère pour qu’il réagisse au nouveau lutin (que j’ai renommé « bullet »).

rocks-code4

Modifions ensuite le code de l’astéroïde-clone.

rocks-clone-code

Ca va déjà mieux et notre vaisseau est prêt à défendre la galaxie. Mais il manque encore un élément. Comment sait-on en effet qu’on est « the best of the best » et que l’on a fait un super score ? En créant un score… Allons dans la partie « données » et créons une variable nommée naturellement « Score ». Restons sur l’astéroïde « rocks » et ajoutons ce petit bout de code pour que le score soit bien à zéro au début du jeu (pas de tricheries !😉 ).

Score1

Enfin, ajoutons sur le code de l’astéroïde-mère une instruction pour faire évoluer le score. Chaque fois que notre astéroïde avance, on ajoute un point au score.

Score2

Que reste-t-il à faire ? Jouer ! Retrouvez l’ensemble du code sur Scratch : https://scratch.mit.edu/projects/105041653/


Classé dans:Code, Scratch, Tutoriels Tagged: MIT, scratch, Spacewar, Tutoriel

Retour à La Une de Logo Paperblog

A propos de l’auteur


Jfcauche 880 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte