トップ  >  2016年  >  2016.04.15 [jQuery] スクラッチカード
features [jQuery] スクラッチカード
2016.04.15記
今回は、jQueryを使って、スクラッチカードを作ってみました
下の3つの黒い正方形がスクラッチカードです
最初のスクラッチで、赤色が出たら「あたりです」

wScratchPad
https://github.com/websanova/wScratchPad

参考:http://peacepopo.net/blog-entry-104.html

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>
削ったパーセンテージで判定することも可能です
前
2016.05.15 ファイル比較
カテゴリートップ
2016年
次
2016.03.15 [CSS] 連番

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2017 keibunsya all right reserved.