Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <meta charset='us-ascii'>
- <title>rotate4</title>
- <style>
- html{background-color:black;}
- body{text-align:center;}
- #board{position:relative;background-color:#101020;color:white;font-size:25px;width:8em;height:8em;display:inline-block;-moz-user-select:none;-webkit-user-select:none;}
- #board .piece{transition:left 0.2s,top 0.2s,color 0.2s;transition-timing-function:ease-in-out;position:absolute;width:1.52em;height:1.52em;line-height:1.52em;font-family:"Ubuntu Mono";font-weight:bold;margin:0.2em;border:0.04em solid #444;background-color:black;}
- #board .interface{position:absolute;top:0;left:0;opacity:0;width:100%;height:100%;border:none;padding:0;cursor:default;}
- </style>
- </head>
- <body>
- <div id='board'></div>
- <div>
- <button>toggle mouse input</button>
- </div>
- <script>
- var B=document.getElementById('board');
- var I;
- var divs=[];
- var state=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
- var letters='abcdefghijklmnop';
- function init()
- {
- for(var i=0;i<4;i++)
- for(var j=0;j<4;j++)
- {
- var div=document.createElement('div');
- div.className='piece';
- div.textContent=letters[i*4+j];
- B.appendChild(div);
- divs.push(div);
- }
- redraw();
- I=document.createElement('input');
- I.className='interface';
- B.appendChild(I);
- I.addEventListener('click',click,false);
- I.addEventListener('contextmenu',click,false);
- I.addEventListener('keydown',key,false);
- I.focus();
- }
- function scramble()
- {
- state=[0];
- for(var i=1;i<16;i++)
- {
- var r=Math.floor(Math.random()*(i+1));
- state[i]=state[r];
- state[r]=i;
- }
- }
- function redraw()
- {
- for(var i=0;i<4;i++)for(var j=0;j<4;j++)
- {
- var x=state[i+j*4]%4,y=state[i+j*4]>>2;
- divs[x+y*4].style.left=i*2+'em';
- divs[x+y*4].style.top=j*2+'em';
- divs[x+y*4].style.color=(i===x&&j===y)?'#9f9':'white';
- }
- }
- function move(x,y,ccw)
- {
- var a=x+4*y,b=a+4,c=a+5,d=a+1;
- if(ccw){b=a+1;d=a+4;}
- state[a]=[state[b],
- state[b]= state[c],
- state[c]= state[d],
- state[d]= state[a]][0];
- }
- function autoplay()
- {
- if(autoqueue.length===0)return;
- else
- {
- var m=autoqueue.shift();
- var x=m%3,y=(m-x)/3%3,ccw=Math.floor(m/9);
- move(x,y,ccw);
- redraw();
- setTimeout(autoplay,200);
- }
- }
- var autoqueue=[];
- function click(e)
- {
- e.preventDefault();
- var x=e.clientX-B.offsetLeft,y=e.clientY-B.offsetTop;
- var unit=2*parseInt(getComputedStyle(B).fontSize);
- x/=unit;
- y/=unit;
- if(x<0.5||x>=3.5||y<0.5||y>=3.5)return false;
- /*if(x<0.5)x=1;
- if(x>=3.5)x=3;
- if(y<0.5)y=1;
- if(y>=3.5)y=3;*/
- move(Math.floor(x-0.5),Math.floor(y-0.5),e.shiftKey^(e.type==='contextmenu'));
- redraw();
- }
- function key(e)
- {
- e.preventDefault();
- var keymap={
- 55:0,56:1,57:2,71:3,67:4,82:5,72:6,84:7,78:8,//dvorak
- 85:3,73:4,79:5,74:6,75:7,76:8,//qwerty
- 36:0,38:1,33:2,37:3,12:4,39:5,35:6,40:7,34:8,//numpad, numlock off
- 103:0,104:1,105:2,100:3,101:4,102:5,97:6,98:7,99:8//numpad, numlock on
- };
- if(e.keyCode in keymap)
- {
- var m=keymap[e.keyCode];
- move(m%3,(m-m%3)/3,e.shiftKey);
- redraw();
- }
- }
- init();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement