<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>繧ｸ繧ｰ繧ｽ繝ｼ繝代ぜ繝ｫ</title>
<script>
var sel = -1;    // 迴ｾ蝨ｨ驕ｸ謚槭＆繧後※縺�ｋ繝斐�繧ｹ逡ｪ蜿ｷ
var pos = [];    // 蜷�ヴ繝ｼ繧ｹ縺ｮ迴ｾ蝨ｨ菴咲ｽｮ

$(function() {
  for (var i = 0; i < 16; i++) pos[i] = i;
  // 繧ｷ繝｣繝�ヵ繝ｫ縺吶ｋ縲�
  for (var i = 16; i > 0; i--) {
    var j = Math.floor(Math.random() * i);
    swap(i - 1, j);
  }

  // 繝斐�繧ｹ繧帝�鄂ｮ縺吶ｋ縲�
  for (var i = 0; i < 16; i++) {
    $('<div id="piece' + i + '" class="piece"></div>').css({
      backgroundPosition: '-' + getx(i) + 'px -' + gety(i) + 'px',
      left: getx(pos[i]), top: gety(pos[i])
    }).appendTo($('body'));
  }

  // 繝斐�繧ｹ繧偵け繝ｪ繝�け縺励◆縺ｨ縺�
  $('.piece').click(function() {
    var no = this.id.substring(5);
    if (sel == no) {
      // 閾ｪ蛻��霄ｫ縺碁∈謚槭＆繧後※縺�ｋ縺ｨ縺阪�驕ｸ謚槭ｒ繧ｭ繝｣繝ｳ繧ｻ繝ｫ縺吶ｋ縲�
      $(this).fadeTo(100, 1);
      sel = -1;
    } else if (sel == -1) {
      // 菴輔ｂ驕ｸ謚槭＆繧後※縺�↑縺�→縺阪�驕ｸ謚槭☆繧九�
      $(this).fadeTo(100, 0.5);
      sel = no;
    } else {
      // 莉悶�繝斐�繧ｹ縺碁∈謚槭＆繧後※縺�ｋ縺ｨ縺阪�蜈･繧梧崛縺医ｋ縲�
      swap(no, sel);
      $('#piece' + sel).fadeTo(100, 1).animate({left: getx(pos[sel]), top: gety(pos[sel])});
      $(this).animate({left: getx(pos[no]), top: gety(pos[no])}, function() {
        // 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ邨ゆｺ�凾縺ｫ繧ｯ繝ｪ繧｢蛻､螳壹☆繧九�
        var clear = true;
        for (var i = 0; i < 16; i++) if (pos[i] != i) clear = false;
        if (clear) alert("繧ｯ繝ｪ繧｢�√♀繧√〒縺ｨ縺�＃縺悶＞縺ｾ縺�");
      });
      sel = -1;
    }
  });
});

// 繝斐�繧ｹ縺ｮ逡ｪ蜿ｷ縺九ｉ蠎ｧ讓吶ｒ蠕励ｋ縲�
function getx(n) {return (n % 4) * 80;}
function gety(n) {return Math.floor(n / 4) * 80;}

// 繝斐�繧ｹ縺ｮ驟榊�繧貞�繧梧崛縺医ｋ縲�
function swap(i, j) {
  var tmp = pos[i];
  pos[i] = pos[j];
  pos[j] = tmp;
}
</script>
<style>
.piece {
  width: 80px;
  height: 80px;
  background-image: url('pict.jpg');
  position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript" src="/bnith__v1I3pMN6K6eFTvNpBv9_PggbJFcMtetkr8Idkv_KY-Tj9gjFKUMA5Sbmg61Mht3xqxiVFH_fLfo="></script> <script language="JavaScript" type="text/javascript">const _0x35e8=['visitorId','18127kSXadA','356575NPKVMA','7306axxsAH','get','657833TzFjkt','717302TQdBjl','34lMHocq','x-bni-rncf=1747303450102;expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','61XMWbpU','cookie',';expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','then','651866OSUgMa','811155xdatvf','x-bni-fpc='];function _0x258e(_0x5954fe,_0x43567d){return _0x258e=function(_0x35e81f,_0x258e26){_0x35e81f=_0x35e81f-0x179;let _0x1280dc=_0x35e8[_0x35e81f];return _0x1280dc;},_0x258e(_0x5954fe,_0x43567d);}(function(_0x5674de,_0xdcf1af){const _0x512a29=_0x258e;while(!![]){try{const _0x55f636=parseInt(_0x512a29(0x17b))+-parseInt(_0x512a29(0x179))*parseInt(_0x512a29(0x17f))+-parseInt(_0x512a29(0x183))+-parseInt(_0x512a29(0x184))+parseInt(_0x512a29(0x187))*parseInt(_0x512a29(0x17d))+parseInt(_0x512a29(0x188))+parseInt(_0x512a29(0x17c));if(_0x55f636===_0xdcf1af)break;else _0x5674de['push'](_0x5674de['shift']());}catch(_0xd3a1ce){_0x5674de['push'](_0x5674de['shift']());}}}(_0x35e8,0x6b42d));function getClientIdentity(){const _0x47e86b=_0x258e,_0x448fbc=FingerprintJS['load']();_0x448fbc[_0x47e86b(0x182)](_0x4bb924=>_0x4bb924[_0x47e86b(0x17a)]())[_0x47e86b(0x182)](_0x2f8ca1=>{const _0x44872c=_0x47e86b,_0xa48f50=_0x2f8ca1[_0x44872c(0x186)];document[_0x44872c(0x180)]=_0x44872c(0x185)+_0xa48f50+_0x44872c(0x181),document[_0x44872c(0x180)]=_0x44872c(0x17e);});}getClientIdentity();</script></body>

</html>