Labyrinthes
Objectif
Réalisation d’une application de démonstration de construction et résolution de labyrinthes.
Contraintes
- Travail collaboratif
- Interface utilisateur via navigateur Web
- Modèle et Contrôleur coté client (HTML + JavaScript)
Architecture
Modèle – Vue – Contrôleur
Vue (première version)
Diagramme de classe
Structure du projet
- Les modèles représentent les données.
- La vue permet d’afficher les labyrinthes en n’utilisant que les méthodes des objets.
- Les contrôleurs relient modèles et vue, les boutons de l’interface graphique avec leurs actions.
Les générateurs et résolveurs de labyrinthe sont des classes vides au début, pour que chaque algorithme ait sa propre classe. Nous utilisons un type pseudo-itérable pour pouvoir contrôler la vitesse d’exécution de l’algorithme et ainsi retarder l’ouverture d’un mur du labyrinthe pour l’interface graphique. La condition qui s’écrivait dans une boucle tant que est située dans hasNext(), et les instructions à chaque tour dans next().
Techniques
Dépôt GitHub, démonstration en ligne non synchronisée
Nous utilisons JavaScript pour les navigateurs supportant l’ES6, c’est-à-dire avec :
- Modules natifs, supportés par le navigateur sans étape intermédiaire
- fetch pour des requêtes HTTP depuis JavaScript
- Spread syntax
- Set
- Variables let et const
- Classes ES5
Le projet peut s’utiliser avec un simple serveur HTTP en développement comme en production, mais est aussi configuré pour utiliser Vite et Rollup, comme outil pour compiler tous les fichiers en un seul.
L’API canvas est utilisée pour dessiner les labyrinthes, et les évènements du DOM permettent d’actualiser les instances des classes après des changements dans l’interface graphique.
Progression
Après avoir une interface et quelques algorithmes de construction/résolution implémentés, quelques améliorations possibles :
- Mode jeu : le joueur peut essayer de résoudre le labyrinthe avec temps chronométré, classement entre joueurs ?
- Possibilité de résoudre une image de labyrinthe : cela pose des problèmes de performance et d’ergonomie, comment placer l’entrée et la sortie sur une image ?
- Possibilité d’exporter l’image du labyrinthe, voire peut-être sa construction/résolution [enregistrer une vidéo avec un canvas]
- …
