..
　■Home−JavaScriptサンプル集−デカゲーム−箱入り娘（将棋版）
+1JavaScript　無料のフリースクリプト集...

◇箱入り娘（将棋版）

　スライドパズルの基本形、「箱入り娘」の将棋の駒バージョン＆デカバージョンです。クリックで動かす駒を決定して駒をスライドさせて王 将を下の出口から脱出させるとクリアです。左下のリセットボタンを押すといつでも最初からやり直すことができます。一応、今のところ確認で きている最小ステップは８１ステップです。

 ←遊べます！

◇１．プログラムと画像のダウンロード

　適当なフォルダかゲームを表示するＨＴＭＬのあるフォルダに下記のプログラムと画像・実行ＨＴＭＬを解答して下さい。サーバーにアップする時も これらがばらけないように同じフォルダに入れて下さい。次のリンクを右クリックして「対象をファイルに保存」を選ぶとダウンロードできます。
一括ダウンロードファイル：hako_d.lzh

（【内訳】プログラムファイル　１個、画像ファイル　１０個、実行ＨＴＭＬファイル　１個）


◇２．＜ｂｏｄｙ＞〜＜／ｂｏｄｙ＞タグ間の編集

　ＨＴＭＬのゲームを表示したい部分に次の赤字を挿入してください。この作業はコピー＆ペーストでもOKです。表示するＨＴＭＬと別のフォルダに画像やプロ グラムファイルを置く場合はｓｒｃのファイル名にパスを通してください。

<body>・・・
<iframe src="hakogame_d.html" width="420" height="522" frameborder="0" scrolling="no " allowtransparency="true">
</iframe>
・・・</body>
◇１．ゲーム画面の表示位置の設定

　画面の表示位置の設定は１〜２行目のgxとgy の数値を変えます。デフォルトではIFRAMEタグを使って表示させているので座標は（０，０）になっています。ＨＴＭＬに外部ファイルで直接読み込む 場合にここを調整します。


1| gx=0;//　ゲーム画面の位置
2| gy=0;

◇２．画像がクリックされた時の処理（５６〜７６行目）

　画像がクリックされた時に、その画像オブジェクトが駒だった時にそのオブジェクトとオフセットの座標を取得しています。


◇３．マウスが動いた時の処理（７８〜９０行目）

　マウスが動いた時に、駒が選択されていてゲームをクリアした状態でなければ、グローバル変数mx,myにマウスの座標を取得しています。


◇４．駒の移動の処理（９１〜１１４行目）

　駒が選択されている時に、その駒がマウスの座標に向かうように処理しています。駒によって縦と横の幅が違うので汎用の接触判定サブルーチンを 呼び出して接触の判定をしています。駒が王将の場合出口の座標になった時にステージクリアの処理を呼び出します。


◇５．接触判定サブルーチン（１１５〜１４５行目）

　駒同士が接触しているかどうかここで判定しています。


◇６．リセットボタンを押した時の処理（１４６〜１５８行目）

　リセットボタンの画像をクリックするとこの関数が呼び出されてゲームをリセットします。


◇７．クリアしたときの処理（１５９行目〜）

　ゲームをクリアした時に王将が出口から出て行くデモを実行します。


◇８．プログラムリスト(hako_d.js)

var gx=0;//　ゲーム画面の座標
var gy=0;
var obj,ox,oy,mx,my;//　クリックされたイメージオブジェクト、オフセット座標
var msflag=false;//　駒を選択しているかのフラグ
var clflag=false;//　クリアフラグ
kz=[
40,14,//　王将
10,14,//　角
100,14,//　飛車
10,74,//　金
100,74,//　銀
40,74,//　桂馬
40,104,//　香左
10,134,//　歩左
70,104,//　香右
100,134//　歩右
];
//　画像の読み込み
document.write("<img src='hakoback.gif' style='position:absolute;left:"+gx+"px;top:"+gy+"px;width:420px;height:522px;' name='screen'>");
document.write("<img src='reset.gif' style='position:absolute;left:"+(gx+10)+"px;top:"+(gy+492)+"px;width:84px;height:30px;' name='reset' onclick='redraw()'>");
document.write("<div id='pjs' style='position:absolute;left:"+(gx+129)+"px;top:"+gy+"px;font-size:30px;'><a href='http://plusone.jpn.org/javascript/' target='_blank'>+1JavaScript</a></div>");

document.write("<img src='k0.gif' style='position:absolute;left:-100px;width:180px;height:180px;' name='k0'>");
document.write("<img src='k1.gif' style='position:absolute;left:-100px;width:90px;height:180px;' name='k1'>");
document.write("<img src='k2.gif' style='position:absolute;left:-100px;width:90px;height:180px;' name='k2'>");
document.write("<img src='k3.gif' style='position:absolute;left:-100px;width:90px;height:180px;' name='k3'>");
document.write("<img src='k4.gif' style='position:absolute;left:-100px;width:90px;height:180px;' name='k4'>");
document.write("<img src='k5.gif' style='position:absolute;left:-100px;width:180px;height:90px;' name='k5'>");
document.write("<img src='k6.gif' style='position:absolute;left:-100px;width:90px;height:90px;' name='k6'>");
document.write("<img src='k7.gif' style='position:absolute;left:-100px;width:90px;height:90px;' name='k7'>");
document.write("<img src='k6.gif' style='position:absolute;left:-100px;width:90px;height:90px;' name='k8'>");
document.write("<img src='k7.gif' style='position:absolute;left:-100px;width:90px;height:90px;' name='k9'>");
document.write("<div id='clear' style='position:absolute;left:"+(gx+33)+"px;top:"+(gy+90)+"px;font-size:102px;
color:rgb(255,255,255);visibility:hidden;'><b>CLEAR!</b></div>");
   for(var i=0;i<10;i++)//　整列
   {
      document.images["k"+i].style.left=kz[i*2]*3+gx;
      document.images["k"+i].style.top=kz[i*2+1]*3+gy;
   }
var bw=0;//　ブラウザチェック
if(document.getElementById){bw=1;}// ネスケ６〜　IE５〜なら真
if((document.all)&&(bw==1)){bw=2;}//　IE４〜なら真

//　イベントの設定
if(bw==2)//　ＩＥの場合
{
   document.onmousedown=msDown;//　ボタンが押されたら･･･
   document.onmousemove=msMove;//　マウスが動いたら･･･
}else{//　ネスケの場合
   window.captureEvents(Event.mousedown);//　ボタンが押されたら･･･
   document.onmousedown=msDown;
   window.captureEvents(Event.mousemove);//　マウスが動いたら･･･
   document.onmousemove=msMove;
}
komaMove();

//　ボタンが押された時に実行する関数
function msDown(e)
{
   if((msflag==true)||(clflag==true)){msflag=false;obj.border=0;return;}
   if(bw==2)//　ＩＥの場合
   {
      ox=event.offsetX;//　マウスのオフセット座標を取得
      oy=event.offsetY;
      obj=event.srcElement;//　クリックされたイメージオブジェクトを取得
   }else{//　ネスケの場合
      ox=e.layerX;//　マウスのオフセット座標を取得
      oy=e.layerY;
      obj=e.target;//　クリックされたイメージオブジェクトを取得
   }
   if((obj.style.left==false)||(obj==document.images["screen"])||(obj==document.images["reset"]))
{msflag=false;obj.border=0;return;}
   obj.border=1;//　クリックされたイメージを線で囲む
   mx=parseInt(obj.style.left);
   my=parseInt(obj.style.top);
   msflag=true;//　選択されたのでフラグをセット
   komaMove();
}

//　マウスが動いた時に実行する関数
function msMove(e)
{
   if((msflag==false)||(clflag==true)){return;}//　選択中以外は除外
   if(bw==2)//　ＩＥの場合
   {
   mx=document.body.scrollLeft+event.clientX-ox-6;//　マウスの座標を取得
   my=document.body.scrollTop+event.clientY-oy-6;
   }else{//　ネスケの場合
   mx=e.pageX-ox-6;//　マウスの座標を取得
   my=e.pageY-oy-6;
   }
}
//　駒の移動
function komaMove()
{
   var x1,y1,w1,h1,x2,y2,w2,h2,dx,dw,dy,dh,obj2,v,w;
   if((msflag==false)||(clflag==true)){return;}//　選択中以外は除外
   x1=parseInt(obj.style.left);//　駒の座標
   y1=parseInt(obj.style.top);
   v=0;
   w=0;
   if((mx-x1)>15){v=15;}//　駒がマウスカーソルに向かう
   if((x1-mx)>15){v=-15;}
   if((my-y1)>15){w=15;}
   if((y1-my)>15){w=-15;}
   w1=obj.width;
   h1=obj.height;
   x1+=v;
   if(hante(x1,y1,w1,h1)==false){x1-=v;}//　駒同士の接触判定
   y1+=w;
   if(hante(x1,y1,w1,h1)==false){y1-=w;}
   obj.style.left=x1;//　イメージの座標を変更
   obj.style.top=y1;
   if((obj==document.images["k0"])&&(x1==120)&&(y1==312)){stageClear();}//　王将の座標でクリア判定
   setTimeout("komaMove()",5);
}
//　駒同士の接触判定
function hante(x1,y1,w1,h1)
{
   var obj2,x2,y2,w2,h2,dx,dy,dw,dh;
   if((x1<30+gx)||(x1>390-w1+gx)||(y1<42+gy)||(y1>492-h1+gy)){return false;}//　枠外に動こうとしているときはリターン
   for(i=0;i<10;i++)
   {
      obj2=document.images["k"+i];
      x2=parseInt(obj2.style.left);
      y2=parseInt(obj2.style.top)
      w2=obj2.width;
      h2=obj2.height;
      if(obj==obj2){continue;}
      if(w1==w2)
      {
         if(x1<x2){dx=x2-x1;dw=w1;}else{dx=x1-x2;dw=w1;}
      }else{
         if(x1<x2){dx=x2-x1;dw=w1;}else{dx=x1-x2;dw=w2;}
      }
      if(h1==h2)
      {
         if(y1<y2){dy=y2-y1;dh=h1;}else{dy=y1-y2;dh=h1;}
      }else{
         if(y1<y2){dy=y2-y1;dh=h1;}else{dy=y1-y2;dh=h2;}
      }
      if((dx<dw)&&(dy<dh))
      {
         return false;
      }
   }
}
//　リセットボタンを押した時の処理
function redraw()
{
   msflag=false;
   clflag=false;
   obj.border=0;
   document.getElementById("clear").style.visibility="hidden";
   for(var i=0;i<10;i++)
   {
      document.images["k"+i].style.left=kz[i*2]*3+gx;
      document.images["k"+i].style.top=kz[i*2+1]*3+gy;
   }
}
//　クリアしたときの処理
function stageClear()
{
   msflag=false;
   clflag=true;
   obj.border=0;
   document.getElementById("clear").style.visibility="visible";
   clearDemo();
}
//　王将が出て行くデモ画面
function clearDemo()
{
   var y=parseInt(obj.style.top);
   if((y<gy+492)&&(clflag==true))
   {
      y+=3;
      obj.style.top=y;
   }
   if(clflag==true){setTimeout("clearDemo()",80);}
}



..

..