Memory für Fortgeschrittene :)

JBHTML · 3 Oktober 2014

Liebe User,
ich möchte ein etwas anderes html memory erstellen!
Der Konfliktpunkt ist dabei folgender: Ich möchte einem Bild (einer Memory-Karte) eine andere passende hinzufügen.
Es soll aber nicht das gleiche Bild sein, sondern lediglich ein thematisch gleiches Bild. Ich möchte also in dem Memory die Grafik 1a und die dazu passende Grafik 1b als die richtige Kombination haben. Hier findet Ihr den Ausgangscode:
HABT IHR IDEEN WIE MAN DAS HIER ANPASSEN KÖNNTE ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>GP1</title>

</head>
<body background="image.jpg">
</body>

<tr>
<td valign="top">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
</tr>
<tr height="20">
<td valign="top" width="100%" height="20"></td>
</tr>
<tr>
<td align="center" valign="top" width="100%">

<table border="0" cellspacing="0" cellpadding="5" bgcolor="#ffd700">
<tr>
<td colspan="2" align="center">

<script language="javascript">

var zeilen = 4; // Anzahl der Zeilen
var spalten = 7; // Anzahl der Spalten
var bildpath = ''; // Verzeichnis der Bilder (Spielkarten)
var bildew = '.jpg'; // Dateierweiterung der Bilddateien (Spielkarten)var deckblatt = 'deck.jpg'; // Bilddatei des Deckblattesvar offen = 'auf.gif'; // Bilddatei für aufgedeckte Feldervar bild_w = 200; // Breite der Bildervar bild_h = 150; // Höhe der Bilder
var wertung = 5; // Punkte für richtiges "Paar"
var Bilder = zeilen*spalten;

var zugnr = 0;
var geszug = 0;
var erg = 0;
var punkte = 0;
var richtig = 0;
var falsch = 0;

start();

var pos=1;
document.write('<table border="0" cellspacing="0" cellpadding="5">');
for (z = 0; z < zeilen; z++)
{
document.write('<tr height="' + bild_h + '">');
for (s = 0; s < spalten; s++)
{
document.write('<td align="center" valign="middle" width="' + bild_w + '" height="' + bild_h + '"><a href="javascript:zug(' + pos + ')"><img id="' + pos + '" src="' + bildpath + deckblatt + '" alt="" height="' + bild_h + '" width="' + bild_w + '" border="0" name=' + pos + '></a></td>');
pos++;
}
document.write('</tr>');
}
document.write('</table>');

function start()
{
BildW = new Array(Bilder);
var i=1;
while(i <= Bilder)
{
var gleich = 0;
BildW = Math.round(Math.random()*(Bilder/2));
if (BildW < 1) BildW = 1;
if (BildW > (Bilder/2)) BildW = (Bilder/2);
if (i > 1)
{
for (var vergl=1; vergl <= i-1; vergl++)
{
if (BildW == BildW[vergl])
{
var gleich = gleich + 1;
if (gleich == 2) break;
}
}
}
if (gleich < 2) i++;
}
}

function zug(feld)
{
if (BildW[feld] != "g")
{
zugnr = zugnr + 1;
Bild_aktuell = BildW[feld];

if (zugnr == 1)
{
if (erg == 1)
{
aendern(zug1pos, offen);
aendern(zug2pos, offen);
erg = 0;
}
if (erg == 2)
{
aendern(zug1pos, deckblatt);
aendern(zug2pos, deckblatt);
erg = 0;
}
zug1pos = feld;
}

if (zugnr == 2)
{
geszug = geszug + 1;
if (feld != zug1pos)
{
zugnr = 0;
zug2pos = feld;
if (BildW[feld] == BildW[zug1pos])
{
punkte = punkte + wertung;
richtig = richtig + 1;
BildW[feld] = "g";
BildW[zug1pos] = "g";
erg = 1;
if (richtig == Bilder/2)
{
ausgabe();
aendern(feld, Bild_aktuell + bildew);
alert(unescape("Glückwunsch du hast alles abgeräumt auf zum nächsten Spiel"));
window.location.href = "GP1.html";
}
}
else
{
erg = 2;
punkte = punkte - 1;
falsch = falsch + 1;
}
}

}
aendern(feld, Bild_aktuell + bildew);
ausgabe();
}

}

function aendern(position, bildname)
{
document.getElementById(position).src = bildpath + bildname;
}

function ausgabe()
{
document.game.punkt_aus.value = punkte;
document.game.geszug_aus.value = geszug;
document.game.falsch_aus.value = falsch;
}
</script>

</td>
</tr>
<tr>
<td rowspan="2" align="left" valign="bottom"><a href="GP1.htm"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">neues Spiel</font></b></a></td>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<form name="game">
<tr>
<td align="center" width="60"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Punkte</font></b></td>
<td align="center" width="60"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Züge</font></b></td>
<td align="center" width="60"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Falsche</font></b></td>
</tr>
<tr>
<td align="center" width="60"><input type="text" name="punkt_aus" value="0" size="5"></td>
<td align="center" width="60"><input type="text" name="geszug_aus" value="0" size="5"></td>
<td align="center" width="60"><input type="text" name="falsch_aus" value="0" size="5"></td>
</tr>
</form>
</table>
</td>
</tr>

</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

</html>

Sempervivum · 3 Oktober 2014

Funktioniert denn dein Ausgangscode? Dieses kommt mir sehr merkwürdig vor:

Code:

function start()
{
BildW = new Array(Bilder);
var i=1;
while(i <= Bilder)
{
var gleich = 0;
BildW[I] = Math.round(Math.random()*(Bilder/2));
if (BildW[I] < 1) BildW[I] = 1;
if (BildW[I] > (Bilder/2)) BildW[I] = (Bilder/2);
if (i > 1)
{
for (var vergl=1; vergl <= i-1; vergl++)
{
if (BildW[I] == BildW[vergl])[/I][/I][/I][/I][/I][/I]

Die Variable BildW wird mal als Integer und mal als Array verwendet!
Edit: Irrtum, die Forensoftware hat anscheinend die Indizierung als Italic-Tag verwendet.

Code:

function start()
{
BildW = new Array(Bilder);
var i=1;
while(i <= Bilder)
{
var gleich = 0;
BildW[i] = Math.round(Math.random()*(Bilder/2));
if (BildW[i] < 1) BildW[i] = 1;
if (BildW[i] > (Bilder/2)) BildW[i] = (Bilder/2);
if (i > 1)
{
for (var vergl=1; vergl <= i-1; vergl++)
{
if (BildW[i] == BildW[vergl]

Sieht dein Code so aus?
Du musst die code-Tags verwenden, dann passiert so etwas nicht.

JBHTML · 3 Oktober 2014

Ja ! :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <title>GP1</title>
               
    </head>
    <body background="image.jpg">
    </body>

                    <tr>
                <td valign="top">
                    <table width="100%" border="0" cellspacing="5" cellpadding="0">
                        </tr>
                        <tr height="20">
                            <td valign="top" width="100%" height="20"></td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" width="100%">
                           
                           
                           
                           



<table border="0" cellspacing="0" cellpadding="5" bgcolor="#ffd700">
<tr>
<td colspan="2" align="center">

<script language="javascript">

var zeilen = 4;                    // Anzahl der Zeilen
var spalten = 7;                // Anzahl der Spalten

var bildpath = '';                // Verzeichnis der Bilder (Spielkarten)
var bildew = '.jpg';            // Dateierweiterung der Bilddateien (Spielkarten)
var deckblatt = 'deck.jpg';        // Bilddatei des Deckblattes
var offen = 'auf.gif';            // Bilddatei für aufgedeckte Felder
var bild_w = 200;                // Breite der Bilder
var bild_h = 150;                // Höhe der Bilder

var wertung = 5;                // Punkte für richtiges "Paar"

var Bilder = zeilen*spalten;

var zugnr = 0;
var geszug = 0;
var erg = 0;
var punkte = 0;
var richtig = 0;
var falsch = 0;

start();

var pos=1;
document.write('<table border="0" cellspacing="0" cellpadding="5">');
for (z = 0; z < zeilen; z++)
{
    document.write('<tr height="' + bild_h + '">');
    for (s = 0; s < spalten; s++)
    {
        document.write('<td align="center" valign="middle" width="' + bild_w + '" height="' + bild_h + '"><a href="javascript:zug(' + pos + ')"><img id="' + pos + '" src="' + bildpath + deckblatt + '" alt="" height="' + bild_h + '" width="' + bild_w + '" border="0" name=' + pos + '></a></td>');
        pos++;
    }
    document.write('</tr>');
}
document.write('</table>');

function start()
{
    BildW = new Array(Bilder);
    var i=1;
    while(i <= Bilder)
    {
        var gleich = 0;
        BildW[i] = Math.round(Math.random()*(Bilder/2));
        if (BildW[i] < 1) BildW[i] = 1;
        if (BildW[i] > (Bilder/2)) BildW[i] = (Bilder/2);
        if (i > 1)
        {
            for (var vergl=1; vergl <= i-1; vergl++)
            {
                if (BildW[i] == BildW[vergl])
                {
                    var gleich = gleich + 1;
                    if (gleich == 2) break;
                }
            }
        }   
        if (gleich < 2) i++;
    }
}

function zug(feld)
{
    if (BildW[feld] != "g")
    {
        zugnr = zugnr + 1;
        Bild_aktuell = BildW[feld];

        if (zugnr == 1)
        {
            if (erg == 1)
            {
                aendern(zug1pos, offen);
                aendern(zug2pos, offen);
                erg = 0;
            }
            if (erg == 2)
            {
                aendern(zug1pos, deckblatt);
                aendern(zug2pos, deckblatt);
                erg = 0;
            }
            zug1pos = feld;
        }

        if (zugnr == 2)
        {
            geszug = geszug + 1;
            if (feld != zug1pos)
            {
                zugnr = 0;
                zug2pos = feld;
                if (BildW[feld] == BildW[zug1pos])
                {
                    punkte = punkte + wertung;
                    richtig = richtig + 1;
                    BildW[feld] = "g";
                    BildW[zug1pos] = "g";
                    erg = 1;
                    if (richtig == Bilder/2)
                    {
                        ausgabe();
                        aendern(feld, Bild_aktuell + bildew);
                        alert(unescape("Glückwunsch du hast alles abgeräumt auf zum nächsten Spiel"));
                        window.location.href = "GP1.html";
                    }
                }
                else
                {
                    erg = 2;
                    punkte = punkte - 1;
                    falsch = falsch + 1;
                }
            }
           
        }
        aendern(feld, Bild_aktuell + bildew);
        ausgabe();
    }
   
}

function aendern(position, bildname)
{
    document.getElementById(position).src = bildpath + bildname;
}

function ausgabe()
{
    document.game.punkt_aus.value = punkte;
    document.game.geszug_aus.value = geszug;
    document.game.falsch_aus.value = falsch;
}
</script>

                            </td>
                                    </tr>
<tr>
<td rowspan="2" align="left" valign="bottom"><a href="GP1.htm"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">neues Spiel</font></b></a></td>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<form name="game">
<tr>
<td align="center" width="60"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Punkte</font></b></td>
<td align="center" width="60"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Z&uuml;ge</font></b></td>
<td align="center" width="60"><b><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Falsche</font></b></td>
</tr>
<tr>
<td align="center" width="60"><input type="text" name="punkt_aus" value="0" size="5"></td>
<td align="center" width="60"><input type="text" name="geszug_aus" value="0" size="5"></td>
<td align="center" width="60"><input type="text" name="falsch_aus" value="0" size="5"></td>
</tr>
</form>
</table>
</td>
</tr>
                                   
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>

</html>

Sempervivum · 3 Oktober 2014

Hast Du den Code selber geschrieben oder irgendwo gefunden?

JBHTML · 3 Oktober 2014

Gefunden und leicht angepasst. Funktioniert aber soweit.

Sempervivum · 3 Oktober 2014

Ich würde die Bilder so benennen, wie Du es schon vorgeschlagen hast, nur die Nummer auf eine feste Zahl von Stellen erweitern, z. B. 001a.jpg und 001b.jpg. Dann kannst Du die Nummer mit der Funktion substr() extrahieren und nur diese vergleichen:

Code:

if (BildW[i].substr(0, 3) == BildW[vergl]).substr(0, 3))

JBHTML · 4 Oktober 2014

Danke, ich werde es mal ausprobieren.

Memory für Fortgeschrittene :)

JBHTML

Neues Mitglied

Sempervivum

Guest

JBHTML

Neues Mitglied

Sempervivum

Guest

JBHTML

Neues Mitglied

Sempervivum

Guest

JBHTML

Neues Mitglied

Neueste Beiträge