សរសេរកូដ Javascript កូសកាតដើម្បីឈ្នះ (Scratch to win)

1. បង្កើត HTML ដូចខាងក្រោម

<div class="card">
    <div class="base">Coupon Code: 123456789</div>
    <canvas id="scratch" width="300" height="60"></canvas>
</div>

1. បន្ថែមស្ទាយ CSS ដូចខាងក្រោម

.card{
   width: 300px;
   height: 60px;
   position: relative;
   box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
}
.base, #scratch {
  cursor: default;
  height: 60px;
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: grabbing;
}
.base {
  line-height: 60px;
  text-align: center;
}
#scratch {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

1. ហៅ Js file ក្នុង HTML

<!-- scratch-card-with-canvas JS -->
<script src="js/scratch-card.js"></script>

1. សរសេរកូដ Javascript ខាមក្រោម

(function(){

  'use strict';

  var canvas = document.getElementById('scratch'),
      context = canvas.getContext('2d');

  // default value
  context.globalCompositeOperation = 'source-over';

  //----------------------------------------------------------------------------

  var x, y, radius;

  x = y = radius = 150 / 2;

  // fill circle
  context.beginPath();
  context.fillStyle = '#CCCCCC';
  context.arc(x, y, radius, 0, Math.PI * 2, false);
  context.fill();

  //----------------------------------------------------------------------------

  var isDrag = false;

  function clearArc(x, y) {
    context.globalCompositeOperation = 'destination-out';
    context.beginPath();
    context.arc(x, y, 10, 0, Math.PI * 2, false);
    context.fill();
  }
canvas.addEventListener('mousedown', function(event) {
    isDrag = true;

    clearArc(event.offsetX, event.offsetY);
    judgeVisible();
  }, false);

  canvas.addEventListener('mousemove', function(event) {
    if (!isDrag) {
      return;
    }

    clearArc(event.offsetX, event.offsetY);
    judgeVisible();
  }, false);

  canvas.addEventListener('mouseup', function(event) {
    isDrag = false;
  }, false);

  canvas.addEventListener('mouseleave', function(event) {
    isDrag = false;
  }, false);

canvas.addEventListener('touchstart', function(event) {
    if (event.targetTouches.length !== 1) {
      return;
    }

    event.preventDefault();

    isDrag = true;

    clearArc(event.touches[0].offsetX, event.touches[0].offsetY);
    judgeVisible();
  }, false);

  canvas.addEventListener('touchmove', function(event) {
    if (!isDrag || event.targetTouches.length !== 1) {
      return;
    }

    event.preventDefault();

    clearArc(event.touches[0].offsetX, event.touches[0].offsetY);
    judgeVisible();
  }, false);

  canvas.addEventListener('touchend', function(event) {
    isDrag = false;
  }, false);

function judgeVisible() {
    var imageData = context.getImageData(0, 0, 150, 150),
        pixels = imageData.data,
        result = {},
        i, len;

    // count alpha values
    for (i = 3, len = pixels.length; i < len; i += 4) {
      result[pixels[i]] || (result[pixels[i]] = 0);
      result[pixels[i]]++;
    }

    document.getElementById('gray-count').innerHTML = result[255];
    document.getElementById('erase-count').innerHTML = result[0];
  }

  document.addEventListener('DOMContentLoaded', judgeVisible, false);

}());