パネルをスライドさせてもとの配置に戻すゲームを作成してみよう。
記事を新しくしました。こちらを参照してください。
[実行例]
スタート画面
スタートボタンを押すとシャッフルされる。
15パズルの要領で移動させていく、動かせるパネルをクリックすると移動する。
完成するとComplete!の文字が表示される。
[作例]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>パネルパズル</title> <style> #table{ margin:0 auto; background:#eee; padding:10px; } td{ font-size:24px; text-align: center; width:60px; height:60px; line-height: 60px; border:2px solid #333; border-radius: 15px; background: #ddfeff; } td.empty{ background-color:#eee; border-color:#eee; } td.ok{ border-color:lightgreen; } #startBt{ display:block; width:200px; margin:0px auto; height:50px; box-shadow:0 3px 0 5px #777; } #startBt:hover{ cursor: pointer; opacity: 0.8; } #msgBox{ width:200px; margin:10px auto; text-align: center; font-size:20px; height:30px; line-height: 30px; } </style> </head> <body> <table id="table"></table> <p id="msgBox"></p> <button id="startBt">START</button> <script> 'use strict'; window.onload=function(){ var size=4; var shuffleCount; var panels; var isShuffled; var table=document.getElementById("table"); var msgBox=document.getElementById("msgBox"); var startBt=document.getElementById("startBt"); function init(){ shuffleCount=size*1000; isShuffled=false; panels=[]; table.textContent=null; msgBox.textContent=null; createStage(); } function createStage(){ for(var i=0;i<size;i++){ var tr=document.createElement("tr"); for(var j=0;j<size;j++){ var td=document.createElement("td"); var index=i*size+j; td.posId=index; td.textContent=index==size*size-1 ? "":index+1; td.onclick=click; if(index==size*size-1){ td.classList.add('empty'); } panels.push(td); tr.appendChild(td); } table.appendChild(tr); } } startBt.addEventListener("click",function(){ init(); shuffle(shuffleCount); }); function shuffle(shuffleCount){ for(var i=0;i<shuffleCount;i++){ click({target:{posId:Math.floor(Math.random()*size*size)}}); } isShuffled=true; } function click(e){ var pos=e.target.posId; if(pos-size>=0 && panels[pos-size].textContent==''){ swap(pos,pos-size); }else if(pos+size <size*size && panels[pos+size].textContent==''){ swap(pos,pos+size); }else if((pos+1) % size != 0 && panels[pos+1].textContent==''){ swap(pos,pos+1); }else if(pos % size !=0 && panels[pos-1].textContent==''){ swap(pos,pos-1); } } function swap(p1,p2){ var temp=panels[p1].textContent; panels[p1].textContent=panels[p2].textContent; panels[p2].textContent=temp; panels[p1].classList.add('empty'); panels[p2].classList.remove('empty'); check(); } function check(){ var okCount=0; for(var i=0;i<panels.length;i++){ if(panels[i].posId==parseInt(panels[i].textContent)-1){ okCount++; panels[i].classList.add("ok"); }else{ panels[i].classList.remove("ok"); } } if(isShuffled && okCount===size*size-1){ msgBox.textContent="Complete!"; } } init(); }; </script> </body> </html>
コメント