zuerst mal der Link, damit ihr euch das angucken könnt.
http://aviaticusandfriends.de.ms
letzter punkt im menü... wenn man das whippetrennen in einem normalen fenster öffnen würde, stimmt die größe des fensters wegen der ganzen menubars usw nicht. musste um es firefox-sicher machen zu können ein resizeTo(); einbauen
und hier der Code dazu:
HTML
<html>
<head>
<title>Whippetrennen ©by Bad Admin</title>
<script type="text/javascript">
var startTime=new Date();
var endTime=new Date();
var timerID;
var time1;
var time2;
var time3;
var time4;
var Timer1;
var Timer2;
var Timer3;
var Timer4;
var speedz = new Array();
speedz[0]=38;
speedz[1]=43;
speedz[2]=50;
speedz[3]=57;
speedz[4]=62;
speedz[5]=69;
speedz[6]=40;
speedz[7]=45;
speedz[8]=50;
speedz[9]=30;
var time1=speedz[setspeed(speedz.length-1)];
var time2=speedz[setspeed(speedz.length-1)];
var time3=speedz[setspeed(speedz.length-1)];
var time4=speedz[setspeed(speedz.length-1)];
function setspeed(n){
zahl= Math.floor(Math.random()*(n+1));
return zahl;
}
//die responseStrings sollten verändert werden, um das Rennen an eure Bedürfnisse anzupassen
function remark(responseTime){
var responseString="";
if (screen.availWidth >= 1024){
if (responseTime < 7.0)
responseString="Kaum zu fassen, der ging ab wie ein Blitz und hat sogar den Hasen überholt...\neine richtige Kämpfernatur!";
if (responseTime >= 7.0 && responseTime < 8.0)
responseString="Ein verdammt schneller Hund!!!";
if (responseTime >=8.0 && responseTime < 9.0)
responseString="Whippets sind einfach ein Konzentrat!";
if (responseTime >=9.0 && responseTime < 10.0)
responseString="Nicht so schnell, wie sonst";
if (responseTime >=11.0 && responseTime < 12.0)
responseString="Dein Hund muss mehr trainieren";
if (responseTime >=12.0)
responseString="Der Hase war einfach zu schnell!!";
return responseString;
}
else{
if (responseTime < 9.0)
responseString="Kaum zu fassen, der ging ab wie ein Blitz und hat sogar den Hasen überholt...\neine richtige Kämpfernatur!";
if (responseTime >= 9.0 && responseTime < 10.0)
responseString="Ein verdammt schneller Hund!!!";
if (responseTime >=10.0 && responseTime < 11.0)
responseString="Whippets sind einfach ein Konzentrat!";
if (responseTime >=11.0 && responseTime < 12.0)
responseString="Nicht so schnell, wie sonst";
if (responseTime >=12.0 && responseTime < 13.0)
responseString="Dein Hund muss mehr trainieren";
if (responseTime >=13.0)
responseString="Der Hase war einfach zu schnell!!";
return responseString;
}
}
function raceover(){
var totalebreite = document.body.clientWidth;
endTime=new Date();
var responseTime=(endTime.getTime()-startTime.getTime())/1000;
clearTimeout(timerID);
clearTimeout(Timer1);
clearTimeout(Timer2);
clearTimeout(Timer3);
clearTimeout(Timer4);
alert(responseTime + " Sekunden auf " + totalebreite +" Pixel !!"+ "\n\n" + remark(responseTime));
}
function cleartimers(){
clearTimeout(Timer1);
clearTimeout(Timer2);
clearTimeout(Timer3);
clearTimeout(Timer4);
}
function rennwhippet1(){
var verborgenerLayer = document.getElementById("whippet1");
var layerPosition = parseInt(verborgenerLayer.style.left);
if (layerPosition < screen.availWidth) {verborgenerLayer.style.left = (layerPosition + 4) + "px"; Timer1 = setTimeout("rennwhippet1()", time1);}
else if (layerPosition >= (document.body.clientWidth-108)){ raceover();cleartimers();}
}
function rennwhippet2(){
var verborgenerLayer = document.getElementById("whippet2");
var layerPosition = parseInt(verborgenerLayer.style.left);
if (layerPosition < screen.availWidth) {verborgenerLayer.style.left = (layerPosition + 5) + "px"; Timer2 = setTimeout("rennwhippet2()", time2);}
else if (layerPosition >= (document.body.clientWidth-108)){ raceover();cleartimers();}
}
function rennwhippet3(){
var verborgenerLayer = document.getElementById("whippet3");
var layerPosition = parseInt(verborgenerLayer.style.left);
if (layerPosition < screen.availWidth) {verborgenerLayer.style.left = (layerPosition + 4) + "px"; Timer3 = setTimeout("rennwhippet3()", time3);}
else if (layerPosition >= (document.body.clientWidth-108)){raceover();cleartimers(); }
}
function rennwhippet4(){
var verborgenerLayer = document.getElementById("whippet4");
var layerPosition = parseInt(verborgenerLayer.style.left);
if (layerPosition < screen.availWidth) {verborgenerLayer.style.left = (layerPosition + 5) + "px"; Timer4 = setTimeout("rennwhippet4()", time4);}
else if (layerPosition >= (document.body.clientWidth-108)){ raceover(); cleartimers();}
}
function kaninflucht(){
if(screen.availWidth>=1024){
var verborgenerLayer = document.getElementById("rabbit");
var layerPosition = parseInt(verborgenerLayer.style.left);
if (layerPosition < document.body.clientWidth) {verborgenerLayer.style.left = (layerPosition + 5) + "px"; setTimeout("kaninflucht()", 30);}
}
else {
var verborgenerLayer = document.getElementById("rabbit");
var layerPosition = parseInt(verborgenerLayer.style.left);
if (layerPosition < document.body.clientWidth) {verborgenerLayer.style.left = (layerPosition + 5) + "px"; setTimeout("kaninflucht()", 35);}
}
}
function startrace(){
startTime=new Date();
kaninflucht();
rennwhippet1();
rennwhippet2();
rennwhippet3();
rennwhippet4();
}
function restart(){
top.location.reload();
}
</script>
<style type="text/css">
<!--
body{background-image: url(pix/Sand2.JPG); background-repeat: repeat;}
-->
</style>
</head>
<body text="#00FFFF" link="#00FF00" vlink="#FF0000" background="">
<p align="center">[img]pix/whippetrace.gif[/img]</p>
<input type="button" value="Whippets in den Startkasten" onClick="restart();" align="center" >
<input type="button" value="Rennen starten" onClick="startrace(); this.disabled='disabled';"></p>
<div style="position:absolute; top:215px; left:0px; z-index:3; height:250px; width:100px; background:#CCCCCC; color:#000000;">
<center>
Bahn 1
Bahn 2
Bahn 3
Bahn 4
</center>
</div>
<div id="rabbit" style="position:absolute; top:312px; left:100px; z-index:1;">
[img]pix/kaninchen1.gif[/img]
</div>
<div id="whippet1" style="position:absolute; top:250px; left:0px;z-index:2;">
[img]pix/whippet.gif[/img]
</div>
<div id="whippet2" style="position:absolute; top:300px; left:0px;z-index:2;">
[img]pix/whippet.gif[/img]
</div>
<div id="whippet3" style="position:absolute; top:350px; left:0px;z-index:2;">
[img]pix/whippet.gif[/img]
</div>
<div id="whippet4" style="position:absolute; top:400px; left:0px;z-index:2;">
[img]pix/whippet.gif[/img]
</div>
</body>
</html>
Alles anzeigen
natürlich kann man auch andres viechzeugs laufen lassen, dafür dann einfach die whippetgrafik (whippet.gif) austauschen. Natürlich steht es euch frei alle Grafiken zu verändern!
Wenn jemand dieses script verwendet, würde ich mich freuen, wenn ich namentlich erwähnt werde...