Javascript: Array Werte tauschen

[Greenhorn79]

Hallo @all,

ich habe ein kleines Puzzle programmiert, bei dem man Teile verschieben kann, wenn eins der benachbarten Felder leer ist. Das lief auch wunderbar, bis ich die Bilder in Abhängigkeit von der Spalten und Zeilenzahl in Unterordner verschoben habe.
Wenn nun zwei Teile den Platz tauschen sollen, so geht das ab und an, meistens aber nicht, weil die Funktion verschieben nicht mehr das tut was sie soll. Solange die Bilder noch direkt unter localhost waren, gab es keine Probleme. Allerdings scheine ich die Pfadangabe für bild.src in der Funktion austauschen richtig gemacht zu haben, weil ich dies schon ausgeben habe lassen um sie zu überprüfen. Zudem werden die Bilder auch korrekt ausgetauscht, nur verschoben werden können sie nicht mehr. Wäre nett, wenn jemand einen Tipp für mich hätte, weil ich mich an der Stelle im Kreis drehe und schon seit Tagen nicht weiter komme.

Meinen Code habe ich unten angefügt.

Viele Grüße
Micha

var bilder = [];
var gewinnArray = [];


function verschieben(id) {
    for(var bildNr = 0; bildNr < bilder.length; ++bildNr) {
        if(bilder[bildNr] == 'blank') {
            //Bildnummer der Lücke
            i = bildNr;
            break;
        }
    }
    var trennPos = id.indexOf("_");
    var j = id.substring(trennPos + 1);
    alert('i:' +i + ', j: ' + j);
    var status = pruefen(i,j);
    if(status== false) {
          return;
    }
    var temp = bilder[i];
    bilder[i] = bilder[j];
    bilder[j] = temp;
    alert(bilder);
    austauschen();
    gewonnen();
}

function gewonnen() {
    var gewonnen = gewinnArray.join(',');
    var vergleich = bilder.join(',');
    if (gewonnen==vergleich) {
        alert('Sie haben gewonnen.');
    }
}

function fuellenArray() {
    var feldAnzahl = spalte*zeile;
    for(var i= 0; i < feldAnzahl-1; ++i) {
        gewinnArray.push(i);
        bilder.push(i);
    }
    bilder[feldAnzahl-1] = ('blank');
    gewinnArray[feldAnzahl-1] = ('blank');
}

function pruefen(i,j) {
    if(i-j == 1 || j-i == 1) {
    } else {
        if(i-j == spalte || j-i == spalte) {
        } else {
        return false;
        }
    }
    if(j % spalte == 2 && j -i == -1 && spalte == 3) {
        return false;
    }
    if(i % spalte == 2 && i -j == -1 && spalte == 3) {
        return false;
    }
     if(j % spalte == 3 && j -i == -1 && spalte == 4) {
        return false;
    }
    if(i % spalte == 3 && i -j == -1 && spalte == 4) {
        return false;
    }
}

function austauschen() {
    var feldAnzahl = spalte*zeile;
    for(var bildNr = 0; bildNr < feldAnzahl; ++bildNr) {
        var bild = document.getElementById('bilder_' + bildNr);
        bild.src =spalte + (zeile + '/') + bilder[bildNr] + '.jpg';
        alert(bild.src);
    }
}

function mischen() {
    for(var l = 0; l < 50; ++l) {
        var id ='bilder_' + Math.floor(Math.random() * (spalte*zeile + 1));
        alert('Lauf: ' + l);
        verschieben(id);
    }
}

function generieren() {
    bilder = [];
    var groesse = document.getElementById('groesse').value;
    spalte = parseInt(groesse.substr(0,1));
    zeile = parseInt(groesse.substr(2,1));
    document.getElementById("puzzle").innerHTML = '';
    //Erzeugen der Zeilen
    for(var k =0; k<zeile; ++k) {
        document.getElementById("puzzle").innerHTML = document.getElementById("puzzle").innerHTML + '<div id="zeile' + k + '"></div>';
    }
    //Erzeugen der Spalten
    for(var i = 0; i<spalte; ++i) {
        document.getElementById("zeile0").innerHTML = document.getElementById("zeile0").innerHTML + '<img id="bilder_' + i + '" src="blank.jpg " onclick = "verschieben(id)";/>';
        document.getElementById("zeile1").innerHTML = document.getElementById("zeile1").innerHTML + '<img id="bilder_' + (i+spalte) + '" src="blank.jpg" onclick = "verschieben(id)";/>';
        document.getElementById("zeile2").innerHTML = document.getElementById("zeile2").innerHTML + '<img id="bilder_' + (i+2*spalte) + '" src="blank.jpg" onclick = "verschieben(id)";/>';
    }
   if(zeile == 4) {
       for (var i = 0; i<spalte; ++i) {
            document.getElementById("zeile3").innerHTML = document.getElementById("zeile3").innerHTML + '<img id="bilder_' + (i+3*spalte) + '" src="blank.jpg" onclick = "verschieben(id)";/>';
       }
    }
    document.getElementById("voransicht").innerHTML = '<img id="voransicht" src="gesamt.jpg" height="150" width="150";/>';
    fuellenArray();
    austauschen();
    mischen();
 }