- <DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- div
- {
- position:absolute;
- width:100px;
- height:100px;
- border:5px solid black;
- }
- div img
- {
- width:100px;
- height:100px;
- }
- </style>
- <script>
- function Generator()
- {
- var num=4, newdiv, divIdName;
- for(var i=0;i<num;i++)for(var j=0;j<num;j++)
- {
- newdiv=document.createElement('div');
- divIdName='a'+i+j;
- newdiv.setAttribute('id', divIdName);
- newdiv.style.top=100+100*j+'px';
- newdiv.style.left=100+100*i+'px';
- if(i*j!=9)
- newdiv.innerHTML="<img src='ragnaros_"+j+"_"+i+".png'>";
- newdiv.addEventListener('click', function(){ graj(this);});
- document.body.appendChild(newdiv);
- }
- }
- function graj(x)
- {
- var bufor;
- if(x.style.top==a33.style.top&&
- (parseInt(x.style.left || 0)+100+'px'==a33.style.left||parseInt(x.style.left || 0)-100+'px'==a33.style.left))
- {
- bufor=x.style.left;
- x.style.left=a33.style.left;
- a33.style.left=bufor;
- }
- if(x.style.left==a33.style.left&&
- (parseInt(x.style.top || 0)+100+'px'==a33.style.top||parseInt(x.style.top || 0)-100+'px'==a33.style.top))
- {
- bufor=x.style.top;
- x.style.top=a33.style.top;
- a33.style.top=bufor;
- }
- }
- var TabId=['a00','a01','a02','a03','a10','a11','a12','a13','a20','a21','a22','a23','a30','a31','a32','a33'];
- var TabPos=[[100,100],[200,100],[300,100],[400,100],[100,200],[200,200],[300,200],[400,200],[100,300],[200,300],[300,300],[400,300],
- [100,400],[200,400],[300,400],[400,400]];
- function mieszaj(){
- var i=0, x;
- var TabLos=[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
- while(i<16)
- {
- x=Math.floor(Math.random()*16);
- if(TabLos[x]==1)
- {
- document.getElementById(TabId[i]).style.left=TabPos[x][0]+'px';
- document.getElementById(TabId[i]).style.top=TabPos[x][1]+'px';
- i++;
- TabLos[x]=0;
- }
- }
- }
- </script>
- </head>
- <body onload="Generator()">
- <input type="button" value="mieszaj" onclick="mieszaj()">
- </body>