|
|
ビリヤード風に画像を動かす |
| ビリヤード風に画像を動かします。 |
| 難易度：★★★★☆☆☆☆☆☆ |
| 【実行例】 何か画面で動いてる？ |
【リスト】<body onload="myBrowserCheck()">
<script language="JavaScript"><!--
myID = "myID_Tama"; // <DIV>のID名をセット
myTamaXsize = 40; // 画像のサイズ(X)をセット
myTamaYsize = 40; // 画像のサイズ(Y)をセット
myN6 = document.getElementById; // ブラウザ(N6)のチェック用
myIE = document.all; // ブラウザ(IE)のチェック用
myN4 = document.layers; // ブラウザ(N4)のチェック用
myObj = ""; // ブラウザオブジェクト退避用
myX = 0; // 玉の現在位置(X)
myY = 0; // 玉の現在位置(Y)
myXs = 0; // 玉の開始位置(X)
myYs = 0; // 玉の開始位置(Y)
myXe = 0; // 玉の最終位置(X)
myYe = 0; // 玉の最終位置(Y)
function myBrowserCheck(){
if (myIE || myN6 || myN4){ // ブラウザがIEorN6orN4なら
setInterval("myTamaMain()",100); // 0.1秒周期に動かす
}
}
function myTamaMain(){
if (myIE){
myObj = document.all[myID].style;
myXs = document.body.scrollLeft;
myYs = document.body.scrollTop;
myXe = myXs + document.body.clientWidth - myTamaXsize;
myYe = myYs + document.body.clientHeight - myTamaYsize;
mypx = "px";
}else if (myN6){
myObj=document.getElementById(myID).style;
myXs = pageXOffset;
myYs = pageYOffset;
myXe = myXs + innerWidth - myTamaXsize;
myYe = myYs + innerHeight - myTamaYsize;
mypx = "px";
}else if (myN4){
myObj = document[myID];
myXs = pageXOffset;
myYs = pageYOffset;
myXe = myXs + innerWidth - myTamaXsize;
myYe = myYs + innerHeight - myTamaYsize;
mypx = "";
}
// 玉の移動角度(方向)を決める
if (myX<=myXs) myAddX = Math.floor(Math.random()*20)+10;
if (myY<=myYs) myAddY = Math.floor(Math.random()*20)+10;
if (myX>=myXe) myAddX = (Math.floor(Math.random()*20)+10)*(-1);
if (myY>=myYe) myAddY = (Math.floor(Math.random()*20)+10)*(-1);
// 玉を移動
myX = myX + myAddX;
if (myX < myXs) myX=myXs;
else if (myX > myXe) myX=myXe;
myY = myY + myAddY;
if (myY < myYs) myY=myYs;
else if (myY > myYe) myY=myYe;
myObj.left = myX + mypx;
myObj.top = myY + mypx;
}
// --></script>
<div ID="myID_Tama" STYLE="position:absolute">
<img src="tama.gif">
</div>
|
| 画面上に画像をビリヤードのクッションのように動かしてみます。 【使い方】 <BODY>タグに、onload="myBrowserCheck()" を追加してください。 <IMG>タグにある画像ファイルを指定してください。 <img src="tama.gif"> スクリプト内の画像サイズをセットする変数に自分の画像のサイズをセットしてください。 myTamaXsize = 40; // 画像のサイズ(X)をセット myTamaYsize = 40; // 画像のサイズ(Y)をセット 以上で動くかな？ 【説明】 myBrowserCheck() にて、まず、IE5 , N4 , N6 のブラウザを判断します。対応ブラウザであれば、setInterval() で、0.1秒周期に玉を動かす関数 myTamaMain() を呼びます。 この関数( myBrowserCheck() ) を<BODY>タグに、onload にて呼び出して、初期起動させます。 myTamaMain() 内で、上下左右の端の座標を取得して、玉をその範囲内で動かします。 myXs は、左端のX座標を格納します。 myYs は、上端のY座標を格納します。 左上端は、(0 , 0) と思うでしょうが、画面がスクロールしてしまったら、(0 , 0)ではありません。その位置の左上端の座標を取得するためには、 IE なら、( document.body.scrollLeft , document.body.scrollTop ) NS なら、( window.pageXOffset , window.pageYOffset ) ← window. は、省略できます。 で取得できます。 IE) myXs = document.body.scrollLeft; myYs = document.body.scrollTop; NS) myXs = pageXOffset; myYs = pageYOffset; myXe は、右端のX座標を格納します。 myYe は、下端のY座標を格納します。 右下端の座標取得は、 IE なら、( document.body.clientWidth , document.body.clientHeight ) NS なら、( window.innerWidth , window.innerHeight ) で取得できます。 このときもスクロール時のことを考えて、それぞれに myXs , myYs を足して位置を求めます。 まだ、終わっていません。画像のサイズを忘れています。この時点で右下端に画像を表示したら、当然、枠外にハミ出てしまいます。 よって、画像サイズ (myTamaXsize , myTamaYsize)を引いた位置が右下端の位置となります。 IE) myXe = myXs + document.body.clientWidth - myTamaXsize; myYe = myYs + document.body.clientHeight - myTamaYsize; NS) myXe = myXs + innerWidth - myTamaXsize; myYe = myYs + innerHeight - myTamaYsize; この座標を0.1秒周期に毎回取得します。画面をスクロールされたり、ウィンドウサイズを延ばしたり、縮めたりされる可能性が当然あるもんね。(-o-メ)『ね』って。。 さて、ここからがプログラムです。玉をこの左上から右下の座標範囲内で動かすわけですが、どう動かしましょうか ^o^; 水平に動かすなら、X座標を足していけば動きます。 垂直に動かすなら、Y座標を足していけば動きます。 斜めに動かすなら、XとY座標を足していけば動きます。 これだけでは、ビリヤードのクッションには、まだ遠いですよね。 乱数を使いましょう。 サンプルでは、X方向、Y方向にそれぞれ、10〜20の範囲の乱数を作りました。 縦、横に１ピクセルずつ動かしていたら、やけに遅いので、0.1秒周期に10〜20ピクセル単位で動かしました。 乱数を使うことで、例えば、右に１ピクセル、下に３ピクセルとか、右に３ピクセル、下に２ピクセル移動と言ったふうに、斜めに微妙な角度が生まれます。 この移動が端にぶつかったら、再び乱数で角度を決めて、方向転換させるわけです。 if (myX <= myXs) myAddX = Math.floor(Math.random()*20)+10; X座標が左端にきたら、プラス方向に乱数を作る。 if (myX >= myXe) myAddX = (Math.floor(Math.random()*20)+10)*(-1); X座標が右端にきたら、マイナス方向に乱数を作る。マイナス１を掛けて負の値にするというのがポイントですね。 ってな、感じです。 座標指定に、”px” という、”単位” を記述しますが、styleプロパティがない N4 には記述しませんので、mypx という変数に、IE , N6 だけ "px" をセットして、N4 なら、"" をセットして使っています。 myObj.left = myX + mypx ; myObj.top = myY + mypx ; 今回のステップは、画面座標の取得の説明のおさらいなので、こんな、0.1秒周期で動くような酷なサンプルを実際に使わないでね。(-o-メ)『ね』ってコラ！ サンプル画像 （作成者は私なので、利用フリー。）
|
