Question

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.com/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.com/websanova/wScratchPad/blob/master/wScratchPad.js

?

Answer 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.