Hallo,
ich habe eine Zwischenfrage zu folgendem Programm:
Und zwar möchte ich ein Schiebepuzzle erstellen. Es hat anfangs das Format 4 x 4. In einer Selectbox stehen 3 weitere Formatauswahlen zur Verfügung.
Ich komm leider nicht darauf wie ich das Format ändern kann, wenn in der Selectbox ein anderes ausgewählt wird.
Die 2. Frage ist: Während die Seite lädt, sollen die img-Elemente mit einem leeren Bild belegt werden (leer.jpg).
Nach dem Laden soll dieses leere Bild mit der richtigen Bilddatei ersetzt werden. Also muss natürlich src geändert werden.
Ich brauche sicher ein globales Array, dass (bei 0.jpg - 14.jpg, leer.jpg) die Nummern der Bilder bzw. 'leer' speichert.
Leider haben jegliche Versuche bisher nicht funktioniert.
Ich wäre sehr dankbar für eure Hilfe.
Ich habe bisher folgenden Code:
<body>
<div id="puzzle"></div>
<script language="JavaScript">
init("puzzle");
</script>
</body>JavaScript-Code
//Die Größe des Puzzles:
puzzlegroesse = 4;
//Anzeigegröße eines Feldes:
anzeigegroesse = 50;
id = "";
var bilder = [];
function init(DivID) {
id = DivID
genFeld();
paintFeld();
}
//Funktion, die einem das 2-dimensionale Array baut:
function genFeld() {
feld = new Array(puzzlegroesse);
for (var zeile = 0; zeile < puzzlegroesse; zeile++) {
feld[zeile] = new Array(puzzlegroesse);
for (spalte = 0; spalte < puzzlegroesse; spalte++) {
//Jetzt dem Feld in Zeile 'zeile' und Reihe 'spalte' seine Zahl zuweisen
// (am Anfang noch sortiert)
feld[zeile][spalte] = (zeile * puzzlegroesse) + spalte;
}
}
//Das letzt muß natürlich leer sein, sonst machts keinen Spaß (-1 soll für ein leeres Feld stehen)
feld[puzzlegroesse-1][puzzlegroesse-1] = -1;
}
//Malt das Spielfeld, in dem es die Zahlen aus dem zweidimensionalen Array 'feld' ausliest
function paintFeld() {
//Jetzt nach und nach den Text zusammenbauen, der am Ende in die Seite eingefügt werden soll:
spielfeld = '<p><select id="format" size="1"><option id="format1">3 x 3</option><option value="2">3 x 4</option>';
spielfeld += '<option value="3">4 x 3</option><option value="4" selected>4 x 4</option>';
spielfeld += '</select></p>';
spielfeld += '<table cellspacing="0px" cellpadding="0px" border="1px">\n';
for (var zeile = 0; zeile < puzzlegroesse; zeile++) {
//der Anfang einer Tabellenzeile:
spielfeld += '<tr>';
for (spalte = 0; spalte < puzzlegroesse; spalte++) {
//Jetzt wird eine einzelne Tabellenzelle gemalt, also quasi ein Puzzleteil:
spielfeld += '<td onClick="move(' + zeile + ',' + spalte + ')" align="center" valign="center" width="'+anzeigegroesse + 'px" height="' + anzeigegroesse + 'px">';
//Die -1 steht ja für das leere Feld, da soll keine Zahl ( ) im Feld stehen:
if (feld[zeile][spalte] >= 0) {
//bilder[zeile][spalte].src
spielfeld += '<img id="bild" src=Puzzleteile/images/' + feld[zeile][spalte] + '.jpg/>'
} else {
spielfeld += ' ';
}
spielfeld += '</td>';
}
//Das Ende der Tabellenzeile:
spielfeld += '</tr>\n';
}
spielfeld += '</table>';
document.getElementById(id).innerHTML = spielfeld;
}
function move(zeile,spalte) {
}