{"id":314,"date":"2021-09-08T16:35:45","date_gmt":"2021-09-08T14:35:45","guid":{"rendered":"https:\/\/me-nembrot.fr\/?p=314"},"modified":"2021-09-09T10:52:48","modified_gmt":"2021-09-09T08:52:48","slug":"gamvas","status":"publish","type":"post","link":"https:\/\/me-nembrot.fr\/index.php\/2021\/09\/08\/gamvas\/","title":{"rendered":"Gamvas"},"content":{"rendered":"\n

Durant mon stage de fin d’\u00e9tudes, j’ai beaucoup travaill\u00e9 sur HTML5 et j’en ai profit\u00e9, comme \u00e0 mon habitude, pour en revenir \u00e0 ma passion premi\u00e8re : les jeux vid\u00e9o. Cela m’a permis de fournir trois jeux diff\u00e9rents, tous \u00e9crits en HTML5, CSS3 et Javascript avec jQuery. En restant dans le contexte du stage, les deux premiers jeux tendent plus vers le serious game alors que le dernier est plus en continuit\u00e9 avec la BD Tela Cricetinae<\/a>.<\/p>\n\n\n\n

Association d’images par trac\u00e9<\/p>\n\n\n\n

Le but de ce jeu est de relier chaque l’illustration de Coste, dans la colonne de gauche, \u00e0 la photo de plante correspondante, dans la colonne de droite. L’interaction se fait \u00e0 la souris, en drag’n drop entre l’illustration et la photo, ce qui permet de tracer des lignes entre les deux.<\/p>\n\n\n\n

ESC<\/td>m\u00e9langer les images (illustrations et\/ou photos)<\/td><\/tr>
D<\/td>supprimer le dernier trait trac\u00e9<\/td><\/tr>
SPACE<\/td>v\u00e9rifier les correspondances<\/td><\/tr><\/tbody><\/table>
Actions disponibles au clavier<\/figcaption><\/figure>\n\n\n\n

La v\u00e9rification des correspondances change temporairement la couleur des traits : vert pour une bonne r\u00e9ponse, rouge pour une mauvaise r\u00e9ponse et bleu pour les traits qui ne relient pas deux images entre elles.<\/p>\n\n\n\n

Tester l’association d’images par trac\u00e9 (s’ouvre dans une nouvelle fen\u00eatre)<\/a><\/p>\n\n\n\n

Association d’images par click’n move<\/p>\n\n\n\n

Le but de ce jeu est de placer chaque photo de plante dans la zone du milieu correspondant. La s\u00e9lection se fait par click’n move : un clic sur une photo permet de la s\u00e9lectionner et un deuxi\u00e8me clic permet de la d\u00e9poser.<\/p>\n\n\n\n

ESC<\/td>m\u00e9langer les photos<\/td><\/tr>
SPACE<\/td>v\u00e9rifier les correspondances<\/td><\/tr><\/tbody><\/table>
Actions disponibles au clavier<\/figcaption><\/figure>\n\n\n\n

La v\u00e9rification des correspondances affiche temporairement une bordure de couleur autour des photos : vert pour une bonne r\u00e9ponse, rouge pour une mauvaise r\u00e9ponse et noir pour les photos qui ne sont pas plac\u00e9es dans un milieu.<\/p>\n\n\n\n

Tester l’association d’images par click’n move (s’ouvre dans une nouvelle fen\u00eatre)<\/a> <\/p>\n\n\n\n

HamHam City<\/p>\n\n\n\n

Ce jeu n’a pas vraiment de r\u00e8gles, l’objectif \u00e9tant de pousser la technique avec l’utilisation de sprites, d’animations et de syst\u00e8me de particules. Le jeu permet de cr\u00e9er son village de hamsters. Un clic permet de s\u00e9lectionner un hamster alors qu’un double clic permet de rajouter un hamster \u00e0 la sc\u00e8ne. Ces derniers peuvent \u00eatre nourris ou affam\u00e9s. \u00c0 not qu’un hamster affam\u00e9 mourra au bout d’un certain temps. Il est \u00e9galement possible de changer la couleur des hamsters.
Les trois th\u00e8mes propos\u00e9s, appel\u00e9s styles, donnent acc\u00e8s \u00e0 des actions sp\u00e9cifiques. Le style Vero est le paradis des hamsters alors que le style Aur\u00e9lien est un enfer et que le style Ariane est bas\u00e9 sur l’univers de My Little Pony!<\/p>\n\n\n\n

CTRL + clic<\/strong><\/td>rajouter ou supprimer un hamster de la s\u00e9lection<\/td><\/tr>
CTRL + ESPACE<\/strong> <\/td>s\u00e9lectionner tous les hamsters<\/td><\/tr>
Fl\u00e8ches directionnelles<\/strong><\/td>d\u00e9placer le ou les hamsters s\u00e9lectionn\u00e9s<\/td><\/tr><\/tbody><\/table>
Actions disponibles au clavier<\/figcaption><\/figure>\n\n\n\n