22 juin 2015

Jeux web (4/5) : puzzle

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 puzzle

Le puzzle - démo - est un jeu de type placement. Venu deuxième dans l'ordre du développement des jeux, il est généré à partir de ses propres pièces, qui sont des éléments SVG dispersés sur la page au chargement.
Quatre séries là aussi, qui sont constituées de couples d'oiseaux de la même espèce.
Il nous a paru intéressant de laisser la possibilité de poser une pièce femelle ou mâle sur la forme de l'autre sexe du couple.

Structure de l'interaction

Le choix du SVG s'est rapidement imposé dans mon développement :

  • responsive ;
  • structure compatible avec la sémantique ;
  • éléments accessibles via le DOM ;
  • avec des filtres puissants ;
  • et possibilité adapter la forme interactive des pièces.

En effet, en superposant dans un SVG une image à fond transparent et un <path qui en suive le contour visible, il est possible de gérer les événements en fonction de ce contour précis du vecteur. Seul le vecteur bénéficie de la propriété "pointer-events", tout en restant invisible.
Ça résout la question de la forme rectangulaire de tout élément HTML, et permet de définir une interaction en fonction de la forme précise de la pièce.

A partir des pièces SVG présentes au chargement sur la page, la "scène" sensible du puzzle est ainsi construite par leur synthèse dans un SVG central. Cette "scène" SVG est mappée par les vecteurs sensibles de la forme des pièces et superposés à leur contenu. Ce contenu devient visible au drop gagnant.

Le jeu est responsive en toutes circonstances et à chacune de ses étapes.

Développement de l'interaction

Côté JavaScript - scripts déposés sur Github -, chaque pièce est l'instance d'une fonction constructrice "Piece", dont les propriétés stockent :

  • les données de la structure HTML ;
  • les mesures et positions actuelle, gagnante ;
  • l'état ;

et les méthodes assurent :

  • le clone de l'image et du vecteur sur la scène du puzzle ;
  • le centrage de l'image et du vecteur dans la pièce ;
  • le paramétrage jQuery UI du drop (souris et toucher), sa vérification et son succès ;
  • la possibilité de rejouer une pièce bien posée, de mêler une pièce entre femelle et mâle.
  • la gestion du responsive etc.

Le reste des scripts concerne l'initialisation, notamment la gestion des événements et du drag and drop.
Le principe de puzzle auto-généré est repris dans la deuxième phase du jeu des milieux.

Aucun commentaire: