簡単なアニメーション

Index

　　画像の変更によるロケットアニメーションを作成してみました。

【例】

　　<HEAD>
　　　　<SCRIPT TYPE="text/JavaScript">
　　　　<!--
　　　　var cnt = 4;
　　　　function BckGrnd()　　　// (1)
　　　　{
　　　　　　var i, j;
　　　　　　for( i = 0; i < 5; i++ ) {
　　　　　　　　for( j = 0; j < 3; j++ ) {　　　　// (2)
　　　　　　　　　　document.write("<img src='../../img/2/bg.gif'>");
　　　　　　　　}
　　　　　　　　document.write( "<br>" );
　　　　　　}
　　　　}
　　　　function DrawRocket()　// (3)
　　　　{
　　　　　　// (4)
　　　　　　document.images[1+3*(4-cnt)].src = "../../img/2/bg.gif";
　　　　　　cnt++;
　　　　　　if( cnt == 5 ) {
　　　　　　　　cnt=0;　　// (5)
　　　　　　}
　　　　　　// (6)
　　　　　　document.images[1+3*(4-cnt)].src = "../../img/2/rocket.gif";
　　　　　　setTimeout( "DrawRocket()" , 600 );
　　　　}
　　　　//-->
　　　　</SCRIPT>
　　</HEAD>
　　<BODY>
　　<SCRIPT TYPE="text/JavaScript">
　　<!--
　　BckGrnd();
　　DrawRocket();　　// (7)
　　//-->
　　</SCRIPT>
　　</BODY>
【解説】

　　基本的に JavaScript の関数の定義やグローバルな変数は、<HEAD></HEAD> 内
　に記述します。また、画像 <IMG> は自動的に images 配列として順番に
　割り当てられます。

　(1) 背景を描画する関数。
　(2) 32×32 の背景ファイル bg.gif を for 文の二重ループで、横に 3、縦に 5 並
　    べて表示します。
　(3) ロケットを描画する関数です。
　(4) ここで、ロケット移動前に、現在位置のロケット画像 rocket.gif を背景画像で
　    消去します。
　(5) 上へ 5 回分移動したら下に戻します。
　(6) 背景画像をロケット画像と交換する事により、ロケットを移動先へ描画します。
　(7) 実行部
【実行結果】