HTML5 Scratch卡片

Question

我正在尝试设置一个小小的抓取卡游戏，其中有几个面板，您拖动或触摸(ipad，智能手机等)以抓取并显示下面的图像。

我不是JS专家，所以我进行了广泛的搜索，找到了我认为最好的脚本：

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

使用canvas和jQuery。它还可以让你看到抓取的百分比，但它在移动设备上不起作用。

我正在研究JS，但不知道如何向脚本添加触摸事件：https://github.com/websanova/wScratchPad/blob/master/wScratchPad.js

Answer 1

我不太使用jQuery，所以不确定如何扩展jQuery扩展本身，但是看看示例code on github，您想要对这些行(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');
    }
});

如果您修改或复制此块，并添加touchevents来复制mousedown、mousemove和mouseup处理程序的功能，那么您应该大部分时间都在那里。