画像の変更によるロケットアニメーションを作成してみました.
<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>
(1)背景を描画する関数.
(2)32×32の背景ファイルbg.gifをfor文の二重ループで,横に3,縦に5並べて表示します.
(3)ロケットを描画する関数です.
(4)ここで,ロケット移動前に,現在位置のロケット画像rocket.gifを背景画像で消去します.
(5)上へ5回分移動したら下に戻します.
(6)背景画像をロケット画像と交換することにより,ロケットを移動先へ描画します.
(7)実行部