Passer au contenu principal
Formation développeur web
  • Accueil
  • Plus
Vous êtes connecté anonymement
Connexion
Accueil
Passer Hébergement
Hébergement


Vous n'avez pas encore votre propre espace web pour héberger vos projets ? Noms de domaines, Wordpress, VPS, espace de stockage : hébergez vos projets web dès maintenant, à partir de 1€ / mois.

Passer Formation
Formation


Vous êtes intéressé par le secteur du web, de l'informatique, de la programmation ? Que ce soit pour une formation qualifiante ou ponctuelle, en présentiel ou à distance, financée par l'état, par l'alternance, le CPF, etc...  Contactez-moi afin de vous orienter correctement.

  1. Front-end
  2. POO JS
  3. Course automobile
Devoir

Course automobile

Conditions d'achèvement
Ouvert le : lundi 2 décembre 2019, 00:00
Ce TP est un peu vieux, et il avait été fait à la base pour travailler la POO pour Typescript. Je vous l'ouvre pour ceux qui ont fini les autres TP, mais je vous laisse assez libre de la réalisation. Voir l'ancien énoncé pour quelques tuyaux, tout en bas de la page.

Ce TP met l'accent sur les concepts un peu plus évolués de la POO, tel que l'héritage, ou les méthodes et attributs statiques. À la base, il n'y avait pas d'interface graphique, mais j'ai fini par en faire une (au rabais), car ça n'est pas génial de travailler seulement dans la console. Je vous laisse implémenter la POO comme vous voulez, mais voici quelques pistes et consignes.

Vous devez créer quatre classes :

  1. classe véhicule
  2. classe voiture, héritée de véhicule
  3. classe moto, héritée de véhicule
  4. classe camion, héritée de véhicule


Exemple de propriétés pour la classe véhicule :

  • player_name
  • type
  • capacite_reservoir
  • niveau_carburant
  • klaxon
  • consommation
  • vitesse_max
  • distance_parcourue
  • distance_a_parcourir
  • win
  • img
  • pourcentage_avancement
  • remplissage_en_cours
N'oubliez pas de les passer en privé par défaut, et donc de faire un getter et un setter pour chaque propriété, comme vu en cours.

Exemple de méthodes pour la classe véhicule :

  • affiche_type
  • affiche_niveau_de_carburant
  • mettre_du_carburant
  • faire_le_plein
  • coup_de_klaxon
  • rouler
  • course_finie (statique)

Exemple de méthodes pour les classes enfants :

  • rouler (surcharge de la méthode principale dans toutes les classes enfants)
  • derapage_controlle (voiture)
  • wheeling (moto)
  • grosse_fumee_blanche (camion)

Je vous conseille de créer un script en plus de vos classes pour "gérer la course", et l'interface graphique. Vous aurez donc 5 fichiers JS différents :

  • class-vehicule.js
  • class-voiture.js
  • class-moto.js
  • class-camion.js
  • app.js
Tous les 5 seront appelé dans votre index.html, qui lui contiendra l'interface de base pour commencer la course.


Vidéo :

 

http://webboy.fr/pluginfile.php/1113/mod_assign/intro/course-voiture.mp4
 



Ancien énoncé 

(certaines infos peuvent être utiles donc je n'ai pas tout supprimé).

Ce TP vous permettra d'approfondir le concept d'objet avec le langage Typescript. L'idée et de simuler une sorte de mini course de véhicules. On se concentre ici sur l'aspect backend, et aucune interface n'est à coder. Tout se fait dans la console. Pour ceux qui auront fini à l'avance, vous avez quelques suggestions pour continuer. Je suis resté assez vague dans les tâches à réaliser, faites preuve d'imagination et de logique pour atteindre les différents objectifs à réaliser. N'hésitez pas à me poser des questions si quelque chose ne vous semble pas clair...


  • Mettez en place votre environnement de dev dans un nouveau dossier.
  • Créez la classe mère Vehicule, et les classes filles moto, voiture, camion (si possible dans des fichiers séparés).
  • Faites une première étape de test avec des console log distincts dans chaque constructeur


  • Rajouter un attribut type a la classe véhicule, avec ses getters et setters. Il aura trois valeurs possibles : moto, voiture, camion
  • Définnissez le type de véhicule dans le constructeur de chaque classe fille
  • Créez une procédure affiche_type() dans la classe véhicule (qui ne fait qu'afficher le type du véhicule), puis exécuter la sur un objet


  • Créez un attribut capacite_du_reservoir et un attribut niveau_de_carburant
  • Créez les getters / setters respectifs
  • Définissez une capacité maximum du réservoir pour chaque type (ex : moto 30, voiture 50, camion 200)


  • Creéz une procédure qui permet de rajouter du carburant (mettre_du_carburant)
  • N'oubliez pas que le niveau de carburant doit etre compris entre 0 et la capacité max.
  • Attention à placer vos controle d'intégrité aux bons endroits


Mettre un coup de klaxon quand le plein est terminé. Chaque véhicule à son propre klaxon.

  • Dans votre script "main" (principal), créez un tableau de participants (des personnes), et faites en sorte de leur attribuer chacun un véhicule différent.
  • Vous pouvez rajouter un attribut player_name, et lui attribuer des valeurs.


  • Créez les attributs consommation, vitesse_max et distance_parcourue.
  • Faire une métode rouler qui va influer sur les propriétés consommation et distance_parcourue
  • cette méthode "rouler" va décrémenter la propriété niveau_de_carburant et incrémenter la propriété distance_parcourue.
  • Vous pouvez vous baser sur un simple timer pour gérer "les cycles", et une fonction récursive.
  • Si le réservoir est vide, le joueur doit faire le plein, et doit attendre plus longtemps que d'habitude pour pouvoir rouler à nouveau.


  • Créer un attribut distance_a_parcourir, un attribut static rank et un attribut win.
  • Faites en sorte que quand un joueur dépasse la distance a parcourir, le programme stop sa course, affiche son rang d'arivée et mette un coup de klaxon


  • Pour finir, écrivez une méthode privée dans chaque classe fille qui illustre la glorieuse victoire (ex : wheeling, dérapage controllé, fumée blanche).
  • Exécuter les quand les joueurs finissent la courses.


  • Créer un attribut statique "nombre de joueurs" dans la classe véhicule.
  • Créer un attribut statique "joueurs ayant fini" dans la classe véhicule.
  • Créer une méthode statique dans la classe véhicule qui va déterminer la fin de la course est afficher un message de félicitation aux joueurs.


A faire en plus si vous avez fini :

- ajouter la notion "d'interfaces" vu dans le premier cours (par ex : définition d'un joueur)


Interface graphique :
- Créer une page index.html et lancer votre script depuis un navigateur web, avec l'aide de requireJS (pour les modules)
- Installer Jquery en tant que module, et faites en sorte que Jquery soit accessible depuis votre script JS (voir les définitions avec typing)(note : vous devez être capable d'importer jquery EN TANT QUE MODULE dans votre script, et que TS vous émette des erreurs si vous utilisez des méthodes Jquery qui n'existe pas)

- Faire une interface graphique pour saisir le nom des joueurs et leur type de véhicule respectif (champ texte + liste déroulante)
- Faire un bouton "Go !" qui vérifiera que tous les participants sont prets, et qui lancera la course
- Répercuter les données "temps réel" de tous vos participants dans l'interface graphique


Interaction :
- imaginer des interactions entre les véhicules


Contacter l'assistance du site
Vous êtes connecté anonymement (Connexion)
Résumé de conservation de données
Obtenir l'app mobile
Fourni par Moodle