Mini game: Ghép hình với HTML CSS JS

Mã nguồn:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE-U3QmaUO0uDUpkJDIL3q41JOQdMFwSqOBtcsYhAJDUr4i8iwhmku3W_UzwaDyMzgeAaCz6Ij1JtetbYRFKU0HLH4rJk7B-hAPDplss8Pfxhk_DpdXicIBXhGYRJEWNVBbxZRDlBj_mt/s1600/khoa-hoc-html-css.jpg


Bạn tham khảo khóa học html css: 
Khóa học HTML CSS
<script language="javascript">
function dragHandler(target, e) {
    e.dataTransfer.setData('sendId', target.id);
}

function dropHandler(target, e) {
    var id = e.dataTransfer.getData('sendId');

 var s= Math.abs(document.getElementById(id).parentNode.id-target.id);

 if(target.innerHTML=='' && s!=9 && s!=2 && s<11)
 {
  target.appendChild(document.getElementById(id));
  moved.innerHTML=moved.innerHTML-(-1);
 }

 e.preventDefault();

 if(isWin()==true)
 {
  alert("Bạn đã thắng !!!!!!!!!!!!!!!!!!!");
  random();
 }
}

function isWin()
{
 var list = new Array("00", "01", "10", "11", "20", "21");
 for(var i=0; i<6; i++)
 {
  if(document.getElementById(list[i]+"i").parentNode != document.getElementById(list[i]))
  {
   return false;
  }
 }

 return true;
}

function can_move(id1, id2)
{
var s= Math.abs(id1-id2);
if(s!=9 && s!=2 && s<11)
return true;
return false;
}

function random()
{
 var list = new Array("00", "01", "10", "11", "20", "21", "22");
 var empty;
 for(var i=0; i<100; i++)
 {
  for(var j=0;j<7;j++)
  {
   if(document.getElementById(list[j]).innerHTML=='')
   {
    empty=list[j];
    break;
   }
  }
  
  var k=Math.floor(Math.random()*7);
   {
    if(list[k] != empty && can_move(list[k], empty)==true)
    {
     document.getElementById(empty).appendChild(document.getElementById(list[k]).firstChild);
    }
   }
 }
}
window.onload=random;
</script>

<style type="text/css">
.cell
{
 width: 100px;
 height: 100px;
}

.cell img
{
 width: 100px;
 height: 100px;
}

</style>

<table border="1" cellpadding="0" style="background-color: red">

<tr>
<td><div id="00" class="cell" ondrop="dropHandler(this, event)" ondragenter="return false" ondragover="return false"><img src="1.png" id="00i" ondragstart="dragHandler(this, event)"></div></td>
<td><div id="01" class="cell" ondrop="dropHandler(this, event)" ondragenter="return false" ondragover="return false"><img src="2.png" id="01i" ondragstart="dragHandler(this, event)"></div></td>
<td style="text-align:center">Số lần đi:</td>
</tr>

<tr>
<td><div id="10" class="cell" ondrop="dropHandler(this, event)" ondragenter="return false" ondragover="return false"><img src="3.png"  id="10i" ondragstart="dragHandler(this, event)"></div></td>
<td><div id="11" class="cell" ondrop="dropHandler(this, event)" ondragenter="return false" ondragover="return false"><img src="4.png"  id="11i" ondragstart="dragHandler(this, event)"></div></td>
<td style="text-align:center" id="moved">0</td>
</tr>

<tr>
<td><div id="20" class="cell" ondrop="dropHandler(this, event)" ondragenter="return false" ondragover="return false"><img src="5.png"  id="20i" ondragstart="dragHandler(this, event)"></div></td>
<td><div id="21" class="cell" ondrop="dropHandler(this, event)" ondragenter="return false" ondragover="return false"><img src="6.png"  id="21i" ondragstart="dragHandler(this, event)"></div></td>
<td><div id="22" class="cell" ondrop="dropHandler(this, event)" ondragenter="return false" ondragover="return false"></div></td>
</tr>

</table>

<button onclick="window.location.reload()">Xáo hình</button>