Scratcher

by Eddie Lin

HTML

<div id="scratch">
    <div class="scratcher">
      <img id="fx-icon" src="https://firefox.club.tw/static/img/event/every-moment/scratch/scratch-firefox.png"/>
      <canvas id="fx-scratcher"></canvas>
    </div>
  </div>

<button id="reset">重置</button>

CSS

body {
    background-color: #000036;
}
.scratcher {
    display: none;      
    width: 125px;
    height: 125px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: url(https://firefox.club.tw/static/img/event/every-moment/scratch/scratch-white.png) no-repeat;
  }
    
.scratcher #fx-scratcher, .scratcher #fx-icon {
    position: absolute;
}
.scratcher #fx-scratcher {
    transition: opacity 0.5s ease-out 0s;
}
.scratcher.complete #fx-scratcher {
    opacity: 0;
}
.scratcher #fx-icon {
    transition: all 0.5s ease-out 0.5s;
    left: 0;
    top: 0;
    width: 125px;
    height: 125px;
}
.scratcher.complete #fx-icon {
    width: 300px;
    height: 300px;
    opacity: 0;
    left: -83px;
    top: -100px;
}

JavaScript

/**
 * Scratch-off canvas
 *
 * NOTE: this code monkeypatches Function.prototype.bind() if it doesn't
 * already exist.
 *
 * NOTE: This is demo code that has been converted to be less demo-y.
 * But it is still demo-y.
 *
 * To make (more) correct:
 *  o   add error handling on image loads
 *  o   fix inefficiencies
 *
 * depends on jQuery>=1.7
 *
 * Copyright (c) 2012 Brian "Beej Jorgensen" Hall <[email protected]>
 *
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

Scratcher = (function () {

    /**
     * Helper function to extract the coordinates from an event, whether the
     * event is a mouse or touch.
     */
    function getEventCoords(ev) {
        var first, coords = {};
        var origEv = ev.originalEvent; // get from jQuery

        if (origEv.changedTouches != undefined) {
            first = origEv.changedTouches[0];
            coords.pageX = first.pageX;
            coords.pageY = first.pageY;
        } else {
            coords.pageX...