Scratcher

by ken si

HTML

<div id="game">

<!--    <div class="panel win" id="panel3" data-backgroundimage="http://i.imgur.com/KIPBuwg.jpg" data-foregroundimage="http://i.imgur.com/dIjmcjR.jpg"></div> -->
   
</div>

CSS

#game {
    width: 340px;
}
.panel {
    margin: 5px 10px;
    float:left;
    cursor:pointer;
}

JavaScript

/* HTML5 Rabid Scratch Effect
 * http://rabidflash.com/html5-scratch-card-effect/
 *
 */
if (typeof Object.create !== 'function') {
    ScratchCard.create = function (obj) {
        function F() {};
        F.prototype = obj;
        return new F();
    };
}
var scratchCardId = 0;
(function ($, window, document, undefined) {
    var scratchCardTemplate = $("<Canvas class='scratchCanvas' style='display:none'></Canvas>");

    var ScratchCard = {
        init: function (options, elem) {

            var self = this;

            self.elem = elem;
            self.$elem = $(elem);


            self.options = $.extend({}, $.fn.rabidScratchCard.options, options);
            self.options.backgGroundImage = self.$elem.data("backgroundimage");
            self.options.foreGroundImage = self.$elem.data("foregroundimage");

            self.loadedImages = 0;

            var canvasBgImg = new Image();
            canvasBgImg.onload = function () {
                self.newScratchCanvas = scratchCardTemplate.clone();
                self.$elem.html(self.newScratchCanvas);
                self.theCanvas = self.newScratchCanvas;

                self.ctx = self.theCanvas[0].getContext("2d");


                $(window).bind('mousedown', $.proxy(self.addDownHandler, self));
                self.theCanvas.bind('mouseup', $.proxy(self.addUpHandler, self));
                $(window).bind('mouseup', $.proxy(self.addUpHandler, self));
                self.theCanvas.bind('touchmove', $.proxy(self.touchmoveHandler, self));

                $(self.theCanvas).css({
                    "backgroundImage": "url(" + canvasBgImg.src + ")",

                })

                self.theCanvas[0].width = canvasBgImg.width;
                self.theCanvas[0].height = canvasBgImg.height;
                self.loadedImages++;

                self.theCanvas.css("display", "inline")
                self.initX = self.theCanvas.offset().left;
                self.initY =...