-
Notifications
You must be signed in to change notification settings - Fork 0
/
minify.html
1 lines (1 loc) · 3.5 KB
/
minify.html
1
<!DOCTYPE html><html lang=ja><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><title>パズルゲーム</title><style>.p{position:absolute;background:#0ff;width:30px;height:30px;text-align:center;cursor:default}.field{position:absolute;background-color:bisque;left:0;top:0;width:145px;height:145px}.text{position:absolute;left:150px;top:0;line-height:2px}.space{position:absolute;left:0;top:145px;width:100%}</style><script>let pieces,field,ctrl,air,cnt,time;class piece{constructor(e){if(this.x=0,this.y=0,this.num=e,!e)return;let t=document.createElement("div");t.setAttribute("class","p");let c="b"+e;t.setAttribute("id",c),t.innerText=e,this.touchair=!1,field.appendChild(t),this.e=document.getElementById(c),this.e.onclick=e=>{if(detecttouch(),this.touchair){let e=this.x,t=this.y;this.setpos(air.x,air.y),air.setpos(e,t)}}}setpos(e,t){this.x=e,this.y=t,this.e&&(this.e.style.left=5+35*e+"px",this.e.style.top=5+35*t+"px")}}function detecttouch(){let e=[45,45,45,45],t=air.x,c=air.y;for(let i=0;i<15;i++){pieces[i].touchair=!1;let s=pieces[i].x,r=pieces[i].y;t+1!=s&&t-1!=s||c==r&&(pieces[i].touchair=!0,t+1==s&&(e[3]=i),t-1==s&&(e[1]=i)),c+1!=r&&c-1!=r||t==s&&(pieces[i].touchair=!0,c+1==r&&(e[2]=i),c-1==r&&(e[0]=i))}return e}function downkey(e){switch(0==cnt&&memhand(),e.key){case"w":case"ArrowUp":ctrl="↑",45!=detecttouch()[0]&&(pieces[detecttouch()[0]].e.click(),cnt++);break;case"a":case"ArrowLeft":ctrl="←",45!=detecttouch()[1]&&(pieces[detecttouch()[1]].e.click(),cnt++);break;case"s":case"ArrowDown":ctrl="↓",45!=detecttouch()[2]&&(pieces[detecttouch()[2]].e.click(),cnt++);break;case"d":case"ArrowRight":ctrl="→",45!=detecttouch()[3]&&(pieces[detecttouch()[3]].e.click(),cnt++)}document.querySelector("#cnt").innerText=cnt,document.querySelector("#ctrl").innerText=ctrl}function load(){document.onselectstart=()=>!1,field=document.querySelector(".field"),document.addEventListener("keydown",downkey),document.addEventListener("keyup",(e=>{ctrl="",document.querySelector("#ctrl").innerText=ctrl})),solve()}function scramble(){let e=["w","a","s","d"];for(let t=0;t<1e3;++t){downkey({key:e[Math.floor(1e3*Math.random())%4]})}ctrl=0,cnt=0,time=0,document.querySelector("#cnt").innerText=0,document.querySelector("#time").innerText=0}function memhand(){document.querySelector("#time").innerText=time/100,time++,0!=pieces[0].x||0!=pieces[0].y||1!=pieces[1].x||0!=pieces[1].y||2!=pieces[2].x||0!=pieces[2].y||3!=pieces[3].x||0!=pieces[3].y||0!=pieces[4].x||1!=pieces[4].y||1!=pieces[5].x||1!=pieces[5].y||2!=pieces[6].x||1!=pieces[6].y||3!=pieces[7].x||1!=pieces[7].y||0!=pieces[8].x||2!=pieces[8].y||1!=pieces[9].x||2!=pieces[9].y||2!=pieces[10].x||2!=pieces[10].y||3!=pieces[11].x||2!=pieces[11].y||0!=pieces[12].x||3!=pieces[12].y||1!=pieces[13].x||3!=pieces[13].y||2!=pieces[14].x||3!=pieces[14].y?setTimeout(memhand,10):alert("Clear!")}function solve(){document.querySelectorAll(".p").forEach((e=>{e.remove()})),pieces=Array(15),air=new piece(0),air.setpos(3,3);for(let e=0;e<15;++e)pieces[e]=new piece(e+1);let e=0;for(let t=0;t<4;++t)for(let c=0;c<4&&!(e>=15);++c)pieces[e].setpos(c,t),e++}</script><body onload=load()><div class=field></div><div class=text><p>パズルゲーム!</p><br><p>操作：矢印キーとWASDキーか<p>動かせるパズルをタッチ</p><br><br><button onclick=scramble()>パズルを混ぜる</button><br><button onclick=solve()>パズルを揃える</button></div><div class=space><p>操作：<span id=ctrl></span><p>回数：<span id=cnt></span><p>タイム：<span id=time></span></div>