Simuler une zone de grattage

Bonjour à tous

Mon client souhaite afficher une petite fenêtre qui s’ouvre lors d’une première connexion journalière avec une case à gratter qui affiche un code promo uniquement valable pour l'utilisateur. Exactement comme un jeu de grattage

J'aimerai donc pouvoir le faire en jquery. J'ai trouvé la solution jScratchCard mais la dernière évolution date de début 2011. De plus il faut utiliser une image sous la zone à gratter, je préfèrerai pouvoir mettre un texte dans un span ou un div par exemple.

Connaitriez vous une autre solution + récente qui permet de faire ce dont j'ai besoin ?

Merci à tous :)

Je reviens 5 jours après, personne ne connait une application faisant la simulation de grattage ? :(

Re bonjour

Je continue ce post car voilà exactement ce que je voudrai : http://www.spartoo.com/
A l'ouverture du site ils proposent une zone à gratter, ils utilisent un canvas. Pensez vous que c'est fait maison ?

j'en connais en flash...
mais une simple recherche sur google et j'en trouve plein en html5
http://www.websanova.com/blog/jquery...tch-pad-plugin
(demo http://wscratchpad.websanova.com/ )

Bonjour,

J'ai analysé le grattage de Spartoo. Le code qui gère ça se trouve ici : http://static6.spartoo.com/js/happy_days.js

Le pourcentage à « gagner » est un <span class="hd_gain_big"> caché derrière le canvas. Le canvas est d'abord rempli avec cette image :
http://imgext.spartoo.com/images/happy_days_gratte.png
Le texte « Grattez » est dessiné par-dessus.

La partie intéressante se trouve ici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 _mouseMove : function(e, that) { if(!that.clicked) return; if (pas_bloque) { var offset = $(that.$elmt).offset(), x =e.pageX - offset.left, y = e.pageY - offset.top, i = -10; for(i = -10; i< 10; i++) { for(var a = -5; a< 5; a++) { if(Math.random() < 0.2) { that.context.clearRect(x + i,y + a,1,1); k_index = parseInt((y + a)*img_width + (x + i)); //alert(k_index+' : '+img_grat_array[k_index] + ' w '+ img_width + ' y '+ y +' a '+a + ' x '+x+' i '+i); if (img_grat_array[k_index]) { gratte_tout ++; img_grat_array[k_index] = 0; //alert(gratte_tout); } } } } if (gratte_tout > percent_coverage) { pas_bloque = 0; document.getElementById('spartooday').style.height = window_final_size; if(version_tablet) { sendDataSync('display_gain', 'ope=SPARTOODAY&init=display_gain', '../operations/spartooday/spartooday_ajax.php', 'GET'); } else { sendDataSync('display_gain', 'ope=SPARTOODAY&init=display_gain', 'operations/spartooday/spartooday_ajax.php', 'GET'); } } } },
En gros :

Ça se passe lors de l'évènement mousemove
seulement lorsque le bouton de la souris est enfoncé
x et y sont les coordonnées du curseur
i varie de -10 à +10 autour de x
a varie de -5 à +5 autour de y
Math.random() < 0.2 équivaut à « 1 chance sur 5 »
clearRect(..., ..., 1, 1) efface un rectangle de 1x1 pixels, autrement dit il efface juste un pixel.

Tout ça signifie : chaque pixel dans un rectangle de 20x10 pixels autour du curseur a une chance sur 5 d'être effacé.

Ensuite arrive la partie avec k_index. Le code utilise un tableau img_grat_array qui a été initialisé un peu plus haut dans le script :
Code:

1 2 3 for(k=0;k<img.height*img.width;k++) { img_grat_array[k] = 1; }
C'est un tableau à une dimension dont la longueur est égale au nombre de pixels dans l'image (img.height*img.width). Au départ il est rempli de 1 ; quand un pixel est effacé, l'entrée correspondante dans ce tableau est mise à 0. Ça permet de connaître le nombre total de pixels qui ont été effacés (gratte_tout ++).

Pour finir, quand le nombre de pixels « grattés » dépasse un certain seuil (percent_coverage qui, soit dit en passant, est mal nommé car ce n'est pas un pourcentage), le grattage est bloqué (pas_bloque = 0) et le texte final (« Bravo » etc.) est affiché.