ひな形スクリプト講座4

では早速前回の方法2のスクリプトを考えてみましょう。

[方法2]
もしLeftが0より大きい時、
もし現在のLeftにix差し引いた値が0より小さい時には、Leftを0にする。
そうでない時は現在のLeftにix差し引いた値をLeftにする。
そうでない時、処理を終了させる(関数から抜ける）

でしたね。

もしLeftが0より大きい時・・・if(img1.style.pixelLeft>0){
もし現在のLeftにix差し引いた値が0より小さい時 Leftを0にする・・・if(img1.style.pixelLeft-ix<0){img1.style.pixelLeft=0}
そうでない時は現在のLeftにix差し引いた値をLeftにする・・・else{img1.style.pixelLeft-=ix}
そうでない時、処理を終了させる・・・else{return}
}
これを繰り返し実行するようにsetTimeout()メソッドも使用して、関数にします。ここでは前回のように右へ左へ移動のスクリプトにしたものを解答例にしておきます。

左右行ったりきたり

さて、ちょっと速すぎな気がしますので、移動ピクセル数を5に、setTimeout()の時間を0ミリ秒ではなく、10ミリ秒にしてみましょう。おっととここで10と直接書き換えては面白くないので、変数を使用して設定できるようにしましょうか。

変数rtimeにミリ秒数を設定して、それをsetTimeout()の時間にしましょう。

変数はvar キーワードで確保して使用するでしたね。コメントで説明入れておきましょう。
var rtime=10//繰り返し実行時間（ミリ秒）

またアキアカネの画像サイズが大きいので、Widthを100ピクセルにしましょうか。
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px; width:100px">

ではこれでサンプル見てみましょう。

サンプル

さあ今度は上下運動させてみましょうか。でも少し今までの動きを振り返ってみてください。左右に動かすことと上下に動かすことはほとんど同じようなスクリプトになりそうだと想像出来ませんか？Leftの値をスクリプトで変更して左右移動していたのですから、Topの値を変更すると上下運動しそうですね。

では図でも描いてみましょうか？

まず下に移動する場合ですが、これは右に移動とほとんど同じです。また上に移動するのは左に移動とほとんど同じです。これは容易に理解できますよね。そこで移動するピクセル数をiyとして、変数を使用して右移動する関数を利用して書き換えてみましょう。上に移動する関数をuidou()とし、下に移動する関数をdidou()として作成してみます。

尚、表示領域(body)の縦サイズはdocument.body.clientHeight、エレメントの縦サイズはobject.clientHeight、エレメントのTopはobject.style.pixelTopというプロパティを使用します。

var iy=5//一度に動くピクセル数（縦）
function didou(){//下移動する関数
if(img1.style.pixelTop+iy>=document.body.clientHeight-img1.clientHeight){
   if(img1.style.pixelTop<document.body.clientHeight-img1.clientHeight){
       img1.style.pixelTop=document.body.clientHeight-img1.clientHeight
   }else{
       uidou()
       return
   }
}else{
   img1.style.pixelTop+=iy
}
setTimeout("didou()",rtime)
}

function uidou(){//上移動する関数
if(img1.style.pixelTop>0){
   if(img1.style.pixelTop-iy<0){
       img1.style.pixelTop=0
   }else{
       img1.style.pixelTop-=iy
   }
   setTimeout("uidou()",rtime)
}else{
didou()
return
}
}

didou()//下移動関数スタート
</script>

ほとんど書き換えただけで出来上がりました。

これを左右移動するスクリプトと一緒にしてしまいましょう。

跳ね返りスクリプト

どうでしょうか？跳ね返りして動きますね。動きが複雑そうなものも実は単純な動きが組み合わさっているだけということがほとんどなんですね。左右にバウンドして動くものと、上下にバウンドして動くものが同時に実行されているだけなんですね。

第５回は乱数を扱ってみましょう。