Pong → Space Invaders

Durée estimée: 30 minutes

La comparaison de Pong et space invaders met en évidence de fortes similitudes :
Pong Space Invaders
2 objets 3 objets
space0/assets/img/raquette.png la raquette, space0/assets/img/vaisseau.png space0/assets/img/vaisseauExpl.png le défenseur ou le vaisseau spatial,
qui peut être détruit
space0/assets/img/balleT.png la balle space0/assets/img/attaquant.png space0/assets/img/explosion.png l'attaquant qui descend depuis l'espace,
et qui peut être détruit
space0/assets/img/missile.png le missile tiré par le défenseur.

La raquette se déplace comme le défenseur, l'attaquant comme la balle, mais avec des réactions différentes aux évènements (collision, bord touché). Par ailleurs, on a un 3° objet, le missile que l'on va tirer en touchant l'écran, à condition que la partie ait déjà démarré.

On va modifier Pong pour réaliser Space Invaders, comme on a modifié le jeu de balles pour Pong.

Point de départ

Pour réaliser Space Invaders, vous pouvez partir de la version de Pong que vous avez réalisée. Vous pouvez également partir du projet à l'adresse suivante, avec des sons et images préchargés et un design modifié : http://onvaessayer.org/cycle4?repo=space0

Design : Pong → SpaceInvaders:

Le principal changement de design est l'ajout d'un "lutinMissile" et le changement du nom des lutins de "lutinBalle" à "lutinAttaquant" et de "lutinRaquette" à "lutinDefenseur" avec des images et des tailles différentes. Si vous ne souhaitez pas faire ces modifications vous-même (chargement des images, des sons, ...) vous pouvez télécharger directement la version mise à jour et passer directement à la décomposition.

On utilisera de nouveaux sons et images que vous trouverez à cette adresse http://onvaessayer.org/cycle4/pong/resources , à importer dans les media.

Et pour les composants, on va principalement ajouter un lutin pour le missile et des sons pour le tir et les explosiosn. Les modifications sont en bleu ci-dessous.
type catégorie Nom rôle propriété valeur
Screen1 racine alignt horiz.
alignt vertical
image fond
orient. écran
status bar
titre visible
centré
haut
space.jpg
portrait
Non
Non
lutin image dessin lutinBalle
lutinAttaquant
hauteur
largeur
image
Rotation
orientation
intervalle
60
60
attaquant.png
non coché
0
20
lutin image dessin lutinRaquette
lutinDefenseur
hauteur
largeur
image
100
60
vaisseau.png
lutin image dessin lutinMissile hauteur
largeur
image
visible
rotation
activé
orientation
intervalle
120
60
missile.png
non coché
non coché
non coché
90
20
Son media Son1
SonTir
Source tir.mp3
Son media SonExplosionDefenseur Source explosion.mp3
Son media SonExplosionAttaquant Source explosion.mp3

Représentation des données :

Par rapport à Pong, le missile est nouveau : il est visible ou non, actif ou non. Sa vitesse et son orientation (90°) ne changent pas pendant le jeu, donc il n'est pas utile de définir de nouvelles variables pour le missile.

Par ailleurs, ce qui est nouveau, c'est que l'attaquant et le défenseur peuvent exploser :

  • Pour le défenseur, la partie s'arrête avec son explosion, il n'est donc pas utile d'enregistrer son état dans une variable,
  • Par contre l'attaquant reste visible, actif et il continue à descendre après son explosion. Selon son état il n'aura pas le même effet sur le défenseur s'il entre en collision avec lui. Donc on doit enregistrer l'état de l'attaquant dans une nouvelle variable, pour savoir quoi faire en cas de collision avec le défenseur.
Les variables sont donc le score, la vitesseInitialeAttaquant, l'accélération et une nouvelle variable attaquantValide qui est vrai s'il n'a pas explosé et faux sinon.

Décomposition :

Le jeu présenté dans la vidéo (à droite) est l'objectif à réaliser.

Regardez la bien et complétez la colonne de droite du tableau ci-dessous, pour décrire le comportement du vaisseau défenseur, de l'attaquant et du missile en réaction à chacun des évènements. Pour vous aider, on a rappelé dans la colonne de gauche, les réponses données pour le jeu Pong.
Précisons 2 points :

  • Comme dans Pong, on commence une partie en touchant l'écran, mais si la partie a déjà démarré, ce même évènement va déclencher le tir d'un missile.
  • Pour traiter les collisions dans un seul script, on s'intéressera aux collisions de l'attaquant avec le défenseur ou le missile,
La collision entre 2 objets déclenche 2 évènements : un pour chaque objet. Au niveau du programme, on a donc le choix.
Ici on choisit de traiter les collisions détectées par l'attaquant, ce qui limite à un seul script.

Quand vous aurez fini l'analyse de chaque script, cliquez sur le bouton pour comparer avec la notre. Puis continuez avec les autres scripts ou commencez à coder en reprenant le code de Pong affiché à gauche.

Pong
lutinBalle space0/assets/img/balleT.png  lutinRaquette space0/assets/img/raquette.png
Space Invaders
lutinAttaquant space0/assets/img/attaquant.png  lutinDefenseur space0/assets/img/vaisseau.png  lutinMissile space0/assets/img/missile.png
variables :
space0/assets/img/variablesPong.png
variables :
space0/assets/img/variablesSpace.png
quand l'application démarre:
quand Screen1.initialize appeler démarrer la partie

procedure démarrer la partie
  • mettre le score à 0
  • activer le déplacement lutinRaquette (chrono)
  • placer lutinRaquette en bas et au milieu

  • remettre le lutinBalle à sa vitesse initiale
  • relancer le lutinBalle
    • depuis le haut du cadre, endroit aléatoire
    • et direction aléatoire entre -45° et -135°

  • (pour space invaders : penser au missile )
quand l'application démarre:
quand Screen1.initialize appeler démarrer la partie

space0/assets/img/ScreenInitializePong.png
quand le joueur touche l'écran/le cadre :
quand Cadre1.touché
    appeler démarrer la partie
quand le joueur touche l'écran/le cadre :
quand Cadre1.touché :

space0/assets/img/CadreTouchéPong.png

A chaque intervalle d'horloge
quand HorlogeAccelero.chronomètre
  • déplacer lutinRaquette à gauche ou à droite selon l'inclinaison

A chaque intervalle d'horloge
quand HorlogeAccelero.chronomètre

space0/assets/img/chronometrePong.png
quand lutinRaquette en collision avec le lutinBalle :
quand lutinRaquette.en collision avec
  • ajouter 1 au score,
  • faire rebondir le lutinBalle dans une orientation aléatoire entre 45° et 135°
  • augmenter sa vitesse
(Dans Pong la raquette ne peut être en collision qu'avec la balle, donc il n'y a pas besoin de vérifier l'objet en collision)
quand lutinAttaquant entre en collision :
quand lutinAttaquant.en collision avec

space0/assets/img/collisionPong.png
quand lutinBalle atteint un bord :
quand lutinBalle.bord atteint
  • si c'est le bord du bas :
    • arrêter partie
  • sinon : rebondir
quand lutinAttaquant atteint un bord :
quand lutinAttaquant.bord atteint

space0/assets/img/atteintBordPong.png
quand le missile atteint un bord :
quand lutinMissile.bord atteint

version finale des blocs

space0/assets/img/blocSpace.png

Envoyer un commentaire