nicht angemeldet
Hallo, liebe Leute, habe endlich eine Aufgabe gefunden, die mich seit Jahrzehnten wieder an die Programmierung heranführt. Seit einiger Zeit baue ich eine Projektbeschreibung meiner MAE-Maßnahme (ich weiß, viel zu anspruchsvoll) mittels HTML. Jetzt kam ich auf die Idee, ein Memory mit Bildern zu programmieren. Die quadratische Tabelle ist als Grundgerüst soweit fertig. Leider bekomme ich es nicht hin, daß bei "onclick" auf eine Zelle etwas passiert. Da ich Anfänger bin, habe ich noch nicht den Überblick über die zur Verfügung stehenden Möglichkeiten und wäre über Hinweise recht froh. Gerade las ich von "closures". Hört sich vielversprechend an. Was sagt ihr?
Vorab schon einmal Danke für euer Interesse. Uwe
Leider finde ich hier keine Möglichkeit für Anhänge und habe keinen Webspace.
Deshalb liste ich zur Verdeutlichung meines Problems die beiden Dateien unterhalb auf. Sie müssen im selben Verzeichnis liegen. Die verwendeten Bilder sind für i= 0 bis 49 in ./pic/i.gif (50x50pix), bzw. in ./pics/i.gif (200x200pix). link.gif ist eine transparente Hilfsdatei der Größe 50x50 pix. Aus nachvollziehbaren Gründen liefere ich die jetzt nicht mit ;-).:
- mem_start_liste.html: ========================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="./tabelle.js"></script>
<script type="text/javascript" src="./zellen.js"></script>
<noscript><h2 align="center" style="font:bold; color:red;">Schalte bitte JavaScript ein, sonst funktioniert das Spiel nicht!</h2></noscript>
<title>Das Blumen-Memory</title>
<meta name="author" content="Ich">
<meta name="editor" content="html-editor phase 5">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div align="center"><h2><u>Das Blumem-Memory</u></h2></div>
<p>Hallo, liebe Besucher! Wir begrüßen Sie herzlich auf unserer Seite
"Das Blumem-Memory", auf der wir Ihnen die bekanntesten, heimischen Blumen als
"Memory" nahe bringen wollen. Wählen Sie einfach im Drop-Down Menü, wie viele "Kärtchen" Sie umdrehen wollen. Sie können zwischen 2x2 = 4, bis hin zu 10x10 = 100 Kärtchen wählen.</p>
<h3>Wir wünschen Euch viel Spaß und Erfolg, Euer Team vom "Garten der Sinne".</h3>
<p>Wähle die Memory-Größe aus. Kreuze nur ein Kästchen an!:</p>
<form action="./tabelle.js" name="MemBig" method="get" target="Inhalt">
<p><select name="Wert" size="1">
<option value="2" selected> 2 x 2</option>
<option value="4"> 4 x 4</option>
<option value="6"> 6 x 6</option>
<option value="8"> 8 x 8</option>
<option value="10">10 x 10</option>
</select></p>
<input type="button" name="Memory" value="Abschicken" onclick="GetWert()">
</form>
</body>
</html>
- tabelle.js: ==============
function GetWert() {
var jetzt = new Date();
time = jetzt.getTime() - jetzt.getTime() + 1000;
jetzt.setTime(time);
document.cookie = "Autor=MEMORY; expires=" + jetzt.toGMTString();
//<!-- Löscht alte Cookies von vorhergehenden Memory-Durchläufen. z.z. außer Funktion.-->
var Tabellenbreite = document.MemBig.Wert.options[document.MemBig.Wert.selectedIndex].value;
//<!-- Abfrage, welcher Wert in der Auswahlliste gewählt wurde und Einsetzen in Tabellenbreite.-->
var Tabellenhoehe = Tabellenbreite;
//<!-- Setzt Tabellenbreite = Tabellenhoehe, woraus sich später eine quadratische Tabelle ergibt.-->
var i,ii, bildindex;
/*<!-- Definiert Zählindices: "i", "ii" für die Tabellen-Generierung, bzw. Schleifen allgemein.
"bildindex" wird bei der Array-Arbeit eingesetzt.-->*/
var maxpic = Tabellenhoehe * Tabellenbreite;
//<!-- Definiert die maximale Anzahl der eizusetzenden Bilder.-->
var halfpic = maxpic / "2";
/*<!-- Generiert die halbe Arraylänge, damit das gesamte Array später durch Anhängen des halblangen Arrays
an sich selbst das fertige Array mit jeweils 2 gleichen Bildnamen ergibt.-->*/
var y = "100" / maxpic;
/*<!-- "25"; "6.25"; "2.77777777778"; 1.5625; 1;Hilfsvariable für höchsten Bildindex: 100/maxpic ergibt
den Divisor, durch den die 2-stellige Zufallszahl geteilt werden muß, damit der Array-Index der
Anzahl der Bilder nicht übersteigt.-->*/
var Bild = new Array(halfpic);
var Bilder = new Array(halfpic);
/*<!-- Definiert die beiden Arrays "Bild" für die kleinen und "Bilder" für die großen Bilder bzw. deren
Adressen.-->*/
var image = new Array(maxpic);
var images = new Array(maxpic);
/*<!-- Definiert zwei Arrays, in denen fertige <img>-Tags als Elemente in jeweils zufälliger
Reihenfoge abgespeichert werden.-->*/
var ZellenInhalt = new Array(maxpic);
/*<!-- Definiert das Array, mit dem der Zelleninhalt der Tabelle mit einer zufälligen Bildauswahl
belegt werden soll. Dabei werden fertige HTML-Links als Elemente eingesetzt.-->*/
var z = maxpic;
var zellen = zellen () {
for (var i = 0; i < halfpic; ++i)
//<!-- Diese Schleife befüllt beide Arrays mit Bildadressen.-->
{
Bild[i] = "./pic/" + i + ".gif";
Bilder[i] = "./pics/" + i + ".gif";
}
Bild = Bild.concat(Bild);
Bilder = Bilder.concat(Bilder);
//<!-- Diese oberen beiden Zeilen sorgen dafür, daß in beiden Arrays jeweils jeder Bildname 2x vorkommt.-->
for (i = 0; i < maxpic; ++i)
//<!-- Diese Schleife startet die zufällige Auswahl von Bildern aus den Arrays.-->
{
bildindex = Math.floor(Math.random() * "100" / y);
while(Bild[bildindex] == undefined)
/*<!-- Hier wird abgefragt, ob der Bildindex belegt ist, weil die Arrays ja immer kleiner werden. Wenn
nicht, wird solange ein neuer Zufallsindex gebildet, bis mit ihm ein Bild gefunden wird.-->*/
{
bildindex = Math.floor(Math.random() * "100" / y);
}
image[i] = '<img src="' + Bild[bildindex] + '">';
images[i] = '<img src="' + Bilder[bildindex] + '">';
img = Bild[bildindex] + '+' + Bilder[bildindex];
//<!-- Hier werden die <img>-Tags generiert, mit denen später die Zellen "befüllt" werden sollen.-->
ZellenInhalt[i] = '\<form action\=\"./zellen.js\"\>\<div\>\<button style="" name\=\"ZellenInhalt\" type\=\"button\" value\=\"' + img + '" onclick="zellen()"><img src="./link.gif" width="50" height="50"></button></div></form>';
//<!-- Hier werden die HTML-Tags generiert, mit denen später die Zellen der Tabelle befüllt werden sollen.-->
Bild.splice(bildindex, 1);
Bilder.splice(bildindex, 1);
//<!-- Hier werden beide Arrays um das gerade gewählte Bild-Element reduziert.-->
}
document.write("\<center\>\<u\>\<h2\>Es wurde eine Memory-Matrix von " + Tabellenhoehe + " x " + Tabellenbreite + " Bildern gewählt!\<\/h2\>\<\/u\>\<\/center\>");
document.write("\<center\>\<h2\>Viel Spaß!\<\/h2\>\<\/center\>");
document.write("\<p\>Klicke 1x auf ein Feld, um das 1. Bild zu sehen. Es wird größer dargestellt, so lange der Mauszeiger sich auf dem Feld befindet.\<\/p\>");
document.write("\<p\>Klicke 1x auf ein 2tes Feld. Das Bild wird wie beim ersten Bild angezeigt. Sind sie gleich, bleiben sie sichtbar. Sind sie verschieden, werden beide Bilder wieder verdeckt und du kannst einen neuen Versuch starten.\<\/p\>");
document.write("\<p\>Gewonnen hat der, der die wenigsten Versuche zum Lösen des Memorys benötigt, also alle Bildpaare richtig entdeckt hat.\<\/p\>");
document.write("<table border=\"1\" style\=\"background-color\:\'#0000FF\'\"\>");
//<!-- Schreibt den Erklärungsteil über die Tabelle.-->
for (i = 0; i < Tabellenhoehe; ++i)
//<!-- Äußere Schleife generiert Tabellenzeilen.-->
{
document.write("\<tr\>");
for (ii = 0; ii < Tabellenbreite; ++ii)
//<!-- Innere Schleife generiert die Zellen in den Zeilen.-->
{
z = --z;
document.write("\<td width\=\"50px\" height\=\"50px\" onMouseOver\=\"style.backgroundColor\=\'#0080FF\'\" onMouseOut\=\"style.backgroundColor\=\'#0000FF\'\"\>" + ZellenInhalt[z] + "\<\/td\>");
}
document.write("\<\/tr\>");
}
document.write("\<\/table\>");
}