Puzzle Alpha

<?xml version="1.0" encoding="utf-8"?>
<ztmstudio>
   <ztml>
     <lang>
       <fr>
         <title><![CDATA[Puzzle/Alpha]]>
</title>
         <srchlp><![CDATA[<DIV><b>Puzzle Alpha</b></DIV>
<DIV>Remettre en ordre</DIV>
<DIV<br>Cliquez sur une case  numérotée
<br>voisine de la case vide
<br>pour la déplacer
<br> vers la case vide
</DIV>
]]>
</srchlp>
</fr>
       <en>
         <title><![CDATA[Puzzle/Alpha]]>
</title>
         <srchlp><![CDATA[<DIV><b>Puzzle Alpha</b></DIV>
<DIV>Put in order</DIV>
<DIV<br>Click on an enumerate cell 
<br>near the empty cell
<br>to move it
<br>towards the empty cell
</DIV>
]]>
</srchlp>
</en>
</lang>
</ztml>
   <html>
     <head><![CDATA[<title>Puzzle Alpha</title>
  <meta charset="utf-8" />
  <meta name="viewport" id="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" href="https://ztmstudio.com/ZTmOs.css" type="text/css" media="screen"/>  
  <link rel="icon" href="Icon/ztmos.png" type="image/x-icon"/>
  <script type="text/javascript" src="https://ztmstudio.com/ZTmStudio.js"></script>
  ]]>
       <style><![CDATA[.tdpuz { font-size:25px;width:45px;height:45px}
]]>
</style>
       <script><![CDATA[call =function (event)	{
var div=ZTmEvent(event).target;
	if (event.type =='click' && div.nodeName=='TD'){
             if(/ztmtitle/.test(div.className)) {
              ZTmHlp();return;}
        } 
	if (event.type =='click' && div.nodeName=='INPUT')  
	{
		if(/scram/.test(div.value)){	
		hole=16;
		setTdPuzzle();
		scramble();
		}
		if(/reset/.test(div.value)){	
		setTdPuzzle();
		}
	}
	if (event.type =='click' && div.nodeName=='TD')  
	{ 
	
	var e = (posTdPuzzle(div).y)*4+posTdPuzzle(div).x +1;
	move(e);
	}
}
	
function posTdPuzzle(div){
var I=0,J=0,K=0;
var tr = div.parentNode;
var atd = tr.getElementsByTagName('TD');
	for (var i=0;i<atd.length;i++){
	if (atd.item(i)==div) I=i;
	}
var atable = tr.parentNode.parentNode;
var atr = atable.getElementsByTagName('TR');
	for (i=0;i<atr.length;i++){
	if (atr.item(i)==tr) J=i;
	}
	return {x: I, y: J};
}
function setTdPuzzle(){

atd = main.getElementsByTagName('TD');
var k = Math.round(Math.random()*15+1)
	for (var i=0;i<atd.length;i++){
	atd[i].innerHTML=String.fromCharCode(65+i);;
	}
	atd[atd.length-1].innerHTML="";
}
function swap(hole1,piece1)
{
    cells[hole1-1].innerHTML = cells[piece1-1].innerHTML;
    cells[piece1-1].innerHTML = "";
    hole = piece1;
}

function scramble()
{
    var scrandom = Math.floor(Math.random() * (150 - 128 + 1)) + 128;

for (var q = 0; q < scrandom; q++)
    {
        var r = Math.random();

if (r < 0.5)
        {
            hcol = (hole - 1) % 4;
            if (hcol == 0 || (r < 0.25 && hcol != 3))
            {
                t = hole;
            }
            else
            {
                t = hole - 2;
            }
        }
        else
        {
            hrow = Math.floor((hole - 1) / 4);
            if (hrow == 0 || (r < 0.75 && hrow != 3))
            {
                t = hole + 3;
            }
            else
            {
                t = hole - 5;
            }
        }

swap(hole, (t+1));
    }
}

function reset()
{
    hole = 16;
    setTdPuzzle();
}
function move(piece)
{
 
    var distance = hole - piece;

if (distance < 0)
    {
        distance = -(distance)
    }

if (distance == 1 || distance == 4 )
    {
		swap(hole,piece)
	}
}
function ZTm(){	
ZTmlInit();

main=document.getElementById("main");
main.onclick=call;	
	ta1 = document.createElement('TABLE');
	main.appendChild(ta1);
	ta1.bgColor="green";
	tbody = document.createElement('TBODY');
	ta1.appendChild(tbody);
	for(i=1;i<5;i++) {
	tr = document.createElement('TR');
	tbody.appendChild(tr);
		for(j=1;j<5;j++) {
		td = document.createElement('TD');
		td.className='tdpuz';
		td.bgColor = "red";
		td.style.color="yellow";
		tr.appendChild(td);
		td.innerHTML = (i-1)*4+j;
		td.width="30px";
		td.align="center";
		}
	}
	hole = 16;
	cells = main.getElementsByTagName('TD');
	setTdPuzzle();
	scramble();
			
}
]]>
</script>
</head>
     <body onload="ZTm();"><![CDATA[<div id=main><input type=button value=scramble>
<input type=button value=reset></div>
]]>
</body>
</html>
</ztmstudio>