<style>
#screen {width:500px; height:500px; overflow:hidden; border:1px solid #888; position:relative;}
#screen .arrow {width:5px; height:5px; background-color:#f00; position:absolute;}
</style>

Counter <span id="counter"></span>
Arrows <span id="arrows"></span>
<p>
<input type=button onclick="app.func.start()" value=start>
<input type=button onclick="app.func.stop()" value=stop>
</p>

<div id="screen"></div>

<script>
function $(id)
{
return document.getElementById(id);
}

function classArrow(el)
{
this.visible = false;
this.el = el;
this.x;
this.y;
this.vx;
this.vy;
}

function classApp()
{
var root = this;
this.screen = [0,0,500,500];
this.max = 50;
this.timer = null;
this.timer_speed = 100;
this.timer_counter = 0;
this.arrows = [];
this.arrow_start = 5;
this.func   = {};

this.func.arrowMove = function (n)
	{
	var arr, x, y;
	arr = root.arrows[n];
	x = arr.x + arr.vx;
	y = arr.y + arr.vy;
	if (x>root.screen[2])
		{
		arr.visible = false;
		arr.x = -10;
		}
	root.arrows[n] = arr;
	root.func.arrowMoveCss(n);
	}

this.func.arrowMoveCss = function (n)
	{
	var arr;
	arr = root.arrows[n];
	arr.el.style.left = arr.x + 'px';
	arr.el.style.top  = arr.y + 'px';
	}

this.func.arrowReset = function (n,x,y)
	{
	var arr;
	arr = root.arrows[n];
	arr.x = 0;
	arr.y = root.screen[3]>>1;	// 50% screen-y
	arr.vx = 3 - Math.random(6);
	arr.vy = Math.random(10);
	arr.visible = true;
	root.arrows[n] = arr;
	}

this.func.arrowGroupCreate = function ()
	{
	var i, i_end, arr_el;
	i_end = root.max;
	for(i=0;i<i_end;i++)
		{
		arr_el = document.createElement('div');
		arr_el.className = 'arrow';
		arr_el.id = 'a'+i;
		arr_el.style.left = '-10px';
		$('screen').appendChild(arr_el);
		root.arrows[i] = new classArrow($('a'+i));
		}
	}

this.func.arrowGroupMove = function ()
	{
//alert('arrowsMove');
	var i, i_end, new_bool, j;
	root.timer_counter++;
	$('counter').innerHTML = root.timer_counter;
	new_bool = root.timer_counter==root.arrow_start;
	i_end = root.max;
	j = 0;
	for(i=0;i<i_end;i++)
		{
		if (root.arrows[i].visible==true)
			{
			root.func.arrowMove(i);
			j++;
			continue;
			}
		if (new_bool==false)
			{
			continue;
			}
		root.func.arrowReset(i);
		root.timer_counter = 0;
		new_bool = false;
		j++;
		}
	$('arrows').innerHTML = j;
	}

this.func.start = function()
	{
//alert('start');
	root.func.stop()
	root.timer_counter = 0;
	root.timer = setInterval(root.func.arrowGroupMove, root.timer_speed);
	}

this.func.stop = function()
	{
//alert('stop');
	if (root.timer!=null)
		{
		clearInterval(root.timer);
		}
	root.timer = null;
	}

this.func.init = function()
	{
	root.func.arrowGroupCreate();
	root.func.start()
	}
}

var app = new classApp();
app.func.init();
</script>