URL: https://linuxfr.org/users/theojouedubanjo/journaux/jouer-avec-des-cartes Title: Jouer avec des cartes Authors: theojouedubanjo Date: 2019年12月21日T00:42:19+01:00 License: CC By-SA Tags: jeu et firefox Score: 24 ## Des cartes Unlock! à imprimer et découper J'aime bien l'escape game de salon [Unlock!](https://www.spacecowboys.fr/unlock) et j'ai découvert que l'éditeur du jeu proposait plusieurs [scénarios de démo](https://www.spacecowboys.fr/unlock-demos) gratuits, les cartes nécessaires au jeu étant fournies dans des pdf à imprimer et découper. Se passer de l'impression ? [imagemagick](http://www.imagemagick.org/) permet de "découper" certaines portions d'un pdf pour en tirer des images. Voici un exemple de commandes utilisables avec le pdf du scénario "Le donjon de Doo-Arann" (toutefois après avoir donné les droits de lecture et d'écriture pour les pdf dans la configuration imagemagick) : convert -density 300 'Doo-Arann.pdf[0,3,4,7]' -gravity NorthWest -chop 130x505 -gravity SouthEast -chop 131x215 -crop 720x1323 +repage -scene 0 back.png convert -density 300 'Doo-Arann.pdf[1,2,5,6]' -gravity NorthWest -chop 130x505 -gravity SouthEast -chop 131x215 -crop 720x1323 +repage -scene 0 front.png Ainsi générées, les images face et dos d'une même carte n'ont pas forcément le même numéro, mais la renumérotation est jouable, surtout lorsqu'on a compris le motif. ## Un navigateur pour jouer Les cartes numériques découpées, restait à pouvoir jouer avec. Solution retenue : une page HTML. Le résultat, avec des [cartes à jouer](http://svg-cards.sourceforge.net/) en lieu et place des cartes Unlock! : ![Des cartes dans un navigateur](https://gitlab.com/theo.dardel/play-cards/raw/master/how-to/open_html_file_see_cards_back.png) Les cartes peuvent être retournées, masquées et réordonnées. Et on peut faire surgir, depuis la barre de droite, un "bac à sable" dans lequel il est possible d'associer, de redimensionner et de faire tourner des cartes. Le bout de code correspondant est disponible sur GitLab : [https://gitlab.com/theo.dardel/play-cards/](https://gitlab.com/theo.dardel/play-cards/) ## So what? On a vu code plus beau : - la compatibilité avec d'autres navigateurs que Firefox va de "ça marche presque comme voulu" à "c'est cassé" ; - la bibliothèque javascript [Konva.js](https://konvajs.org/) utilisée pour le "bac à sable" fait appel à l'élément Canvas ; il en résulte une certaine opacité dans le DOM. Et ça ne permet pas de construire des châteaux. Mais j'ai pu jouer les scénarios de démo de Unlock!, et c'était l'objectif.