飛び回る球体

　三つの関数を作成します。さらにクラスを一つ追加します。

• Initialize(id_body)関数 :: loadイベント発生時に呼び出して初期化を行います。
• Start() 関数　:: Initialize関数から呼び出して、画像の位置を計算して表示します。
• Size_Changed() 関数 :: resizeイベントに対応してウィンドウサイズを取得します。
• Sphere クラス　 :: イメージオブジェクトや画像の位置、サイズ等を保持します。

　グローバル変数とクラスの宣言です。画像の位置を記憶させたりイメージオブジェクトを保持するために、クラスにしてひとまとめにしています。これをもとに、必要分インスタンスをつくって画像を表示させることになります。
　変数の宣言の部分では、各種設定を変更することができます。nSpan ではスピードを調整することができます。画像の種類（aURI）と画像数（nSphere）は増やすことも減らすことも可能です。互いの数を一致させる必要もありません。また、画像が一度に動く距離は、配列 aMoveX と aMoveY の中から、画像ごとにランダムに選択されます。この数値も変更したり要素を増減させることができます。
　なお、これらの数値は、この宣言部で設定すれば、関数内を見直す必要はありません。

// Sphere クラス
function Sphere() {
     this.X = 0;                 // 現在のX座標(単位：px)
     this.Y = 0;                 // 現在のY座標(単位：px)
     this.MoveX = 5;          // 現在のX方向の移動距離(px)
     this.MoveY = 3;          // 現在のY方向の移動距離(px) 
     this.ImgW = 32;          // 画像の幅(px)
     this.ImgH = 32;           // 画像の高さ(px)
     this.Image = null;        // イメージオブジェクト
}

// 変数
var bIE;                           // ブラウザが IE かどうか（true | false）
var bIE6std;                     // ブラウザが IE6標準モード かどうか（true | false）
var nWidth;                     // 表示領域の幅(px)
var nHeight;                    // 表示領域の高さ(px)

var aMoveX = new Array(3, 4, 5, 6); // 移動距離(X):方向転換時 ランダムに選択(px)
var aMoveY = new Array(2, 3, 4, 5); // 移動距離(Y):方向転換時 ランダムに選択(px)
var nSpan = 70;                            // 移動の間隔(ミリ秒)

var aSphere;                                // Sphere オブジェクトの配列
var nSphere = 4;                          // 画像の数
var aURI = new Array("obj_ball_r.gif","obj_ball_g.gif","obj_ball_b.gif","obj_ball_s.gif");  // 画像のURI 

　ブラウザによって表示領域のサイズの取得の仕方が異なるので、ブラウザの識別が必要になります。ここではユーザーエージェントからブラウザを割り出しています。詳しくは「ブラウザの識別」のページを見てください。
　Size_Changed関数は、表示領域のサイズを取得するためのものです。ウィンドウサイズが変更される（resizeイベントが発生する）たびにこの関数が呼び出されて再計算を行います。
　なお、Math.random で 0〜1 までの乱数を取得できます。また、Math.round では、小数点以下を四捨五入した整数値を得ることができます。

// 初期化
function Initialize(id_body) {
     if (!document.getElementById) return;  // バージョンチェック(IE5以上/NN6以上)

     // ブラウザの識別
     var ua = navigator.userAgent;
     var nHit = ua.indexOf("MSIE");
     bIE = (nHit >=  0);
     bIE6std = bIE && 
                  (ua.substr(nHit+5, 1) == "6") && 
                  (document.compatMode=="CSS1Compat");
     // 表示領域のサイズの取得
     Size_Changed();

     // オブジェクトの初期化
     var oParent = document.getElementById(id_body);      // 親オブジェクトの特定
     aSphere = new Array(nSphere);                               // オブジェクト配列
     var i;
     for (i=0; i<aSphere.length; i++) {
          aSphere[i] = new Sphere();                                 // Sphereオブジェクトの生成
          aSphere[i].Image = new Image();                          // イメージオブジェクトの生成
          aSphere[i].Image.src = aURI[i % aURI.length];         // イメージURIの取得
          aSphere[i].Image.style.position = "absolute";        // 絶対配置モードに設定
          aSphere[i].X = Math.round(Math.random() * nWidth);   // X座標の初期値
          aSphere[i].Y = Math.round(Math.random() * nHeight);  // Y座標の初期値
          oParent.appendChild(aSphere[i].Image);                // 親オブジェクトに追加
     }

     Start();                      // 画像の移動を開始
}

// ウィンドウサイズの取得
function Size_Changed() {
     if (bIE6std) {                 /* IE6標準モードの場合 */
          nWidth = document.documentElement.clientWidth;
          nHeight = document.documentElement.clientHeight;
     } else if (bIE) {              /* IE の場合 */
          nWidth = document.body.clientWidth;
          nHeight = document.body.clientHeight;
     } else {                        /* IE 以外の場合 */
          nWidth = window.innerWidth;
          nHeight = window.innerHeight;
     }
} 

　画像を動かす関数です。まず、X座標とY座標を計算してみて、個別にチェックを行います。それぞれ、表示領域の端に達したら、はみ出した部分を折り返させます。そして、配列 aMoveX または aMoveY から、移動距離(MoveX または MoveY)を新たに取得します。この時、移動距離の符号に気を配る必要があります。
　このようにして座標の値が算出できたら、実際の画像の位置を設定するプロパティ(left, top)に値を代入し、最後にタイマーを設定します。

// 画像の移動
function Start() {
    var i;
    for (i=0; i<aSphere.length; i++) 
    {
        // 移動先のX座標・Y座標の計算
        aSphere[i].X += aSphere[i].MoveX;
        aSphere[i].Y += aSphere[i].MoveY;

        // X座標のチェック
        if (aSphere[i].X <= 0) {                                              /* 左端の折り返し */
            aSphere[i].X -= aSphere[i].MoveX;
            aSphere[i].MoveX = aMoveX[Math.round(Math.random() * (aMoveX.length-1))];
        } else if (aSphere[i].X >= (nWidth - aSphere[i].ImgW)) {     /* 右端の折り返し */
            aSphere[i].X -= aSphere[i].MoveX;
            aSphere[i].MoveX = -aMoveX[Math.round(Math.random() * (aMoveX.length-1))];
        }

        // Y座標のチェック
        if (aSphere[i].Y <= 0) {                                              /* 上端の折り返し */
            aSphere[i].Y -= aSphere[i].MoveY;
            aSphere[i].MoveY = aMoveY[Math.round(Math.random() * (aMoveY.length-1))];
        } else if (aSphere[i].Y >= (nHeight - aSphere[i].ImgH)) {     /* 下端の折り返し */
            aSphere[i].Y -= aSphere[i].MoveY;
            aSphere[i].MoveY = -aMoveY[Math.round(Math.random() * (aMoveY.length-1))];
        }

        // 画像の位置を設定
        aSphere[i].Image.style.left = aSphere[i].X + "px";
        aSphere[i].Image.style.top = aSphere[i].Y + "px";
    }
    setTimeout("Start()", nSpan);                // タイマーの設定
} 

　Initialize関数をbodyタグのロードイベントに、Size_Changed関数をリサイズイベントに結び付けます。この時、id 属性値の設定と指定が必要になります。

<body id="body1" style="background-color:#ffffcc" 
     onload="Initialize('body1')" onresize="Size_Changed()">
     <form name="form1" style="text-align:right">
     <input type="button" value="　CLOSE　" onclick="window.close()"/> 
     </form>
</body>