<!-- // Memory Version 1.1 (c)2002 von Neni Milosevic // Dieser Code steht der Webgemeinde zur freien Verfügung,

Größe: px

Ab Seite anzeigen:

Sylvia Giese
vor 7 Jahren
Abrufe

1 <html> <head> <title>musikinstrumente auf der Insel Rodrigues </title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body bgcolor="#003333" text="#99ffff" link="#ccccff" vlink="#00ccff" alink="#cc99ff"... onload="neumischen()"> <p align="center"> <p align="center"><b><font face="courier New, Courier, mono" size="8" color="#339999"><a href=" target="_blank">rodrigues:</a> Memory Musical Instruments</font> <br> </b> <p align="center"> <p align="center"><b><font face="courier New, Courier, mono" size="4">(the wonderful pictures were taken by Fabrice Bettex)</font></b> <script language="javascript"> <!-- // ** Memory Version 1.1 (c)2002 von Neni Milosevic ** // ** Dieser Code steht der Webgemeinde zur freien Verfügung, ** // ** Sie können also damit machen, was Sie wollen :-). ** // Die Anzahl Memory-Felder können Sie beliebig erweitern. Wichtig // ist nur, dass Sie eine entsprechend grosse Tabelle erstellen mit // der jeweiligen Anzahl Zellen und Bildern darin. Die Anzahl der // Bilddateien beträgt die Hälfte der Anzahl Zellen (ist ja klar ;-)), // und die Bilddateien müssen als Dateinamen bild0.gif bis bildx.gif // (das X steht hier für die Anzahl Bilddateien minus 1) haben und sich // im gleichen Ordner befinden wie die HTML-Datei. Ferner braucht es noch // die Anfangsbilddatei (verdeckte Felder), welche einfach bild.gif // heissen muss. Wie in diesem Beispiel zu sehen, muss jedes Bild einen // Namen (name ="xyz") als Attribut im HTML-Code haben, der bild0 bis // bildx (X hier Anzahl Felder minus 1) lauten muss, also z.b. name="bild5". // Ferner muss im Link-Eintrag für jedes Memory-Bild folgender Code stehen: // javascript:openimg(n); wobei n die Nummer des Bildes ist, also 0 bis // Anzahl Felder minus 1. // Hier werden einige Variablen und Arrays definiert. var maximgs = 16; // Diese Variable muss der Anzahl Felder entsprechen, Seite 1

2 // sie muss jeweils als einzige angepasst werden. bilder = new Array(); //Bilderarray memarray = new Array(); //Array mit den Bildpositionen memopen = new Array(); //Array das speichert, ob ein Bild aufgedeckt ist. maxi = Math.round(maximgs / 2); //die Hälfte der Feldanzahl startbild = new Image(); startbild.src = "bild.gif"; // Alle Arrays werden zu Anfang gefüllt. Die Bilder werden der Reihe nach // eingefüllt. for (i=0; i<maxi; i++) { bilder[i] = new Image(); bilder[i].src = "bild" + i + ".gif"; memarray[i] = i; //Positionen der Reihe nach vergeben memarray[i+maxi] = i; //die zweite Felderhälfte entspricht am Anfang der ersten memopen[i] = 0; //Alle Bilder noch verdeckt... memopen[i+maxi] = 0; var img1open = -1; //Position des ersten aufgedeckten Bildes in einem Versuch var img2open = -1; //Position des zweiten umgedrehten Bildes in einem Versuch var trycounter = 0; //der Versuchszähler // Wir mischen die Karten! Der Mischvorgang geht so, dass mehrere Male zufällig // zwei Bildpositionen ausgewählt und jeweils paarweise ausgetauscht werden. // Die Funktion wird beim Laden der Seite (onload) und beim Klicken auf den // Knopf "Neu mischen" aufgerufen. Seite 2

3 function neumischen() { for (i=0; i<maximgs; i++) { memopen[i] = 0; //Alle Bilder wieder verdeckt bildstring = "bild" + i; //Allen Bildern wird wieder das Startbild zugewiesen... window.document.images[bildstring].src = startbild.src; supermaxi = maximgs * 2; //Anzahl der paarweisen Tauschvorgänge: das Doppelte der Felderzahl for (i=0; i<supermaxi; i++) { rndimgno1 = Math.round(Math.random() * (maximgs-1)); //erstes Feld zufällig auswählen rndimgno2 = Math.round(Math.random() * (maximgs-1)); //zweites Feld zufällig auswählen if (rndimgno1 == rndimgno2) { //Austausch eines Feldes mit sich selbst vermeiden... if (rndimgno2 == (maximgs-1)) rndimgno2--; else rndimgno2++; tempmem = memarray[rndimgno1]; //ab hier wird ausgetauscht... memarray[rndimgno1] = memarray[rndimgno2]; memarray[rndimgno2] = tempmem; img1open = -1; //Werte zurücksetzen... img2open = -1; trycounter = 0; //Versuchszähler in Textfeld ausgeben window.document.forms["form1"].elements["text1"].value = trycounter; //Diese Funktion wird beim Anklicken eines Bildes aufgerufen und dient zum Aufdecken. function openimg(imgno) { //die Position des angeklickten Feldes wird übergeben (imgno) if (memopen[imgno] == 1) return; //wenn bereits aufgedecktes Bild geklickt wird, nix machen! if ((img1open!= -1) && (img2open!= -1)) { //falls zwei Bilder aufgedeckt worden sind, hier weiter... Seite 3

4 if (memarray[img1open]!= memarray[img2open]) { //sind die beiden Bilder ungleich, dann... bildstring = "bild" + img1open; //...müssen sie zurückgesetzt werden... window.document.images[bildstring].src = startbild.src; memopen[img1open] = 0; bildstring = "bild" + img2open; window.document.images[bildstring].src = startbild.src; memopen[img2open] = 0; //wenn sie allerdings gleich sind, dann dürfen sie offen bleiben, //nur die Aufgedeckt-Marker für den Versuch müssen zurückgesetzt werden. img1open = -1; img2open = -1; if (imgno == -1) return; //Frühausstieg bei Timeout-Aufruf if (img1open == -1) { //falls noch kein Bild aufdedeckt wurde in diesem Versuch, hier weiter... img1open = imgno; //den Aufgedeckt-Marker auf die Feldposition setzen. bildstring = "bild" + img1open; //erstes Bild aufdecken... window.document.images[bildstring].src = bilder[memarray[img1open]].src; memopen[img1open] = 1; //Versuchsübergreifende Aufgedeckt-Position speichern trycounter++; // Versuchszähler um eins erhöhen... window.document.forms["form1"].elements["text1"].value = trycounter; //...und ausgeben return; //Funktion vorzeitig verlassen if (img2open == -1) { //falls erst ein Bild aufgedeckt wurde in diesem Versuch, hier weiter... img2open = imgno; //Aufgedeckt-Marker auf Feldposition setzen bildstring = "bild" + img2open; //zweites Bild aufdecken... window.document.images[bildstring].src = bilder[memarray[img2open]].src; memopen[img2open] = 1; //Versuchsübergreifende Aufgedeckt-Position speichern settimeout("openimg(-1)", 2000); //rekursivaufruf der Funktion mittels Timeout um nach... //... 2 sec. falsch aufgedeckte Felder wieder zuzudecken. Seite 4

5 //--> </script> <table width="10" border="0" cellspacing="0" cellpadding="0" align="center"> <td>  <div align="center"><b></b> </div> <div align="center"><b></b></div> <table border="0" cellspacing="3" cellpadding="0"> <td><a href="javascript:openimg(0);"><img src="bild.gif" name="bild0" border="0"></a></td> <td><a href="javascript:openimg(1);"><img src="bild.gif" name="bild1" border="0"></a></td> <td><a href="javascript:openimg(2);"><img src="bild.gif" name="bild2" border="0"></a></td> <td><a href="javascript:openimg(3);"><img src="bild.gif" name="bild3" border="0"></a></td> <td><a href="javascript:openimg(4);"><img src="bild.gif" name="bild4" border="0"></a></td> <td><a href="javascript:openimg(5);"><img src="bild.gif" name="bild5" border="0"></a></td> <td><a href="javascript:openimg(6);"><img src="bild.gif" name="bild6" border="0"></a></td> <td><a href="javascript:openimg(7);"><img src="bild.gif" name="bild7" border="0"></a></td> <td><a href="javascript:openimg(8);"><img src="bild.gif" name="bild8" border="0"></a></td> <td><a href="javascript:openimg(9);"><img src="bild.gif" name="bild9" border="0"></a></td> <td><a href="javascript:openimg(10);"><img src="bild.gif" name="bild10" border="0"></a></td> <td><a href="javascript:openimg(11);"><img src="bild.gif" name="bild11" border="0"></a></td> <td><a href="javascript:openimg(12);"><img src="bild.gif" name="bild12" border="0"></a></td> <td><a href="javascript:openimg(13);"><img src="bild.gif" name="bild13" border="0"></a></td> <td><a href="javascript:openimg(14);"><img src="bild.gif" name="bild14" border="0"></a></td> <td><a href="javascript:openimg(15);"><img src="bild.gif" name="bild15" border="0"></a></td> </table>  <form name="form1" method="post" action=""> Seite 5

6 <table width="255" border="0" cellspacing="3" cellpadding="0" align="center"> <td align="center"> <font face="arial, Helvetica, sans-serif" size="2"><b>versuche:</b></font> <input type="text" name="text1" value="0" size="4" maxlength="4"> </td> <td align="center">  <input type="button" name="misch" value="neu mischen" onclick="neumischen()"> </td> </table> </form> </td> </table> <font face="courier New, Courier, mono"> </font> </body> </html> Seite 6

Ähnliche Dokumente

hotelanfrage_sample <td align = "center"> <select name=dy0 size=1 class="smalltext"> <option selected value="0"><< kein Erwachsener

hotelanfrage_sample <td align = center> <select name=dy0 size=1 class=smalltext> <option selected value=0><< kein Erwachsener capcorn Zimmersuche