HTML, CSS, JavaScript

<style type="text/css">
.sPad { 
  width:100px; 
  height:100px; 
  border:1px solid #999; 
  margin:0 0 10px 0; 
}
</style>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1");
</script>
<script src="wScratchPad.min.js"></script>

<script type="text/javascript">
$(function() {
  // 乱数：1〜3の整数
  var atari = Math.floor(Math.random() * 3) +1;

  // スクラッチカードの背景色初期値
  var sp1_bg = '#ccc';
  var sp2_bg = '#ccc';
  var sp3_bg = '#ccc';

  // 乱数で出た数字をあたりとして、背景を赤にする
  switch (atari) {
    case 1:
      sp1_bg = '#f00';
      break;
    case 2:
      sp2_bg = '#f00';
      break;
    case 3:
      sp3_bg = '#f00';
      break;
  }

  $("#SP1").wScratchPad({
    fg: "#000",
    bg: sp1_bg,
    size: 20,
    scratchUp: function (e, percent) {
      atari_check(1);
    }
  });
  $("#SP2").wScratchPad({
    fg: "#000",
    bg: sp2_bg,
    size: 20,
    scratchUp: function (e, percent) {
      atari_check(2);
    }
  });
  $("#SP3").wScratchPad({
    fg: "#000",
    bg: sp3_bg,
    size: 20,
    scratchUp: function (e, percent) {
      atari_check(3);
    }
  });

  // あたりのチェック
  // 最初にあたりを引いた場合のみ「あたり」アラートが出る
  var disp_alert = false;
  function atari_check(c) {
    if (atari == c && disp_alert === false) {
      alert('あたり');
    }
    disp_alert = true;
  }
});
</script>

<!-- スクラッチカード -->
<div id="SP1" class="sPad"></div>
<div id="SP2" class="sPad"></div>
<div id="SP3" class="sPad"></div>