• ダウンロードと使用方法
• プログラムの解説

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

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




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

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

◇１．ゲーム画面の表示位置の設定

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


◇２．難易度の変更

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

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

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

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

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

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

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

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

◇３．プログラムリスト(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;//　割込ＩＤ bw=0;//　ブラウザチェック if(document.getElementById){bw=1;}// ネスケ６〜　IE５〜なら真 if((document.all)&&(bw==1)){bw=2;}//　IE４〜なら真 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("<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.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_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 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.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];//　ボールが壁に接触していればＸ軸の加速度を反転させる          tn_touch=true;//　ボールと壁の接触フラグをたてる       }else{tn_touch=false;}       if(tn_by[i]<1){tn_bw[i]=-tn_bw[i];}//　ボールが一番上にきたらＹ軸の加速度を反転させる       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)//　１００点獲得でマックススピードに突入             {                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 ();}//　ボールが０個の場合はボールを増やす処理    } } function tn_over()//　ゲームオーバーの処理 {    tn_gameover=true;//　ゲームオーバーを示すフラグをたてる    tn_ovcount=80;//　ゲームオーバー時のデモをカウントする変数設定    tn_rx=-tn_gx-100;//　ラケットを画面から消す    document.getElementById("tn_over").style.visibility="visible";//　「ゲームオーバー」の表示 }