Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【未完】JavaScriptで15パズルを作ろうかと思ったけど…

 どうも!LSSです!!

 

 今回はJavaScriptで15パズルを作ろうかと思ったけど作り切れなかった話」ですw

 

 

作り出そうとした時は既に21:30頃

で、日付が変わるまでに作ろうとしたんだから「そもそも無理があった」というのはありますがw(現在23:30)

 逆に、できそうな要因としては「実は過去(HTML4.0の時代)に作った事があった」というのもあります。

 結構惜しいところまでは出来たのと、いくつか記録として残したいところがあったので、実に中途半端な状態ですが晒してみますwww
※ちなみに、クリア判定はつけていません。

 

 

こちらがプレイ画面

 

 

 

コード

 

<style>
.box{
display:-ms-grid;
display:grid;
-ms-grid-columns:(75px)[4];
grid-template-columns:repeat(4,75px);
-ms-grid-rows:(75px)[4];
grid-template-rows:repeat(4,75px);
}
.km{
margin:1px;
border:2px solid black;
border-radius:10px;
background-color:#aaffaa;
text-align:center;
font-size:30pt;
}
</style>
<div id="gamen" class="box"> </div>
<script>
koma=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
az=0;
for(i=0;i<koma.length;i++){
 koma.push(koma.splice(Math.floor(Math.random()*(koma.length-i)),1));
}
gamen_w();
function gamen_w(){
 gamen.innerHTML='';
 for(i=0;i<16;i++){
  if(koma[i]==0){
   az=i;
   gamen.innerHTML+='<div></div>';
  }else{
   gamen.innerHTML+='<div class="km"><a href="#" onclick="clk('+i+');return false;">'+koma[i]+'</a></div>';
  }
 }
}
function clk(a){
 if(Math.floor(a/4)==Math.floor(az/4)){while(a!=az){koma[az]=koma[az+(a>az?1:-1)];koma[az+(a>az?1:-1)]=0;az+=(a>az?1:-1)};gamen_w();}
 if(a%4==az%4){while(a!=az){koma[az]=koma[az+(a>az?4:-4)];koma[az+(a>az?4:-4)]=0;az+=(a>az?4:-4)};gamen_w();}
}
</script>

 

  

自分メモとして有用そうなところ

.box{
display:-ms-grid;
display:grid;
-ms-grid-columns:(75px)[4];
grid-template-columns:repeat(4,75px);
-ms-grid-rows:(75px)[4];
grid-template-rows:repeat(4,75px);
}

 

IE対応の繰り返し指定のgridレイアウトのテンプレとして、有用そう。
(この例だと75pxの4行4列グリッド)

 

 

for(i=0;i<koma.length;i++){
 koma.push(koma.splice(Math.floor(Math.random()*(koma.length-i)),1));
}

 

一行で、代替変数を使用しない配列シャッフルのサンプル。

 

function clk(a){
 if(Math.floor(a/4)==Math.floor(az/4)){while(a!=az){koma[az]=koma[az+(a>az?1:-1)];koma[az+(a>az?1:-1)]=0;az+=(a>az?1:-1)};gamen_w();}
 if(a%4==az%4){while(a!=az){koma[az]=koma[az+(a>az?4:-4)];koma[az+(a>az?4:-4)]=0;az+=(a>az?4:-4)};gamen_w();}
}

 

 クリックした位置から、空きマスに向かうコマの移動を、二次元配列に頼らずに実装してみた例。※ただし可読性は大きく損なわれていますw

 

 

クリックして遊ぶ事はできます♪どこがダメかというと…

 出題が、単にランダムで順番を並べ替えているだけなんですが、果たしてこれで
「15パズルとして必ずクリアできるのか?」

が分からない、という根本的な問題に当たりましたwww

 

 昔、作った時には、最初のシャッフル時にも仮想的にランダムでコマを移動させていたので、
「必ず戻せる」
という前提の出題だったんですが、そこまで作り込む時間が無かった、という結果ですw

 

という事で、次回はこれを完成させたいと思います^^