I'm trying to setup a wee scratch card game, where there are several panels and you drag over or touch (ipad, smartphone etc) to scratch and reveal the image beneath.

I'm not a JS guru so I've searched extensively and found what I believe is the best script:

Uses canvas and jQuery. It also lets you see the percentage scratched but it doesn't work on mobile.

I'm looking at the JS but don't know how to go about adding touch events to the script: .js

?

I'm trying to setup a wee scratch card game, where there are several panels and you drag over or touch (ipad, smartphone etc) to scratch and reveal the image beneath.

I'm not a JS guru so I've searched extensively and found what I believe is the best script:

http://www.websanova./tutorials/jquery/html5-jquery-scratch-pad-plugin
Uses canvas and jQuery. It also lets you see the percentage scratched but it doesn't work on mobile.

I'm looking at the JS but don't know how to go about adding touch events to the script: https://github./websanova/wScratchPad/blob/master/wScratchPad.js

?

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 9, 2012 at 5:33 Quadrant6 asked Aug 9, 2012 at 5:22 Quadrant6Quadrant6 1,23522 gold badges1616 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I don't use jQuery much, so not sure how to extend jQuery extensions per se, but looking at the example code on github you want to add changes to these lines (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');
    }
});

If you modify or duplicate this block, and add touchevents replicating the functionality of the mousedown, mousemove and mouseup handlers, you should be mostly there.