22 juin 2015

Jeux web (3/5) : cache-cache

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 :

Le jeu de cache-cache

Le jeu de cache-cache - démo - est un jeu de type exploration. Il faut explorer un paysage avec un "projecteur" pour l'éclairer et trouver les oiseaux. L'on peut ainsi révéler leur nom et entendre leur chant. Il y a à explorer quatre paysages représentatifs du parc des Alpilles.

Structure de l'interaction

Pour conserver un ratio responsive qui soit identique entre un arrière plan global et un avant-plan local et déplaçable, j'ai opté pour une solution avec iframe et CSS. Les CSS maintiennent le ratio quelque soit l'affichage. Un peu plus tard, j'ai développé une solution axée sur SVG, qui sert de fallback à la solution CSS. La solution SVG est également reprise dans le jeu des milieux.

Développement de l'interaction

Une partie des scripts est consacrée au chargements et pré-chargements, de façon à pré-initialiser correctement chacun des paysages suivants. Une autre à ce que les scripts parents (dépôt Github) et les scripts du cadre (dépôt Github) s'exécutent dans une chronologie cohérente, et à ce que leurs objets soient mutualisés.
Les scripts de la version SVG alternative (dépôt Github) reprennent la plupart de ces méthodes.

Le déplacement de l'avant-plan dans la version courante se fait par position() de jQuery UI. La fluidité du plugin se conjugue bien à l'efficacité de "background-attachment: fixed;" pour maintenir stable l'image du "projecteur".

Aucun commentaire: