..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−デカゲーム(テニス)

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

javascript
テニス

 画面をクリックするとゲームスタート。マウスでラケットを左右に操作してボールを打ち返してください。打ち返すごとに得点し、 一定の得点をゲットするたびにボールが増えたりスピードが上り難易度が上がります。5回ミスをするとゲームオーバー。100点獲 得でマックススピードに突入します。

←遊べます!

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

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

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

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


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

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


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

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

1| tn_gx=0;// ゲーム画面の表示位置
2| tn_gy=0;

2.難易度の変更

 ゲームの難易度の変更するには以下のようにします。

2−1.最大ボール数を変える
 最大ボール数を変えるには8行目「8| tn_MaxBalls=6;// 最大のボール数」の数値を変えます。

2−2.ボールの増える点数を変える
 ボールは3点ごとに増えるように設定してあります。これを変更するには172行目 「172| if(tn_sc%3==0){tn_addBall();}// 3点ごとにボールを増やす処理」の%の後の数値を変えます。

2−3.ゲームスタート時のスピードを変える
 ゲームスタート時のスピードを変えるに119は行目「119| tn_interval=18;」 の数値を変えます。メインルーチンが呼び出される間隔を1000分の1秒単位で設定することができます。

2−4.スピードが上がる点数を変える
 スピードは7点ごとに増えるように設定してあります。これをを変更するには173行目 「173|  if((tn_sc%14==0)&&(tn_interval>16))// スピードを上げる処理」の%の後の数値を変えます。 スピードアップの上限の変更は後半の数値を変ます。

2−5.スピードアップの上限を変える
 スピードアップは173行目の条件式で1000分の12秒まで早くなるように設定しています。この数値を変えることでゲームの 最速を変えることができます。 「173| if((tn_sc%14==0)&&(tn_interval>16))// スピードを上げる処理」

2−6.スピードアップ1段階の幅を変える
 スピードアップは1000分の1秒ごと割り込み間隔を狭める設定にしてあります。これを変更するには175行目 「175| tn_interval--;// 割込間隔を短くしてゲームのスピードを上げる」を変更します。1000分の2秒ごとにする場合は 「tn_interval-=2」とします。

2−7.マックススピードに突入する点数と割り込み間隔を変える
 マックススピードの設定は179行の数値で決めています。スピードアップの上限を勘案して数値を設定してください。

3.プログラムリスト(tennisprog.js)

tn_gx=0;// ゲーム画面の表示位置
tn_gy=0;
tn_hisc=0;// ハイスコア
tn_sc=0;// スコア
tn_miss=0;// ミス
tn_rx=50;// ラケットの座標
tn_ry=132;
tn_MaxBalls=6;// 最大のボール数
tn_balls=new Array(tn_MaxBalls);// ボールがあるかないかのフラグ
tn_bx=new Array(tn_MaxBalls);// ボールの座標
tn_by=new Array(tn_MaxBalls);
tn_bv=new Array(tn_MaxBalls);//ボールの加速度
tn_bw=new Array(tn_MaxBalls);
tn_tgno=0;// デモ用 ターゲットのナンバー
tn_tgbx=0;// デモ用 ターゲットの座標
tn_mes=100;// メッセージ表示時間
tn_gameover=true;//ゲームオーバーのフラグ
tn_ovcount=0;// ゲームオーバー時のデモ表示カウント
tn_interval=10;// 割込間隔
var tnTimeId;// 割込ID
bw=0;// ブラウザチェック
if(document.getElementById){bw=1;}// ネスケ6〜 IE5〜なら真
if((document.all)&&(bw==1)){bw=2;}// IE4〜なら真

document.write("<img src='black.gif' width=123 height=158 style='position:absolute;left:-200px;' name='tn_screen' onClick='tn_start()'>");
for(var i=0;i<tn_MaxBalls;i++)
{
   document.write("<img src='white.gif' width=2 height=2 style='position:absolute;left:-100px;' name='tn_ball"+i+"'>");
}
document.write("<img src='white.gif' width=16 height=2 style='position:absolute;left:-100px;' name='tn_bar'>");
document.write("<img src='pjs_logo.gif' style='position:absolute;left:-100px;' name='tn_copyright' onclick='goHome()'>");
document.write("<div id='tn_over' style='position:absolute;left:-100;text-align: center;font-size:11px;color:rgb(255,255,255);'>GAME OVER</div>");
document.write("<div id='tn_score' style='position:absolute;left:-100;font-size:11px;color:rgb(255,255,255); '>SC:0</div>");
document.write("<div id='tn_hiscore' style='position:absolute;left:-100;font-size:11px;color:rgb(255,255,255);'>H I:0</div>");
document.write("<div id='tn_miss' style='position:absolute;left:-100;font-size:11px;color:rgb(255,255,255); '>Miss:5</div>");
document.write("<div id='tn_mes' style='position:absolute;left:-100;font-size:11px;color:rgb(233,233,0);'>SPEED UP!</div>");

tn_init();
function tn_init()
{
   if(bw==0)
   {
      alert("ブラウザバージョンが対応していません\n最新のブラウザに更新してください\n推奨バージョン(NN6〜,IE5〜)\n    +1JavaScript");
      return;
   }

   tn_demoinit();// デモ画面用に各変数の初期設定
   tn_gxset();
   document.onmousemove=tn_mouseMove;// マウスイベントの設定

   tn_main();// メインルーチン実行
}

function tn_demoinit()// 各変数の初期設定
{
   tn_miss=0;// ミスのリセット
   tn_ovcount=0;// ゲームオーバー後しばらく画面を動かすカウンタ
   tn_interval=11;// ゲームの早さ初期設定
   if(tn_sc>tn_hisc)// ハイスコアならハイスコアも加算
   {
      tn_hisc=tn_sc;
      document.getElementById("tn_hiscore").innerHTML="H I:"+tn_hisc
   }
   tn_sc=0;// スコアリセット
   document.tn_copyright.style.visibility="visible";// コピーライトの表示
   document.getElementById("tn_hiscore").style.visibility="visible";// ハイスコアの表示

   tn_mes=100;// メッセージ表示(0〜30で表示)
   tn_rx=50;// ラケットの座標
   for(var i=0;i<tn_MaxBalls;i++)// ボールの各変数の初期設定
   {
      tn_balls[i]=true;// ボールの状態を設定
      document.images["tn_ball"+i].style.left=-tn_gx-100;// ボールを画面外に表示(消す)
      tn_bx[i]=Math.floor(Math.random()*100)+10;// ボールの座標の初期設定
      tn_by[i]=Math.floor(Math.random()*64);
      tn_bv[i]=1;// ボールの加速度の初期設定
     if(Math.random()<0.5){tn_bv[i]=-tn_bv[i]}
      tn_bw[i]=1;
   }
   tn_serch();
}



function tn_gxset()
{
   document.tn_screen.style.left=tn_gx;// ゲーム画面表示位置
   document.tn_screen.style.top=tn_gy;
   document.tn_copyright.style.left=tn_gx+26;// コピーライト表示
   document.tn_copyright.style.top=tn_gy+100;
   document.tn_bar.style.left=tn_gx+tn_rx;// ラケット表示位置
   document.tn_bar.style.top=tn_gy+tn_ry;
   document.getElementById("tn_over").style.left=tn_gx+36;// ゲームオーバー表示位置
   document.getElementById("tn_over").style.top=tn_gy+42;
   document.getElementById("tn_hiscore").style.left=tn_gx+48;// ハイスコア表示位置
   document.getElementById("tn_hiscore").style.top=tn_gy+68;
   document.getElementById("tn_score").style.left=tn_gx+27;// スコア表示位置
   document.getElementById("tn_score").style.top=tn_gy+144;
   document.getElementById("tn_miss").style.left=tn_gx+70;// ミス表示位置
   document.getElementById("tn_miss").style.top=tn_gy+144;
   document.getElementById("tn_mes").style.left=tn_gx+32;// メッセージ表示位置
   document.getElementById("tn_mes").style.top=tn_gy+68;
}



function goHome()
{
   window.open("http://plusone.jpn.org/javascript/");
}




function tn_start()// ゲームスタートの設定
{
   if((tn_gameover==false)||(tn_ovcount>0)){return;}// ゲーム中もしくはゲームオーバー時のデモ画面の間はクリックされてもゲームを始めさせない
   tn_demoinit();// デモ用の各変数の初期設定
   tn_interval=18;
   for(var i=1;i<tn_MaxBalls;i++)
   {
      tn_balls[i]=false;
   }
   tn_by[0]=0;
   document.getElementById("tn_over").style.visibility="hidden";// ゲームオーバー表示を消す
   document.getElementById("tn_miss").innerHTML="Miss:"+tn_miss;// ミス表示リセット
   document.getElementById("tn_score").innerHTML="SC:"+tn_sc;// スコア表示リセット
   document.tn_copyright.style.visibility="hidden";// コピーライトを非表示
   document.getElementById("tn_hiscore").style.visibility="hidden";// ハイスコアの非表示

   tn_gameover=false;//ゲームオーバーのフラグをゲーム中の状態にする
}
function tn_serch()// デモ用 ターゲットにするボールを探す
{
      var ky=1000;
      for(var i=0;i<tn_MaxBalls;i++)// 一番近いボールを探す
      {
         if((tn_ry-tn_by[i]<ky)&&(tn_bw[i]==1)&&(tn_ry>tn_by[i]))
         {
            tn_tgno=i;
            ky=tn_ry-tn_by[i];
         }
      }
      tn_tgbx=tn_bx[tn_tgno]+tn_bv[tn_tgno]*ky;// ボールの着く場所を予測
      if(tn_tgbx<0){tn_tgbx=-tn_tgbx;}
      if(tn_tgbx>106){tn_tgbx=212-tn_tgbx;}
      tn_tgbx=tn_tgbx-8
}
function tn_main()// メインルーチン
{
   var tn_touch;// ボールが壁に接触しているかどうかのフラグ
   for(var i=0;i<tn_MaxBalls;i++)// ボールの移動
   {
      if(tn_balls[i]==false){continue;}// ボールが無い状態なら移動処理しないで繰り返し処理
      tn_bx[i]+=tn_bv[i];// ボールの座標に加速度を加算
      tn_by[i]+=tn_bw[i];
      if((tn_bx[i]<1)||(tn_bx[i]>120))// ボールと壁の接触判定
      {
         tn_bv[i]=-tn_bv[i];// ボールが壁に接触していればX軸の加速度を反転させる
         tn_touch=true;// ボールと壁の接触フラグをたてる
      }else{tn_touch=false;}
      if(tn_by[i]<1){tn_bw[i]=-tn_bw[i];}// ボールが一番上にきたらY軸の加速度を反転させる
      if(tn_by[i]>155){tn_misssyori(i);}// ボールが下にすり抜ければミスの処理
      if((tn_by[i]==tn_ry-2)&&(Math.abs(tn_bx[i]-tn_rx-8)<10))// ボールとラケットの接触判定
      {
         if((Math.random()<0.5)&&(tn_touch==false)){tn_bv[i]=-tn_bv[i];} // X軸方向はたまに逆に跳ね返る処理
         tn_bw[i]=-tn_bw[i];// Y軸方向の加速度も反転
         if(tn_gameover==false)// ゲームオーバー時のデモ画面でばければスコアを加算
         {
            tn_sc++;// スコアを加算
            document.getElementById("tn_score").innerHTML="SC:"+tn_sc;// 得点表示
            if(tn_sc%3==0){tn_addBall();}// 3点ごとにボールを増やす処理
            if((tn_sc%14==0)&&(tn_interval>16))// スピードを上げる処理
            {
               tn_interval--;// 割込間隔を短くしてゲームのスピードを上げる
               tn_mes=0;// 「スピードアップ」メッセージ表示処理
               document.getElementById("tn_mes").innerHTML="SPEED UP!";
            }
            if(tn_sc==100)// 100点獲得でマックススピードに突入
            {
               tn_interval=15;
               tn_mes=0;
               document.getElementById("tn_mes").innerHTML="MAX SPEED";
            }
         }
      }
      document.images["tn_ball"+i].style.left=tn_gx+tn_bx[i];// ボールの表示位置変更
      document.images["tn_ball"+i].style.top=tn_gy+tn_by[i];
   }
   if((tn_gameover==true)&&(tn_ovcount==0))// デモでラケットを自動に動かす
   {
      tn_serch();// ターゲットを探す
      if((tn_rx<tn_tgbx)&&(tn_rx<106)){tn_rx+=2;}
      if((tn_rx>tn_tgbx)&&(tn_rx>0)){tn_rx-=2;}
   }
   document.tn_bar.style.left=tn_gx+tn_rx;
   if(tn_mes<30)// メッセージ表示の処理
   {
      document.getElementById("tn_mes").style.visibility="visible";// メッセージを表示
      tn_mes++
   }else{
      document.getElementById("tn_mes").style.visibility="hidden";// メッセージを非表示
   }
   if(tn_ovcount==1)// ゲームオーバー時のデモ画面が終われば通常時のデモ画面に戻す処理
   {
      tn_demoinit();
   }else{
      if(tn_ovcount>0){tn_ovcount--;}// ゲームオーバー時のデモ画面のカウント中はカウンタを減算
   }
   tnTimeId=setTimeout("tn_main()",tn_interval);// 割込処理
}
function tn_mouseMove(e)// ラケットの移動処理
{
   if(tn_gameover==true){return;}
   if(bw==1){tn_rx=e.pageX-tn_gx-8;}else{tn_rx=document.body.scrollLeft+event.clientX-tn_gx-8;}
   if(tn_rx>106){tn_rx=106;}
   if(tn_rx<1){tn_rx=1;}
}
function tn_addBall()// ボール加算処理
{
   for(var j=0;j<tn_MaxBalls;j++)
   {
      if(tn_balls[j]==false)// 無い状態のボールが見つかれば変数を再設定
      {
         tn_bx[j]=Math.floor(Math.random()*100)+5;
         tn_by[j]=Math.floor(Math.random()*64)+2;
         tn_bv[j]=1;
         tn_bw[j]=1;
         if(Math.random()<0.5){tn_bv[j]=-tn_bv[j];}
         tn_balls[j]=true;
         break;// 繰り返し処理を抜ける
      }
   }
}
function tn_misssyori(n)// ミスした時の処理
{
   tn_bx[n]=-tn_gx-100;// 座標を画面の外に設定して消す
   document.images["tn_ball"+n].style.left=-100;
   if(tn_gameover==false)// デモ中はミスを加算しない
   {
      tn_mes=0;//「ミス」メッセージ表示処理
      document.getElementById("tn_mes").innerHTML="  MISS!";
      tn_miss++;// ミスをカウントする
      document.getElementById("tn_miss").innerHTML="Miss:"+tn_miss;// ミス数の表示
   }
      tn_balls[n]=false;// ミスしたボールがない状態にする
      if(tn_miss==5)// ミスがある数を超えたらゲームオーバーの処理
   {
      tn_over()
   }else{
      var m=0;
      for(var i=0;i<tn_MaxBalls;i++)// 現在無い状態のボールの数をカウントする
      {
         if(tn_balls[i]==false){m++;}
      }
      if((m==tn_MaxBalls)||((tn_gameover==true)&&(tn_ovcount==0))){tn_addBall ();}// ボールが0個の場合はボールを増やす処理
   }
}
function tn_over()// ゲームオーバーの処理
{
   tn_gameover=true;// ゲームオーバーを示すフラグをたてる
   tn_ovcount=80;// ゲームオーバー時のデモをカウントする変数設定
   tn_rx=-tn_gx-100;// ラケットを画面から消す
   document.getElementById("tn_over").style.visibility="visible";// 「ゲームオーバー」の表示
}

..


..