Teste deine Schnelligkeit
 Spielregeln:

1. Drücke den Knopf, wenn du bereit bist.

2. Warte auf die grüne Ampel und bleibe dabei mit der Maus im gelben Feld.

3. Drücke alle Knöpfe sobald die Ampel grün zeigt.

4. Die benötigte Zeit wird dir angezeigt.

 __________dies ist ein link____________

Dein Ergebnis:

 

 

Zur Schatzsuche (Beispiel 16)

Nach Drücken des Knopfes "bereit" soll die Ampel nicht sofort auf grün schalten, sondern erst nach einer zufallsabhängigen Verzögerungszeit (z.B. nach 2 bis 7 Sekunden).

Lösung:
1. Die Funktion zufall=2+Math.floor(7+Math.random()) erzeugt eine Zufallszahl zwischen 2 und 9
2. Wir benutzen die Methode "window.setTimeout(anweisungen, verzoegerung)", die die "anweisungen" erst nach Ablauf von "verzoegerung" (in Millisekunden) ausführt.

Um die Bildwechsel für die Ampel aufzurufen, muss das Bild der roten Ampel im Image-Tag einen Namen besitzen, z.B. name=bild.

<IMG SRC="rot.gif" name=bild>

Drückt man den Knopf "bereit", wird durch Angabe der neuen Datei (src) das Bild ausgetauscht:

document.bild.src="rotgelb.gif";

 

Das JavaScript im Head-Teil der Seite:

<SCRIPT language="JavaScript"><!--

var zufall, dat, milli, delta, newMilli, count, OK, taskID;

var str='Du hast gemogelt !'+'\n'+'Du darfst das gelbe Feld nicht verlassen bevor gruen erscheint.'+'\n'+'WARNUNG:'+'\n'+'Beim naechsten Fehlstart wird deine Festplatte geloescht !';

var str1="Du musst erst den Knopf 'bereit' druecken !";

 

function test() {

if ((OK==true) && (document.bild.src.indexOf("rotgelb.gif")!=-1)) {window.clearTimeout(taskID);document.bild.src="rot.gif";alert(str);}

}

 

function neu() {

document.form.ergebnis.value="";

document.bild.src="rot.gif"

}

 

function warten() {

document.bild.src="gruen.gif"

dat=new Date();

newMilli=dat.getTime();

}

 

function bereit() {

OK=true;

document.bild.src="rotgelb.gif"

zufall=2+Math.floor(7*Math.random());

taskID=window.setTimeout("warten()",1000*zufall);

count=0;

}

 

function knopf() {

if (document.bild.src.indexOf("rotgelb.gif")!=-1) {window.clearTimeout(taskID);document.bild.src="rot.gif"; alert(str); return true;};

if (document.bild.src.indexOf("rot.gif")!=-1) {alert(str1); return true;};count=count+1;dat=new Date();

diff=dat.getTime()-newMilli;

document.form.ergebnis.value=diff + ' Millisekunden fuer '+count;

}

--></SCRIPT>

Das Formular:

<FORM name=form>

<CENTER>

<P><TABLE BORDER=1 BGCOLOR="#FFFF99" CELLPADDING=2 WIDTH=500 HEIGHT=70>

<TR>

<TD HEIGHT=30>

<CENTER><INPUT TYPE=button NAME=Taste VALUE="bereit" onclick="bereit()"></CENTER>

</TD>

</TR>

</TABLE>

 

<P><IMG SRC="rot.gif" WIDTH=57 HEIGHT=141 ALIGN=bottom name=bild>

 

<P>&nbsp;<A HREF="#" onmouseover="test();"><FONT SIZE="+4" COLOR="#FFFFFF">__________dies

ist ein link____________</FONT></A>

 

<P><TABLE BORDER=1 BGCOLOR="#FF0000" WIDTH=550>

<TR>

<TD HEIGHT=70>

<CENTER><INPUT TYPE=button NAME=Taste VALUE="Bremse los" onclick="knopf()"></CENTER>

</TD>

<TD HEIGHT=70>

<CENTER><INPUT TYPE=button NAME=Taste VALUE="auskuppeln" onclick="knopf()"></CENTER>

</TD>

<TD HEIGHT=70>

<CENTER><INPUT TYPE=button NAME=Taste VALUE="Gang rein" onclick="knopf()"></CENTER>

</TD>

<TD HEIGHT=70>

<CENTER><INPUT TYPE=button NAME=Taste VALUE="Gas" onclick="knopf()"></CENTER>

</TD>

<TD HEIGHT=70>

<CENTER><INPUT TYPE=button NAME=Taste VALUE="einkuppeln" onclick="knopf()"></CENTER>

</TD>

</TR>

</TABLE>

<P>DeinErgebnis:

<P><INPUT TYPE=text NAME=ergebnis VALUE="" SIZE=30>

<P><INPUT TYPE=button NAME=Taste VALUE="neues Spiel" onclick="neu()">

</CENTER>

</FORM>

Letzte Änderung: