HTML5 Carte à Gratter

Je suis en train de configurer un petit jeu de carte à gratter, où il y a plusieurs panneaux et vous faites glisser le pointeur sur ou tactile (ipad, smartphone, etc) des rayures et de la faire apparaître l'image en dessous.

Je ne suis pas un JS guru donc j'ai beaucoup cherché et trouvé ce que je crois est le meilleur script:

http://www.websanova.com/tutorials/jquery/html5-jquery-scratch-pad-plugin

Utilise canvas et jQuery. Il vous permet également de voir le pourcentage rayé mais il ne fonctionne pas sur mobile.

Je suis à la recherche à la JS mais ne sais pas comment faire pour aller sur l'ajout d'événements tactiles pour le script:
https://github.com/websanova/wScratchPad/blob/master/wScratchPad.js

?

InformationsquelleAutor Quadrant6 | 2012-08-09
  1. 1

    Je n'utilise pas jQuery beaucoup, donc pas sûr de la façon de prolonger jQuery extensions en soi, mais en regardant l'exemple code sur github vous souhaitez ajouter des modifications à ces lignes (110 à 140):

    this.sp =
$('<div></div>')
.css({cursor: 'default', position: 'relative'})
.append(
    $(this.canvas)
    .attr('width', this.settings.width + 'px')
    .attr('height', this.settings.height + 'px')
    .css({cursor: 'default'})
    .mousedown(function(e)
    {
        e.preventDefault();
        e.stopPropagation();
        $this.scratch = true;
        $this.scratchFunc(e, $this, 'Down');
    })
)

$(document)
.mousemove(function(e)
{
    if($this.scratch) $this.scratchFunc(e, $this, 'Move');
})
.mouseup(function(e)
{
    //make sure we are in draw mode otherwise this will fire on any mouse up.
    if($this.scratch)
    {
        $this.scratch = false;
        $this.scratchFunc(e, $this, 'Up');
    }
});

    Si vous modifiez ou de dupliquer ce bloc, et ajouter touchevents la réplication de la fonctionnalité de la mousedown, mousemove et mouseup, gestionnaires, vous devriez être la plupart du temps il n'.

    • Merci, L'auteur a modifié le code pour la nuit. Voir la source sur github. J'ai ajouté un autre biding pour touchmove, puis un supplément, mais il ne semble pas fonctionner. - Je configurer un exemple ici: jsfiddle.net/qFuaa
    InformationsquelleAutor sq2