5.ランダムに表示してみる

5-1 星がいっぱい2

星がみんないっしょに降って来るのでは、ちょっと芸がないので、ランダム表示にしてみましょう。それと、ページの上の方だけでなく、下の方まで降って来るようにします。

5-2 星がいっぱい2のサンプル

ここに、ブログパーツを貼っています。本体は見えませんが、星がランダムに降っていると思います。また、下の方にスクロールしても、ずーと表示されていると思います。

5-3 ソースコード


<script type="text/javascript"><!--
var n=20;
var i;
var x = new Array();
var y = new Array();
var vy = new Array();
var ts = new Array();
document.open();
for(i=0;i<n;i++)
{
	document.write('<font color="#eeee33" size="20" id="text'+i+'" style="position: absolute; left: -100;">★</font>');
}
document.close();
for(i=0;i<n;i++)
{
	x[i] = Math.floor(Math.random()*document.body.clientWidth)-50;
	y[i] = Math.floor(Math.random()*document.body.clientHeight);
	vy[i] = 10+Math.floor(Math.random()*20);
	ts[i] = document.getElementById("text"+i).style;
}
setInterval(
	function()
	{
		for(i=0;i<n;i++)
		{
			ts[i].position = 'absolute';
			ts[i].top = y[i]+'px';
			ts[i].left = x[i]+'px';
			y[i] += vy[i];
			if(y[i]>document.body.clientHeight)
			{
				x[i] = Math.floor(Math.random()*document.body.clientWidth)-50;
				y[i] = 0;
				vy[i] = 10+Math.floor(Math.random()*20);
			}
		}
	}
,100);
void(0)
// --></script>

5-4 ソースコードの解説

青色が新しく付け足したで部分で、赤色が変更した部分です。横の位置を入れる配列と、縦の速度を入れる配列を、新しく作りました。これに、ランダムな値を入れて、星を表示しています。

ポイント1
ランダムな値は、Math.random()で得られます。でも、これは0〜1までの小数なので、例えば0〜20までの小数が欲しい時は20倍して使います。小数のままでは使いにくい時は、Math.floor()で囲って整数にします。

ポイント2
bodyの横幅は、document.body.clientWidthで得られます。

ポイント3
bodyの縦幅は、document.body.clientHeightで得られます。ただし、この命令が実行された時点での縦幅です。

このサンプルを改造して、自分のブログパーツを作りたいって人がいたら、自由に使ってくれてOKです。

< 4.もっと増やしてみる □ ホームページ □ 6.画像を使ってみる >