🎈 Mobiles - TP n°1

Ce projet est une introduction à la manipulation de l'API Canvas de HTML5 et à la Programmation Orientée Objet (POO) en JavaScript. L'objectif est de créer des objets graphiques animés ("mobiles") évoluant sur un terrain.

🚀 Fonctionnalités

• Animation Performante : Utilisation de requestAnimationFrame pour une animation fluide à ~60 FPS.
• Classes Mobiles :
  • Gestion de positions, vitesses ($v_x$, $v_y$), tailles et formes (rectangles ou disques).
  • Couleurs aléatoires générées dynamiquement.
• Modes de Déplacement :
  • Traversée : Les objets réapparaissent du côté opposé lorsqu'ils sortent du cadre.
  • Rebond : Les objets rebondissent sur les parois du canvas ou de leur boîte.
• Conteneurs (MobileBox) : Possibilité de créer des zones indépendantes ("boîtes") contenant chacune leur propre collection de mobiles.
• Interface Interactive : Boutons pour démarrer/arrêter l'animation et régénérer les mobiles dynamiquement via un champ de saisie.
• Design Responsive : Le canvas s'adapte à la taille de l'écran.

🛠️ Structure Technique

Les Classes

• Classe Mobile (mobile.js) :
  • Définit les propriétés physiques d'un objet (coordonnées, vitesse, apparence).
  • Méthodes draw(), move() (traversée) et moveInBox() (rebond).
• Classe MobileBox (mobileBox.js) :
  • Représente un rectangle englobant une collection de mobiles.
  • Gère sa propre boucle d'animation et le remplissage aléatoire de sa zone.

Outils

• utils.js : Fonctions d'aide pour générer des entiers et des couleurs aléatoires.
• Vite : Outil de build et serveur de développement ultra-rapide.

👩‍💻 Installation

1. Installez les dépendances :

   pnpm install

2. Lancez le serveur de développement :

   pnpm run dev

---

Projet réalisé dans le cadre du cours GAME4 - BUT MMI - Université de Strasbourg.