..



 ■HomeJavaScriptサンプル集−ミニゲーム(箱入り娘(将棋版))

JavaScript 無料のフリースクリプト集...

javascript

↑遊べます↑
箱入り娘(将棋版)

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



1.プログラムと画像のダウンロード

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

一括ダウンロードファイル:hako.lzh

(【内訳】プログラムファイル 1個、画像ファイル 10個、実行HTMLファイル 1個)



2.<body>〜</body>タグ間の編集

 HTMLのゲームを表示したい部分に次の赤字を挿入してください。この作業はコピー&ペーストでもOKです。表示するHTMLと別のフォルダに画像やプロ グラムファイルを置く場合はsrcのファイル名にパスを通してください。
※ 「javascript」のリンク部分は削除しないで下さい(2008.6.2)


1.ゲーム画面の表示位置の設定

 画面の表示位置の設定は1〜2行目のgxgy の数値を変えます。デフォルトではIFRAMEタグを使って表示させているので座標は(0,0)になっています。HTMLに外部ファイルで直接読み込む 場合にここを調整します。


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

2.画像がクリックされた時の処理(51〜71行目)

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


3.マウスが動いた時の処理(73〜85行目)

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


4.駒の移動の処理(86〜109行目)

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


5.接触判定サブルーチン(110〜140行目)

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


6.リセットボタンを押した時の処理(141〜153行目)

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


7.クリアしたときの処理(154行目〜)

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


8.プログラムリスト(hako.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;' name='screen'>");
document.write("<img src='reset.gif' style='position:absolute;left:"+(gx+10)+"px;top:"+(gy+164)+"px;' name='reset' onclick='redraw()'>");

for(var i=0;i<8;i++)
{
   document.write("<img src='k"+i+".gif' style='position:absolute;left:-100px;' name='k"+i+"'>");
}
document.write("<img src='k6.gif' style='position:absolute;left:-100px;' name='k8'>");
document.write("<img src='k7.gif' style='position:absolute;left:-100px;' name='k9'>");
document.write("<div id='clear' style='position:absolute;left:"+(gx+11)+"px;top:"+(gy+60)+"px;font-size:34px;
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]+gx;
      document.images["k"+i].style.top=kz[i*2+1]+gy;
   }
var bw=0;// ブラウザチェック
if(document.getElementById){bw=1;}// ネスケ6〜 IE5〜なら真
if((document.all)&&(bw==1)){bw=2;}// IE4〜なら真

// イベントの設定
if(bw==2)// IEの場合
{
   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)// IEの場合
   {
      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)// IEの場合
   {
   mx=document.body.scrollLeft+event.clientX-ox-2;// マウスの座標を取得
   my=document.body.scrollTop+event.clientY-oy-2;
   }else{// ネスケの場合
   mx=e.pageX-ox-2;// マウスの座標を取得
   my=e.pageY-oy-2;
   }
}
// 駒の移動
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)>5){v=5;}// 駒がマウスカーソルに向かう
   if((x1-mx)>5){v=-5;}
   if((my-y1)>5){w=5;}
   if((y1-my)>5){w=-5;}
   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==40)&&(y1==104)){stageClear();}// 王将の座標でクリア判定
   setTimeout("komaMove()",5);
}
// 駒同士の接触判定
function hante(x1,y1,w1,h1)
{
   var obj2,x2,y2,w2,h2,dx,dy,dw,dh;
   if((x1<10+gx)||(x1>130-w1+gx)||(y1<14+gy)||(y1>164-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]+gx;
      document.images["k"+i].style.top=kz[i*2+1]+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+164)&&(clflag==true))
   {
      y++;
      obj.style.top=y;
   }
   if(clflag==true){setTimeout("clearDemo()",80);}
}



..


..