Puzzle Num

<?xml version="1.0" encoding="utf-8"?>
<ztmstudio ztmbiew="on">
   <ztml>
     <lang>
       <fr>
         <title><![CDATA[Puzzle.Numerique]]>
</title>
         <srchlp><![CDATA[<DIV><b>Puzzle</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>
         <mybody><![CDATA[<a  href="https://ztmstudio.com" >ZTmStudio.com</a>
<div> </div>
<div id="main"><input type=button value=scramble>
<input type=button value=reset></div>]]>
</mybody>
</fr>
       <en>
         <title><![CDATA[Numeric.Puzzle]]>
</title>
         <srchlp><![CDATA[<DIV><b>Puzzle</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>
         <mybody><![CDATA[<a  href="https://ztmstudio.com" >ZTmStudio.com</a>
<div> </div>
<div id="main"><input type=button value=scramble>
<input type=button value=reset></div>]]>
</mybody>
</en>
</lang>
</ztml>
   <html>
     <head><![CDATA[<title>Puzzle Num</title>
<meta charset="utf-8" />
<meta name="viewport" id="viewport" content="width=device-width, user-scalable=no" />
<meta name="description" content="Ztmstudio est l'environnement de développement intégré pour le développement d'applications Javascript.,Editeur Xml, Applications javascript "/>
  <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:35px;width:80px;height:80px}
]]>
</style>
       <script><![CDATA[
function ZTmCreate(){

main=document.getElementById("main");

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();
}
call =function (event)	{
var div=ZTmEvent(event).target;

if (event.type =='click' && div.nodeName=='IMG'){
         if(/window-x/.test(div.src)) ZTmMain.ztmview.clear();
    }
	if (event.type =='click' && div.nodeName=='TD'){
              if(/ztmtitle/.test(div.className)) {
              ZTmHlpRun();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);
	}
}

atd = main.getElementsByTagName('TD');
var k = Math.round(Math.random()*15+1)
	for (var i=0;i<atd.length;i++){
	atd[i].innerHTML=i+1;
	}
	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)
	}
}
]]>
</script>
       <script.ztm><![CDATA[function ZTm() {
ZTmlInit();    // ZTmMain.xmlDo
ZTmView();

doc =ZTmValueTag(ZTmlDoc,ZTmLang,'mybody');
ZTmMain.ztmview = ZTmMain.create();
ZTmMain.ztmview.title=ZTmValueTag(ZTmlDoc,ZTmLang,'title');
ZTmMain.ztmview.srchlp=ZTmValueTag(ZTmlDoc,ZTmLang,'srchlp');
ZTmMain.ztmview.create(); 
ZTmMain.ztmview.icon='wx';ZTmicons.create();
ZTmMain.ztmview.icon='zt';ZTmicons.createbox1();

ZTmMain.ztmview.corps.innerHTML=doc;

ZTmCreate();
	
ZTmMain.ztmview.box2.onclick=call; 
ZTmMain.ztmview.corps.onclick=call;						
}]]>
</script.ztm>
</head>
     <body onload="ZTm();"><![CDATA[
]]>
</body>
</html>
</ztmstudio>