Quatre jeux web éducatifs que j'ai développés chez Ludwik, pour le parc naturel des Alpilles et sur le thème des oiseaux.
Ces jeux sont de type :
- classement ;
- exploration ;
- placement (puzzle) ;
- exploration-placement.
Le jeu des tailles
Le jeu des tailles - démo - est un jeu de type classement. Il consiste à déplacer quatre
oiseaux pour les trier selon leur taille. Le résultat correct déclenche une animation de mise à l'échelle relative des oiseaux.
Ce jeu est présenté en quatre séries.
Structure de l'interaction
Côté HTML, les images des oiseaux sont encapsulées dans la balise <figure. Les quatre <figure sont ordonnées dans une liste, et sont draggables. Les balises <li définissent donc les zones droppables.
Développement de l'interaction
Côté JavaScript - scripts déposés sur Github -, j'ai développé les fonctions de drag and drop avec jQuery UI.
Une méthode définie via l'objet prototype en initialise les gestionnaires d'événements, affectant ainsi chaque instance des oiseaux et zones. Tout événement drag ou drop déclenchant ensuite des instructions génériques, exécute une méthode rattachée directement aux fonctions constructrices.
A chaque image correspond ainsi l'instance d'une fonction constructrice (pseudo-classe) "Bird", dont les propriétés stockent :
- les données de la structure HTML ;
- les positions actuelle, gagnante ;
- les données ornithologiques ;
et les méthodes assurent :
- le paramétrage jQuery UI du drag ;
- les animations - style et son - de drag and drop, et de réussite.
A chaque item de liste correspond l'instance d'une fonction constructice "Size", dont les propriétés stockent :
- les données HTML ;
- les oiseaux actuel, gagnant ;
et les méthodes assurent :
- le paramétrage jQuery UI du drop ;
- les effets CSS du survol, du drop ;
- un accès direct au résultat gagnant.
L'initialisation du jeu se fait principalement par l'instanciation des fonctions constructrices (pseudo-classes).
Le chargement d'une nouvelle série s'effectue sans rechargement de page, les instances étant faciles à renouveler à partir d'un renouvellement partiel du DOM.
Aucun commentaire:
Enregistrer un commentaire