:: Enseignements :: ESIPE :: E3INFO :: 2018-2019 :: Programmation Web avec JavaScript ::

Programmation d'un jeu

Le but de ce TP est de programmer un jeu. Contrairement au TP précédent, vous avez 2 semaines pour rendre le TP et il vous est demandé de faire un compte rendu de TP plus etoffé que d'habitude en indiquant les choix de design et d'implantation que vous avez fait.

Exercice 1 - Lost in Space

Dans un futur pas si éloigné que cela, la terre et l'ensemble des planètes du système solaire ont été colonisés par une race extra-terrestre et vous êtes le seul humain à avoir réussi à vous échapper à bord d'un vaisseau extra-terrestre à forme triangulaire.
Pour vous arrêtez, un comptable parmis les extra-terestres décide que 300 vaisseaux devraient être suffisant pour vous empécher d'activer l'hyper-propulsion permettant de vous échapper.
Avant de partir, vous avez bricolé un peu votre vaisseau en lui ajoutant à l'avant un canon qui tire des boules d'énergie.

Contrairement aux TPs précédent, le but de ce TP est que vous arriviez à décomposer un problème en fonctions et objets simples. Il n'y a donc pas de questions à suivre dans l'ordre.
De plus, comme le sujet offre pas mal de liberté, certains points spécifiques ne sont pas discutés dans les règles ci-dessous et sont donc laissés à votre libre interprétation. Il serait donc étonnant d'avoir deux TPs implantant exactement les mêmes règles.
Dans le cas de code commun (même partiel) entre deux personnes de ce TP, le TP sera évalué à 0 (nous utilisons les logiciels JPlague et MOSS pour la détection de code commun).
Voici les deux fichiers qui vont vous servir de base de travail lost_in_space.html et lost_in_space.js
Voici les règles :

Au début du jeu, le vaisseau, que vous pilotez avec les touches haut, bas, gauche et droite, se trouve en bas de l'écran au centre horizontalement, avec son canon pointé vers le haut de l'écran. Les vaisseaux extra-terrestres se trouvent à gauche et à droite de l'écran (autant de chaque coté) et vont dans la direction opposé (ceux à droite vont à gauche et vice-versa) et de plus ils décendent un petit peu vers le bas (pour aller tranquillement rentrer en collision avec le vaisseau que vous pilotez).
Lorsqu'un vaisseau extra-terrestre touche le haut ou le bas de l'écran, il rebondit et gagne 10% en vitesse à chaque rebond.
Votre nombre de balles est infini. Lorsque vous tirez (avec la barre d'espace), la balle part avec la même vitesse que votre vaisseau vers l'avant. Attention si vous accélerez vers une balle, vous pouvez vous tuer vous-même. A chaque tour de la boucle principale du jeu, une balle garde 99% de sa vitesse. De plus, les balles ont une durée de vie correspondant à la moitié de la hauteur du canvas.
Les aliens, affichés en vert foncé, ne peuvent pas mourir lorsqu'ils se rentrent dedans, par contre, ils meurent si ils sont atteints par une balle.
Pour détecter les collisions, on considère un carré de 5 pixels par 5 pixels, centré sur le vaisseau et entourant celui-ci. Un vaisseau ou une balle entre en collision avec le vaisseau si elle entre dans ce carré.
Quelques conseils d'implantation :
Le code que vous devez produire doit utiliser les syntaxes introduites avec JavaScript 2015, la notation class, les mot clés let et const, etc.
Vous devez avoir des objets représentant un vaisseau, une balle, etc.
Lorsqu'un vaisseau meurt, il est plus rapide de dire qu'il est mort puis dans un second temps de nettoyer le tableau en supprimant tous les vaisseaux morts plutôt que de les supprimer un par un à chaque fois que l'on détecte qu'un vaisseau est mort.