Микро-Пятнашки на jQuery

17.01.2014 [23:10:18] evg

Пятнашки

<style>
  #tbl td{text-align:center;width:40px;height:40px;}
  #tbl td:hover{background:#eee;}
  #steps{width:700px;}
</style>
<table border=1 id='tbl'><tr><td>2</td> <td>5</td> <td>4</td> <td>6</td> </tr>
<tr><td>1</td> <td>13</td> <td>11</td> <td>3</td></tr>
<tr><td>14</td> <td>12</td> <td>7</td> <td>10</td></tr>
<tr><td>8<</td> <td>15</td> <td>9</td> <td>0</td></tr></table>
<div id='steps'></div>

<script>
var tbl=[];
var steps=0;
  var result='';
  
function gettable(t)
{
    var tf=$('#'+t+' td');
    
    for(var i=0;i<tf.length;i++){
        tbl[i]=parseInt(tf[i].innerHTML);
    }
}

function settable(t)
{
  	var r = true;
    var tf=$('#'+t+' td');
    for(var i=0;i<tf.length;i++){
       tf[i].innerHTML=tbl[i];
      if(tbl[i]-1 != i && i !=15) r = false;
    }    
  if(r)alert('Решение найдено! Поздравляем!');
}

function settableclick(t)
{
    var tf=$('#'+t+' td');
    for(var i=0;i<tf.length;i++){
        $(tf[i]).click({i:i},function(eo){change(eo.data.i);});
    }    
}

function change(t){
    if(((t - 1) % 4 >= 0) &&((t - 1) % 4 < 3)) { if (tbl[t-1]==0) {tbl[t-1]=tbl[t];tbl[t]=0;result+='R ';steps++;}}
    if(((t + 1) % 4 > 0) &&((t + 1) % 4 <= 3)) { if (tbl[t+1]==0) {tbl[t+1]=tbl[t];tbl[t]=0;result+='L ';steps++;}}
    if(t - 4 >= 0) { if (tbl[t-4]==0) {tbl[t-4]=tbl[t];tbl[t]=0;result+='D ';steps++;}}
    if(t + 4 <= 15) { if (tbl[t+4]==0) {tbl[t+4]=tbl[t];tbl[t]=0;result+='U ';steps++;}}
    settable('tbl');
  
  $('#steps').text('Количество ходов: '+steps+' Перемещения пустой клетки(0): '+result);
}

gettable('tbl');
settableclick('tbl');

</script>