HTML5刮刮卡

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');
    }
});

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