事例紹介−３：画像を動かす
| トップ | 概 説 | 記述の仕方 | 事例： | １．メッセージ | ２．画像の入替 | ３．画像を動かす | ４．見積計算 |
この例は、ＨＰではあまり使われないかもしれませんが、JavaScriptの勉強事例として、配列（アレー） や if 、画像を自由な位置に移動、タイマーなどの紹介です。尚、FireFoxでは動作しませんので実用的ではないので、個人的な遊びやＩＥ限定のゲームなどは組めそうです。
(1)画像がアニメションしながら動きます
| a b c d e f g h i j k l m n o p q r |
left=2; tm=setInterval("anime()",0); gazo=new Array(2); for (var i=0;i<2;i++){ gazo[i]=new Image(); gazo[i].src="image/heri"+(i+1)+".gif"; } ctr=0; function anime(){ heri.style.pixelLeft+=left; document.pic.src=gazo[ctr].src; ctr++; if(ctr==2){ctr=0; } if(heri.style.pixelLeft>320) {startAnime(); } } function startAnime(){ clearInterval(tm); heri.style.pixelLeft=-90; heri.style.pixelTop=50; tm=setInterval("anime()",40); } |
使用画像は 2 個、｢透過GIF｣です。 
|
| A B |
<body bgcolor="lightblue" onload="startAnime()"> <IMG name="pic" src="image/heri1.gif" id="heri" style="position:absolute; top:50;left:0;" width="117" height="49"> |
|
a b c def g h i j k l m n o pq r A B |
変数 left に初期値2を代入：画像を1コマ動かすピクセル数 変数 tm に関数 amime() 用のタイマーの初期値 0 を設定 配列用の領域 gazo に動かす画像の数の分 2 個を設定 繰り返し処理 for で画像を配列領域に入れる。 var i=0 は i を変数定義し初期値 0。 i が 2 より小さい間 i++ （ i=i+1）を繰り返す → 2回繰り返す。 image/heri"+(i+1)+".gif は、1回目は、image/heri1.gif 2回目は、image/heri2.gif になる。 変数 ctr は、表示画像を切り替えるカウント用で、初期値 0 画像を動かす関数 anime() の開始 画像の左位置 heri.style.pixelLeft に left の値を加算 変数 ctr の値に対する配列内画像 gazo[ctr] が表示される 変数 ctr に、プラス 1 変数 ctr が 2 になったら 0 にクリア 画像の左位置が 320 を超えたら、関数 startAnime() を実行 アニメーションを初期状態に戻す関数 startAnime() を実行 タイマー変数 tm をクリア 画像の位置を初期設定に。heri.style.pixelLeft=-90 → 左位置 -90pxに、heri.style.pixelTop=50;上の位置 50px 変数タイマー tm に、40 をセット： 40 はミリ秒（1000分の1） 1000にすると 1 秒単位に onload="startAnime()" で body以下が読み込まれると、関数startAnime() が実行される 画像を配置：position:absolute で絶対位置指定しています |
(2)参考：動きに変化を持たせます
上記の例は、pixelLeftによって右に動かしています。右に動いた位置からpixelTopを使い上下に 動かすことも出来ます。
参考例