Mausverfolger Kometenspur

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Mausverfolger Kometenspur

Beitrag von Hape »

Hier ein Script das eine Kometenspur hinterläßt.

Hier das Script:

Code: Alles auswählen

<script>
/**** edit here ****/

	symbol=".";
	var anzahl=25;
	var farben=new Array("#FF0000","#00FF00","#0000FF","#FFFF00","#FF00FF","#00FFFF");
	g=0.2;			// -0.1 für aufsteigende blasen
	beschleunigt=true	// bei true wird im IE noch zusätzlich durch onmousemove beschleunigt
/*
	ein script von www.weristfelix.de (7/10/2002)
	fragen an felix@antifas.de
	viel spaß damit!

	(inspiriert vom mauseffekt aus dem Spiel "jardinains" zu finden auf fils4fun.de)
********************/

	var punkte=new Array
function init()
{
	neu=0;
	for(var x=0;x<anzahl;x++)erzeuge();
	setTimeout("beweg_dich()",100);
}
function erzeuge()
{
	punkte[neu]=new Array()
	punkte[neu]["objekt"]=document.createElement("span");
	punkte[neu]["symbol"]=document.createTextNode(symbol);
	punkte[neu]["objekt"].appendChild(punkte[neu]["symbol"]);
	document.body.appendChild(punkte[neu]["objekt"]);
	punkte[neu]["objekt"].style.color=farben[Math.floor(Math.random()*farben.length)];
	punkte[neu]["objekt"].style.position="absolute";
	punkte[neu]["objekt"].style.cursor="default";
	start(neu);
	darstellen(neu);
	neu++;
}

function darstellen(p)
{
	punkte[p]["objekt"].style.left	= punkte[p]["ox"]+punkte[p]["x"];
	punkte[p]["objekt"].style.top	= punkte[p]["oy"]-punkte[p]["y"];
}

function start(p)
{
	status=tempX+";"+tempY;
	dir=-Math.PI+Math.PI*2*Math.random();
	v0=1+2*Math.random();
	punkte[p]["x"]=0;
	punkte[p]["y"]=0;
	punkte[p]["ox"]=tempX;
	punkte[p]["oy"]=tempY+30;
	punkte[p]["objekt"].style.color=farben[Math.floor(Math.random()*7)];
	punkte[p]["vx"]=Math.sin(dir)*v0;
	punkte[p]["vy"]=Math.cos(dir)*v0;
}

function bewegung()
{
	for(var x=0;x<=punkte.length-1;x++)
	{
		punkte[x]["vy"]-=g;
		punkte[x]["x"]+=punkte[x]["vx"];
		punkte[x]["y"]+=punkte[x]["vy"];
		if(punkte[x]["y"]<-(100+Math.random()*100) || punkte[x]["y"]>(100+Math.random()*100) || punkte[x]["x"]>(50+Math.random()*100) || punkte[x]["x"]<-(50+Math.random()*100))start(x);
		darstellen(x);
	}
}
function beweg_dich()
{
	bewegung();
	setTimeout("beweg_dich()",50);
}
function bewege()
{
	if(beschleunigt&&IE)bewegung();	// netscape/mozilla verträgt den beschleunigungseffekt leider nicht...
}

//mauskoordinatenscript von jswelt

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = -300;
var tempY = -300;
function getMouseXY(e)
{
	if (IE)
	{ // grab the x-y pos.s if browser is IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	}else
	{
		// grab the x-y pos.s if browser is NS
		tempX = e.pageX;
		tempY = e.pageY;
	}  
	if (tempX < 0){tempX = 0;}
	if (tempY < 0){tempY = 0;}  
	return true;
}

</script>
In den Body-Tag bzw. Body-Tag gegen diesen austauschen:

Code: Alles auswählen

<body bgcolor="black" onload="init()" onmousemove="bewege()">
Demoseite: https://hapes-javascript-demo-page.hpag ... nspur.html

Antworten