7 ressources pour créer et manipuler des cartes en HTML, Javascript, node.js et Ruby

08/09/201526/11/2022

Inspiration graphique

Javascript

Aujourd'hui, le BlogDuWebdesign vous propose de trouver des ressources en HTML, Javascript, mais aussi Ruby et Node pour créer et manipuler des cartes à jouer.

Les cartes à jouer sont un des objets les plus universels que l'on puisse trouver. Symbole de chance, mais aussi de trucage et de magie, elles portent des valeurs très fortes, qu'il peut être intéressant d'essayer de lier à un web design pour profiter de ce symbole.

Pour vous aider dans cette tâche, je vous propose 7 ressources très diverses portant sur la création, la manipulation et l'animation de jeux de cartes, que ce soit côté client en HTML5 et Javascript, ou côté serveur en Ruby et Javascript avec Node js.

Des decks de cartes en HTML5 et Javascript

Ces 4 premières ressources vous proposent d'animer et manipuler des jeux de cartes en HTML et Javascript. Mention spéciale a la première, deck-of-cards, qui vous propose un jeu de cartes totalement animé, mélangeable, triable, bref tout y est à une exception près : il est impossible de "retourner" une carte, et donc de voir son dos.

Pour cette raison, je vous ai ajouté une petite intégration sur Codepen permettant de retourner une carte de manière animée.

Créer un design de carte personnalisé

Car il n'y a pas que les jeux de 54 cartes dans la vie, Squib vous propose de vous aider à créer votre propre jeu de cartes.

Cette ressource écrite en Ruby vous permettra de créer le design (votre "layout" de vos cartes en quelques lignes de configurations, en plaçant des symboles, textes et chiffres où vous le voulez, puis de créer tous les exemplaires de vos cartes dans un fichier yml (sorte de json ou de CSV) précisant les valeurs à donner à chaque champ. En quelques minutes, votre jeu de cartes est prêt à passer en test !