簡単なアニメーション

Index

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

［例］

	<head>
	<script language="JavaScript">
	<!--
	var cnt = 4
	function BckGrnd(){		//(1)
		var i , j;
		for( i = 0; i < 5; i++ ){
			for( j = 0; j < 3; j++ ){
				document.write("<img src='../img/bg.gif'>");	//(2)
	
			}
			document.write( "<br>" );
		}
	}
	function DrawRocket(){		//(3)
		document.images[1+3*(4-cnt)].src = "../img/bg.gif";	//(4)
		cnt++;
		if( cnt==5 ) cnt=0;	//(5)
		document.images[1+3*(4-cnt)].src = "../img/rocket.gif";	//(6)
		setTimeout( "DrawRocket()" , 600 );
	}
	//-->
	</script>
	</head>

	<body>
	<script language="JavaScript">
	<!--
		BckGrnd();
		DrawRocket();	//(7)
	//-->
	</script>
	</body>

【解説】

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

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

【実行結果】

1998(C) Motonari Morikawa