Schiebepuzzle mit JavaScript

capricorn2388 · 9 Januar 2013

Hallo zusammen,
hier geht es wieder um eine Übungsaufgabe (Thema: Schiebepuzzle). Die "dynamische Puzzlegenerierung" habe ich bereits durch und bin jetzt bei "Verschieben von Teilen" angelangt.

Folgende Aufgabenstellung: Verändern Sie Ihre Generierungsfunktion, um jedes Bild mit einem onclick-Handler zu versehen. Der Handler sollte eine Verschiebungsfunktion aufrufen, die prüft, ob das angeklickte Teil an die Lücke angrenzt. Ist dies der Fall, tauschen die Lücke und das Puzzleteil ihre Position. Realisieren Sie diese Funktionalität aber nicht direkt. Tauschen Sie stattdessen die Werte im Array aus und rufen Sie danach innerhalb der Verschiebungsfunktion Ihre Austauschfunktion auf.

Ich habe hier leider überhaupt keinen Ansatz wie ich das lösen kann. Ich hoffe mir kann jemand helfen und danke schonmal.
Bilddaten sind folgendermaßen benannt:
0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 7.jpg, 8.jpg, 9.jpg, 10.jpg, 11.jpg, 12.jpg, 13.jpg, 14jpg, 15.jpg, blank.jpg

Bildschirmfoto 2013-01-09 um 18.56.21.jpg

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    <link rel="stylesheet" href="schiebepuzzle.css" type="text/css" media="screen" />
    <script type="text/javascript" src="schiebepuzzle.js"></script>
    </head>
    <body onload="laden();">
    
        <div id="schiebepuzzleContainer">
        </div>
        
        <div id="formatContainer">
        Format auswählen:<br />
            <select name="format" id="format" size="1">
                <option onclick="formatAendern(3,3);">Format 3 x 3</option>
                <option onclick="formatAendern(3,4);">Format 3 x 4</option>
                <option onclick="formatAendern(4,3);">Format 4 x 3</option>
                <option onclick="formatAendern(4,4);">Format 4 x 4</option>
            </select>
            
        </div>
    
    
    </body>
</html>

PHP:

function laden() {
    var puzzle = '<div id="schiebepuzzleContainer4x4">';
    
    for (var i = 0; i <= 15; ++i) {
        puzzle += '<img src="http://www.html.de/images/blank.jpg" alt="blank" width="100" height="100" />';
    }
        puzzle += '</div>';
        zeigeSchiebepuzzle(puzzle);
}


function formatAendern(x, y) {
    var puzzleteile = [];
    var endWert = x * y - 2;
    
    for (var i = 0; i <= endWert; ++i) {
        puzzleteile.push(i);
    }
    
        puzzleteile.push('blank')
    schiebepuzzleErzeugen(puzzleteile, x, y);
}


function schiebepuzzleErzeugen(puzzleteile, x, y) {

    var puzzle = '<div id="schiebepuzzleContainer' + x + 'x' + y + '">';

    for (var puzzleNr = 0; puzzleNr < puzzleteile.length; ++puzzleNr) {
        puzzle += '<img src="http://www.html.de/images/' + puzzleteile[puzzleNr] + '.jpg" class="puzzleteil" id="position' + puzzleteile[puzzleNr] + '" alt="' + puzzleteile[puzzleNr] + '" onclick="verschiebePuzzleteil();" width="100" height="100" />';
    }
        puzzle += '</div>';
    
    zeigeSchiebepuzzle(puzzle);
}


function zeigeSchiebepuzzle(puzzle) {
    document.getElementById('schiebepuzzleContainer').innerHTML = puzzle;
}


function verschiebePuzzleteil() {
    
}

Code:

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #000;
}

img {
    padding: 0;;
    margin: 0;
}

#schiebepuzzleContainer3x3,
#schiebepuzzleContainer3x4,
#schiebepuzzleContainer4x3,
#schiebepuzzleContainer4x4 {
    position: absolute;
    top: 50px;
    left: 50px;
    border: 1px solid black;
}

#schiebepuzzleContainer3x3 {
    width: 300px;
    height: 300px;
}

#schiebepuzzleContainer3x4 {
    width: 300px;
    height: 400px;
}

#schiebepuzzleContainer4x3 {
    width: 400px;
    height: 300px;
}

#schiebepuzzleContainer4x4 {
    width: 400px;
    height: 400px;
}

.puzzleteil {
    float: left;
}

#formatContainer {
    position: absolute;
    top: 50px;
    left: 500px;
}

#format {
    margin-top: 10px;
}

Sempervivum · 9 Januar 2013

Ich glaube, so wie Du das Puzzle bisher angelegt hast, kannst Du die neue Aufgabe nicht lösen. IMO musst Du das Puzzle als zweidimensionales Array aufbauben mit x und y als Indizes. Dann kannst Du prüfen, ob ein angrenzendes Feld leer ist (leer hat den Inhalt -1):

Code:

if (x - 1 >= 0 && parray[x-1][y] != -1)
{
  leerx = x - 1;
  leery = y;
}
if (x + 1 < max && parray[x+1[y] != -1)
{
  leerx = x + 1;
  leery = y;
}
// und analog fuer die y-Koordinate

Schiebepuzzle mit JavaScript

capricorn2388

Neues Mitglied

Sempervivum

Guest

Neueste Beiträge