 buecher.lingoworld.de sascha kersken 
|
|
buchinfo aktuelles inhalt leseprobe rezensionen ausbildung listings prüfungsfragen errata forum buchtipps links Galileo Press amazon.de |
Listings (Online-Ergänzung zum Buch) |
|
JavaScript: Bildpaare-SuchspielListing 18_04, Seite 888
<html>
<head> <title>JavaScript-Suchspiel</title> <script language="JavaScript" type="text/javascript"> <!-- // Vorausladen der Kartenbilder var kartenbilder = new Array(); for (i = 0; i < 8; i++) { kartenbilder[i] = new Image(); kartenbilder[i].src = "karte" + i + ".jpg"; } // Die Menge aller existierenden Karten definieren var vorrat = new Array(); for (i = 0; i < 8; i++) { vorrat.push ("a" + i); vorrat.push ("b" + i); // Der IE für Mac versteht push() nicht, dort: // vorrat[vorrat.length] = "a" + i; // vorrat[vorrat.length] = "b" + i; } // Die Karten mischen und "auslegen" var karten = new Array(); for (i = 0; i < 16; i++) { do { // Zufällige Karte wählen var karte = parseInt (Math.random () * 16); // War diese Zahl schon da? var schonda = false; for (j = 0; j < i; j++) { if (karten[j] == karte) schonda = true; } } while (schonda); karten.push (karte); // IE/Mac: // karten [i] = karte; } // Status der Karten var nochda = new Array(); for (i = 0; i < 16; i++) { nochda.push (true); // IE/Mac: // nochda[i] = true; } // Anzahl der Versuche und der zz. offenen Karten var versuche = 0; var offene = 0; // Bereits gefundene Kartenpaare var paare = 0; // Die beiden zz. offenen Karten var offen1, offen2; // Speichervariable für das Timeout zum Schließen var stoppuhr = null; function klick(karte) { // Ist diese Karte schon weg? if (!nochda [karte]) return; // Sind bereits zwei offen? if (offene == 2) { offene = 0; document.images["k" + offen1].src = "rueck.gif"; document.images["k" + offen2].src = "rueck.gif"; if (stoppuhr) { clearTimeout (stoppuhr); stoppuhr = null; } } // Eine Karte wurde geöffnet: offene++; // Die aktuell angeklickte Karte "umdrehen" var kartenbild = vorrat [karten [karte]]; var bildnr = kartenbild.charAt(1); document.images ["k" + karte].src = kartenbilder[bildnr].src; // Ist dies die erste Karte? if (offene == 1) { offen1 = karte; return; } // HIER sind auf jeden Fall ZWEI offen. offen2 = karte; // Ist dies DIESELBE Karte? if (offen2 == offen1) { alert ("Zweimal dieselbe ist verboten!"); offene = 1; return; } var kartenbild1 = vorrat [karten [offen1]]; var kartenbild2 = vorrat [karten [offen2]]; var bildnr1 = kartenbild1.charAt (1); var bildnr2 = kartenbild2.charAt (1); // Die beiden Karten vergleichen: if (bildnr1 == bildnr2) { // Die beiden Karten sind identisch! // Die beiden Karten verschwinden lassen document.images ["k" + offen1].src = "leer.gif"; document.images ["k" + offen2].src = "leer.gif"; nochda[offen1] = false; nochda[offen2] = false; // Es wurde ein Paar gefunden! paare++; offene = 0; } else { // Die beiden Karten sind verschieden - // Vorbereiten zum Schließen in 1 Sekunde: stoppuhr = setTimeout ("schliessen();", 1000); } // Dies war ein weiterer Versuch: versuche++; // Alle gefunden? if (paare == 8) { alert ("Gewonnen in " + versuche + " Versuchen!"); } } function schliessen () { // Die beiden offenen Karten zurücksetzen: document.images ["k" + offen1].src = "rueck.gif"; document.images ["k" + offen2].src = "rueck.gif"; offene = 0; stoppuhr = null; } //--> </script> </head> <body bgcolor="#000000" text="#FFFFFF"> <table border="0" width="100%" height="100%"> <tr> <td align="center" valign="middle"> <h1>JavaScript-Suchspiel</h1> <a href="javascript:klick(0);"><img src="rueck.gif" name="k0" width="100" height="100" border="0" /></a> <a href="javascript:klick(1);"><img src="rueck.gif" name="k1" width="100" height="100" border="0" /></a> <a href="javascript:klick(2);"><img src="rueck.gif" name="k2" width="100" height="100" border="0" /></a> <a href="javascript:klick(3);"><img src="rueck.gif" name="k3" width="100" height="100" border="0" /></a> <br /> <a href="javascript:klick(4);"><img src="rueck.gif" name="k4" width="100" height="100" border="0" /></a> <a href="javascript:klick(5);"><img src="rueck.gif" name="k5" width="100" height="100" border="0" /></a> <a href="javascript:klick(6);"><img src="rueck.gif" name="k6" width="100" height="100" border="0"></a> <a href="javascript:klick(7);"><img src="rueck.gif" name="k7" width="100" height="100" border="0"></a> <br /> <a href="javascript:klick(8);"><img src="rueck.gif" name="k8" width="100" height="100" border="0"></a> <a href="javascript:klick(9);"><img src="rueck.gif" name="k9" width="100" height="100" border="0"></a> <a href="javascript:klick(10);"><img src="rueck.gif" name="k10" width="100" height="100" border="0"></a> <a href="javascript:klick(11);"><img src="rueck.gif" name="k11" width="100" height="100" border="0"></a> <br /> <a href="javascript:klick(12);"><img src="rueck.gif" name="k12" width="100" height="100" border="0"></a> <a href="javascript:klick(13);"><img src="rueck.gif" name="k13" width="100" height="100" border="0"></a> <a href="javascript:klick(14);"><img src="rueck.gif" name="k14" width="100" height="100" border="0"></a> <a href="javascript:klick(15);"><img src="rueck.gif" name="k15" width="100" height="100" border="0"></a> </td> </tr> </table> </body> </html> |
|
webmaster@lingoworld.de
designed by T.Kersken