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. Exo 1 (déplacement de carrés)
Devoir

Exo 1 (déplacement de carrés)

Conditions d'achèvement
Ouvert le : mercredi 22 septembre 2021, 00:00
À remettre : mercredi 29 septembre 2021, 00:00

Cet exercice permet de travailler à la fois sur la création et le codage d'une classe (et diverses notions de base en POO), mais aussi de son utilisation, et de son implémentation dans une interface graphique.

Une vidéo de démonstration est disponible en bas de l'exercice, mais vous trouverez quelques détails pour vous aiguiller lors de la réalisation de celui-ci. Vous n'avez pas à le faire dans l'ordre, c'est plus un fils d'Ariane.


Contenu de la classe

Créer la classe Square, toute la logique sera encapsulée dans celle ci


Les propriétés privées

Un carré est déterminé par sa couleur, sa taille, sa vitesse de déplacement (step) et un élément du DOM. Vous devez créer donc 4 propriétés privées


Les propriétés statiques

Certaines informations ne sont pas liées au carré, mais aux "règles du jeu". Vous y trouverez :

  • les couleurs autorisées (rouge vert bleu)
  • la taille minimum et maximum d'un carré (entre 5 et 30 pixels)
  • le step min et maximum (entre 1 et 50 px)
  • la "map" : zone d'évolution du carré

Toutes ces propriétés sont privées et statiques


Le constructeur

Prends trois paramètres : couleur, taille, step. Le constructeur devra :

  • initialiser l'objet avec les valeurs saisies par l'utilisateur
  • vérifier que tout soit bon
  • dessiner le carré dans la map


Getters / setters

Les 4 propriétés privées doivent toutes avoir des getters et des setters.

  • Le setter color doit vérifier que la couleur appartient bien aux couleurs autorisées
  • Le setter size doit vérifier que la taille est bien dans l'intervalle autorisé
  • Le setter step doit vérifier que le pas est bien compris dans l'intervalle autorisé

Chaque setter devra lever une exceptions en cas de problème, puis l'afficher dans la console.


La méthode draw

Privée, elle devra créer le carré dans la map lors de l'initialisation (si tout est ok au niveau des vérifications)


Les méthodes de mouvement

top, left, bottom, right : ces méthodes sont publiques. Elles devront faire bouger le carré dans la map, mais aussi vérifier que celui ci ne dépasse pas les limites de la map.



Utilisation de la classe

Un script JS procédural permettra d'initialiser le carré, puis d'écouter les différents évènements pour le faire bouger. Vous devrez notamment utiliser les méthodes publiques top, left, bottom, top pour cela, depuis l'extérieur de la classe.


Vidéo

 

http://webboy.fr/pluginfile.php/8558/mod_assign/intro/poo-carre.mp4
 

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