星降る夜

説　　明
星が画面上から下へ落下します。落下させる星の数だけ<img>タグを用意し、スクリプトで星の数だけ指定された方向に移動させます。
注意事項
下記サンプルの赤字部分が画像ファイル名、青文字が星を表示する座標、緑文字が星の移動速度および方向になっています。それぞれの状況に応じて書き換えてください。

■動作雰囲気チェック　>>実行
サンプル
 <html>
<head>
<title>星降る夜</title>
<style type="text/css"><!--
#star1 { position:absolute;left:-100px;top:0px; }
#star2 { position:absolute;left:-100px;top:0px; }
#star3 { position:absolute;left:-100px;top:0px; }
#star4 { position:absolute;left:-100px;top:0px; }
#star5 { position:absolute;left:-100px;top:0px; }
--></style>
<script language="JavaScript"><!--
x = [50,200,140,350,460];
y = [-100,50,200,400,330];
dx = 1.8; //　移動速度および方向
dy = 10; //　落下速度
function fallStar()
{
for (i=1; i<6; i++)
{
n = i-1;
x[n] = x[n] + dx;
y[n] = y[n] + dy;
x[n] = x[n] % document.body.clientWidth;
y[n] = y[n] % document.body.clientHeight;
if (x[n] < -50) x[n] = document.body.clientWidth;
document.images["star"+i].style.pixelLeft = x[n];
document.images["star"+i].style.pixelTop = y[n];
}
}
// --></script>
</head>
<body onload="setInterval('fallStar()',100)">
<img src="star.gif" id="star1">
<img src="star.gif" id="star2">
<img src="star.gif" id="star3">
<img src="star.gif" id="star4">
<img src="star.gif" id="star5">
</body>
</html>