JavaScript応用１

  1. 跳ねるボール


    1. 目的

      Javascript で枠で跳ね返るボールをアニメーション表示します。

    2. タイマーイベント

      アニメーションを行うにはタイマーイベントを利用します。
      　setTimeout("moveBall()",50);
      で、50m秒後に　moveBall() 関数を呼び出します。moveBall() 関数の中で再度この呼び出しを行うと、moveBall() 関数を連続して呼び出すことができます。

    3. ボール画像の位置の設定

      ボールを表示するにはボールの画像を用意し
      <IMG SRC="ball.gif" ID="myBall" >
      で組み込むます。<head>部でmyBallのスタイルを設定し、position属性を付加してボールの位置を設定できるようにします。
      <STYLE TYPE="text/css">
<!--
#myBall { position:absolute; top:100px; left:100px; }
-->
</STYLE>
      これで、次のようにボールの位置を取得できます。
      　cx = myBall.style.posLeft;
      　cy = myBall.style.posTop;
      また、cx、cy を設定後、次のようにmuBallの表示位置を設定できます。
      　myBall.style.posLeft= cx;
      　myBall.style.posTop = cy;

    4. 移動、跳ね返り処理

      ボールの移動速度を予め　vx,vy に設定しておきます。一定時間間隔で
      　myBall.style.posLeft= cx;
      　myBall.style.posTop = cy;
      を実行すれば、myBall画像が一定速度で移動します。
      跳ね返り処理を行うには、表示枠のサイズを取得する必要があります。
      　Wx = window.document.body.clientWidth ;
      　Wy = window.document.body.clientHeight
      で、ブラウズのウインドウのサイズを取得できます。
      　跳ね返り処理は、cxが負またはWxを超えたとき、vx の符号を反転させることで実現できます。
      　if(cx<0 || cx>Wx) {vx = -vx;}
      　if(cy<0 || cy>Wy) {vy = -vy;}

  2. プログラム


    1. プログラムの構成

      　<head>部に、画像の style 、および、関数 init と moveBall を組み込みます。<Body>の OnLoadイベントで init() 関数を呼び出します。ここで、setTimeout() を行いタイマーイベントでmoveBall（）を起動します。以後、moveBall() でボール画像の移動、跳ね返りを行います。Bodeタグの style="overflow : hidden;" は、スクロールバーを隠します。これをしないと、ボールの跳ね返り時にスクロールバーが現れます。
      　

    2. ソース

      　moveBall()関数で、コメントになっている if(alertcount<10) を有効にすると、最初の10回の呼び出しで、cx,cy の値をアラートボックスで表示します。アラートボックス はデバッグに便利な機能です。
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">

<TITLE>跳ねるボール</TITLE>
<STYLE TYPE="text/css">
<!--
#myBall { position:absolute; top:100px; left:100px; }
--></STYLE>

<SCRIPT Language="JavaScript">
<!--
//枠で跳ね返るボールを表示する
var vx,vy;
var Wx,Wy;
var cx,cy;
var alertcount;

//1時刻経過後の画像位置を更新
function moveBall()
{
    cx = myBall.style.posLeft;
    cy = myBall.style.posTop;

   /*if (alertcount<10) {
     alert("cx:"+cx+" cy:"+cy);//チェック用
     alertcount++;
    }*/
   
   //移動
    cx += vx;
    cy += vy;
   //反射
    if(cx<0 || cx>Wx) {vx = -vx;}
    if(cy<0 || cy>Wy) {vy = -vy;}
   
    myBall.style.posLeft= cx;
    myBall.style.posTop = cy;
    //document.write("cx:",cx," cy:",cy,"<br>");
    setTimeout("moveBall()",50);
}

//初期設定
function init()
{
  vx=3;
  vy=3;
  alertcount=0;
  
  Wx = window.document.body.clientWidth ;
  Wy = window.document.body.clientHeight ;
  
 myBall.style.posLeft= 100;
 myBall.style.posTop = 20;

 setTimeout("moveBall()",50);
 //alert("Wx:"+Wx+" Wy:"+Wy+"<br>");
}

// -->
</SCRIPT>
</HEAD>

<BODY style="overflow : hidden;" onLoad="init()">
 跳ねるボール<BR>
<IMG SRC="ball.gif" ID="myBall" >
</BODY>
</HTML>

    3. デモ

      こちらから実行できます。画面全体を移動します。画面サイズを変更した場合、ブラウザの「更新」をしてください。デモで利用している ball.gif はこちらの画像です。


    4. 参考

      　マウスイベントに伴う画像移動プログラム(イベント処理 IV)と多くの共通点があります。また、timeout()処理は文字のスクロール表示（イベント処理のIII）と同じ手法です。
      跳ね返り処理を少し高度にすると、花散らしのプログラムになります。また、ゲーム仕立てにするとテニスゲームプログラムに応用できます。