Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.93 - ビリヤード風に画像を動かす


ビリヤード風に画像を動かします。


Step テーマ
● とくになし

実行例


何か画面で動いてる？



リスト


<script type="text/javascript"><!--
myTamaWidth = 40;// 画像の幅(ピクセル)
myTamaHeight = 40;// 画像の高さ(ピクセル)
 
myX = 0;// 玉の現在位置(X)
myY = 0;// 玉の現在位置(Y)
myXs = 0;// 玉の開始位置(X)
myYs = 0;// 玉の開始位置(Y)
myXe = 0;// 玉の最終位置(X)
myYe = 0;// 玉の最終位置(Y)
 
function myTamaMain(){
myObj=document.getElementById("tama").style;
myXs = document.body.scrollLeft;
myYs = document.body.scrollTop;
myXe = myXs +document.body.clientWidth - myTamaWidth;
myYe = myYs + document.body.clientHeight - myTamaHeight;
 
// 玉の移動角度(方向)を決める
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;
myObj.top = myY;
}
// --></script>
 
<DIV ID="tama" STYLE="position:absolute"><img src="tama.gif" width="40" height="40"></DIV>
<script type="text/javascript">
setInterval( "myTamaMain()", 100 );// 0.1秒周期に動かす
// --></script>



サンプルだけの HTMLは こちらへ

説明


画面上に画像をビリヤードのクッションのように動かしてみます。


球を設置して、スクリプトを setInterval にて グルグルさせます。
<DIV ID="tama" STYLE="position:absolute"><img src="tama.gif" width="40" height="40"></DIV>
<script type="text/javascript">
setInterval( "myTamaMain()", 100 );// 0.1秒周期に動かす
// --></script>


myTamaMain() 内で、上下左右の端の座標を取得して、玉をその範囲内で動かします。

myXs は、左端のX座標を格納します。
myYs は、上端のY座標を格納します。

左上端は、(0 , 0) と思うでしょうが、画面がスクロールしてしまったら、(0, 0)ではありません。
その位置の左上端の座標を取得するためには、
document.body.scrollLeft、document.body.scrollTop
で取得します。
window.pageXOffset、window.pageYOffset
は、スクロールバーの外側座標なので、やめときます。※ Step.74 参照
myXs = document.body.scrollLeft;
myYs = document.body.scrollTop;


myXe は、右端のX座標を格納します。
myYe は、下端のY座標を格納します。

右下端の座標取得は、
document.body.clientWidth、document.body.clientHeight
で取得します。
window.innerWidth、window.innerHeight
は、IE8以下が使えないので、やめときます。※ Step.74 参照
myXe = myXs +document.body.clientWidth - myTamaWidth;
myYe = myYs + document.body.clientHeight - myTamaHeight;
右下隅の座標は、球の画像サイズを引きます。


さて、ここからがプログラムです。
玉をこの左上から右下の座標範囲内で動かすわけですが、どう動かしましょうか ^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 (myY<=myYs) myAddY = Math.floor(Math.random()*20)+10;// Y座標が上端にきたら +方向に乱数を作る
if (myX>=myXe) myAddX = (Math.floor(Math.random()*20)+10)*(-1);// X座標が右端にきたら -方向に乱数を作る
if (myY>=myYe) myAddY = (Math.floor(Math.random()*20)+10)*(-1);// Y座標が下端にきたら -方向に乱数を作る


そんでもって、移動させるだけです。
// 玉を移動
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;
myObj.top = myY;


サンプル画像
tama.gif
(40*40)


参考ステップ
Step.14 九九の問題に答えてみましょう　※ 乱数:Math.random
Step.74 画面右下にリンクバナーを固定表示してみましょう　※ 座標
Step.92 マウスカーソルに何かくっつけましょう　
▲TOP


 
イヌでもわかるJavaScript講座 お品書き へ戻ります
▲TOP