이번에 소개할 프로그램은 JQUERY의 sortable 메서드를 이용하여 만단 간단한 생상 블록 맞추기 게임이다. sortable 메서드의 경우 JQUERY UI 라이브러리가 있어야만 가능하며 특정 목록 아이템 부모를 선택해주면 자동으로 마우스 드래그&드롭 기능이 작동된다. 

sortable 메서드에 대한 자세한 정보는 아래의 포럼에서 살펴보면 된다. 

<!-- jquery -->
<script src="//code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- jquery ui -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>

<div class="program">
  <div class="sample-box">
    <h1>문제</h1>
    <h5>아래의 색상 순서대로 답의 정렬을 맞추시오.</h5>
    <ul class="item-box"></ul> 
  </div>

  <div class="set-box">
    <h1>답</h1>
    <ul class="item-box"> </ul> 
  </div>


  <div class="btn">
    <a href="#none" onclick="init(); return false;" class="restart">다시하기</a>
  </div>

</div>

<style>
  .program{ width:500px; margin:0 auto;  }
  .sample-box{ width:500px; }
  .sample-box ul{ width:100%;  position: relative; margin:0; padding:0;}
  .sample-box ul li{ list-style:none; margin:0; padding:0; width:100%; height:50px; box-sizing: border-box; border:solid 1px #fff; } 

  .set-box{ width:500px; position: relative; }
  .set-box ul{ width:100%;  position: relative; margin:0; padding:0; }
  .set-box ul.over{opacity: 0.4; background-color:#fff;}
  .set-box ul li{ float: left; list-style:none; margin:0; padding:0;  height:50px; box-sizing: border-box; border:solid 1px #fff; cursor: pointer; } 
  .btn{ text-align:center; margin-top:200px; display:none; }
  .btn .restart{ font-size:24px; border:solid 1px #eee; background-color: #333; color:#fff; display: inline-block; padding:4px 10px; text-decoration: none; width:190px;}
</style>
<script>

var itemWcount = 3; // 아이템 길이
var itemHcount = 3; // 아이템 높이
var arrColorSet;
var arrColorCount;
$(document).ready(function(){
  init();
});
function init(){

  $('.restart').closest('.btn').hide();
  arrColorSet = [];
  arrColorCount = {};
  for(var i=0; i < itemHcount; i++){
    var rdrgb = createRdRgb();
    arrColorSet.push(rdrgb);
  }

  $('.sample-box ul').html('');
  $('.set-box ul').html('');

  $.each(arrColorSet,function(idx,rdrgb){
    $('.sample-box ul').append('<li data-rdrgb="'+rdrgb+'" style="background-color:#'+rdrgb+'"></li>');
  });
  $('.set-box ul').removeClass('over');

  var createItemCount = itemWcount*itemHcount;
  var itemWidthPer = (100/itemWcount).toFixed(2);
  for(var i=0; i < createItemCount; i++){
    var rdrgb = setRdRgb();
    if( typeof arrColorCount[rdrgb] == 'undefined'){ arrColorCount[rdrgb] = 1; }
    else{ arrColorCount[rdrgb] += 1; }
    $('.set-box ul').append('<li data-rdrgb="'+rdrgb+'" style="width:'+itemWidthPer+'%;background-color:#'+rdrgb+'"></li>');
  }
  $('.set-box ul').sortable({
    revert: 150,
    stop: function( event, ui ) {
      var result = checkrdRgb();
      if( result === true){
        alert('참 잘했어요!');
        $('.restart').closest('.btn').show();
        $('.set-box ul').sortable('destroy').addClass('over');
      }
    }
  });    
  
}
function setRdRgb(){
    try{
      var rdNum = Math.floor(Math.random() * itemHcount);
      var rdrgb = arrColorSet[rdNum];
      if( typeof arrColorCount[rdrgb] != 'undefined' && arrColorCount[rdrgb] >= itemWcount ){ return setRdRgb(); }
      return rdrgb;      
    }catch(e){
      location.reload(); // 스크립트 무한반복 방지
    }
}

function createRdRgb(){
  try{
    var rdr = Math.floor(Math.random() * 10);
    var rdg = Math.floor(Math.random() * 10);
    var rdb = Math.floor(Math.random() * 10);
    var rdrgb = rdr+''+rdg+''+rdb;
    if( arrColorSet.length > 0 && $.inArray(arrColorSet,rdrgb) >= 0){
      return createRdRgb();
    }
    return rdrgb;
  }catch(e){
    location.reload(); // 스크립트 무한반복 방지
  }
}

function checkrdRgb(){

  var sucTotCnt = 0;
  $.each(arrColorSet,function(idx,rdrgb){
    var sidx = itemWcount*idx;
    var sucCnt = 0;
    for(var i=0; i < itemWcount; i++){
      var dataRdrgb = $('.set-box ul li').eq(sidx+i).data('rdrgb');
      if( String(dataRdrgb) == rdrgb){sucCnt ++;}
    }  
    if( sucCnt == itemWcount){ sucTotCnt ++;}
  });
  if( sucTotCnt == itemHcount){ return true; }
  else{ return false; }
}
</script>

참고로 예제 소스의 설정은 3x3 형식으로 해당 설정을 변경하기 위해선 예제소스에서 아래와 같은 부분을 수정해 주면 된다. 

var itemWcount = 3; // 아이템 길이
var itemHcount = 3; // 아이템 높이