Logo Banner
{ Navigation } { Deutsch | English }

NeuigkeitenSpieleMinesweeperMastermindSchiebepuzzleMemoryTic Tac ToeTetrisSokobanSnakePacmanOthelloSameGameRoadBlocksLichter ausHighscoresCool StuffTeamTeam - MiselTeam - LXJS-Games FAQGästebuchRechtliches
Schiebepuzzle

Schiebepuzzle − LX


Quellcode


Dies wird benötigt, weil sich alle Teile auf einer DIV der Größe 100×100 Pixel befinden.
<STYLE type="text/css"> div { width:100px; height:100px; } </STYLE>
Nun zum eigentlichen Skript, zuerst werden wie üblich die globalen Variablen deklariert.
<SCRIPT type="text/javascript">
das Spielfeld
var Spielfeld = new Array();
Zählvariablen für Schleifen
var i,j;
O ist der Abstand eines Teils vom oberen Rand, L von links.
var O,L;
Diese 2 Variablen werden benutzt, um die Teile in mehreren Stufen zu verschieben statt einfach nur in das leere Feld zu springen.
var blah,Funktion;
ein weiterer Zähler
var Zaehler;
Diese Variable ist 1 wenn ein Zug vorbei ist und 0 wenn ein Zug gerade ausgeführt wird (ansonsten könnte man wild auf den Teilen herumklicken und so ein Durcheinander erzeugen, indem Teile übereinander geschoben werden, jetzt kann also nur ein Teil auf einmal bewegt werden).
var fertig = 1;
Dies ist ein Feld mit 2 Elementen, welches die Position des leeren Feldes enthält. Am Anfang ist dies 3 | 3.
var Feld = [3,3];
zum prüfen, ob die Teile bereits in der richtigen Reihenfolge sind oder nicht
var gewonnen;
Ein Feld für alle Bilder. Man kann in dieses Spiel mehrere Sets an Bildern einbinden, also werden alle Bilder in einem Feld abgelegt.
var Bilder = new Array();
Initialisiert die Grafiken. i ist in diesem Fall die Nummer des Sets, was gerade ausgewählt ist. Abhängig von dieser Zahl sind die Bilder auch im JPG- oder im GIF-Format, das wird ebenfalls in der Schleife geprüft. blah ist hier die Dateiendung.
for (i = 0; i < 5; i++) { if ((i == 3) || (i == 4)) blah = '.gif'; else blah = '.jpg'; Bilder[i] = new Array(); for (Zaehler = 0; Zaehler < 17; Zaehler++) { Bilder[i][Zaehler] = new Image; Bilder[i][Zaehler].src = i + '/' + (Zaehler + 1) + blah; } }
Diese Funktion mischt die Teile, indem sie zufällig herumgeschoben werden. Sie müssen verschoben werden, da jede Situation lösbar sein sollte. Wenn man stattdessen einfach die Teile zufällig anordnen würde, können Situationen entstehen, in denen das Spiel nicht zu gewinnen ist.
'T33' ist das Teil rechts unten, welches entfernt wurde, um das leere Feld zu erzeugen.
function mischen() { var dasselbe;
Dieser Abschnitt bestimmt, wo sich im Moment die Lücke befindet.
for (i = 0; i < 4; i++) { for (j = 0; j < 4; j++) { if (Spielfeld[i][j] == 'T33') { Feld[0] = i; Feld[1] = j; } } }
In diesem Fall schiebt der Computer 30 Mal um zu mischen. Diese Nummer kann natürlich angepasst werden.
for (Zaehler = 0; Zaehler < 30; Zaehler++) {
Wieder wird blah benutzt, dieses Mal als Variable für eine Zufallszahl. Ich weiß, dass es schlampig ist, dieselbe Variable für mehrere verschiedene Dinge zu verwenden... aber da JavaScript dies erlaubt, wen kümmert's? ;)
Man beachte außerdem: dasselbe sorgt dafür, dass der Computer seine Züge nicht wieder umkehrt (also dass er nicht ein gerade verschobenes Teil wieder zurückschiebt).
blah = Math.random(); if ((dasselbe != 1) && (blah < 1/4) && (Feld[0] < 3)) { Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0] + 1)][(Feld[1])]; Spielfeld[(Feld[0] + 1)][(Feld[1])] = 'T33'; Feld[0]++; dasselbe = 0; } else if ((dasselbe != 0) && (blah < 1/2) && (Feld[0] > 0)) { Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0] - 1)][(Feld[1])]; Spielfeld[(Feld[0] - 1)][(Feld[1])] = 'T33'; Feld[0]--; dasselbe = 1; } else if ((dasselbe != 3) && (blah < 3/4) && (Feld[1] < 3)) { Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0])][(Feld[1] + 1)]; Spielfeld[(Feld[0])][(Feld[1] + 1)] = 'T33'; Feld[1]++; dasselbe = 2; } else if ((dasselbe != 2) && (Feld[1] > 0)) { Spielfeld[(Feld[0])][(Feld[1])] = Spielfeld[(Feld[0])][(Feld[1] - 1)]; Spielfeld[(Feld[0])][(Feld[1] - 1)] = 'T33'; Feld[1]--; dasselbe = 3; } else continue; }
Dieser Abschnitt setzt die Teile jetzt an die richtige Position und versteckt das letzte Teil.
for (i = 0; i < 4; i++) { for (j = 0; j < 4; j++) { window.document.getElementById(Spielfeld[i][j]).style.top = eval(i * 100) + 'px'; window.document.getElementById(Spielfeld[i][j]).style.left = eval(j * 100) + 'px'; } } document.getElementById('T33').style.visibility = 'hidden'; }
Diese Funktion wird aufgerufen, wenn das Bild-Set verändert wird.
function ChangeTheme(Theme) { for (Zaehler = 0; Zaehler < 17; Zaehler++) { window.document.images[Zaehler].src = Bilder[Theme][Zaehler].src; } }
Die übliche Initialisierungsfunktion, die am Anfang aufgerufen wird. Sie schreibt die richtigen Teile in das Spielfeld-Array und ruft anschließend die Mischfunktion auf.
function init() { for (i = 0; i < 4; i++) { Spielfeld[i] = new Array(); for (j = 0; j < 4; j++) { Spielfeld[i][j] = 'T' + i.toString() + j.toString(); } } mischen(); }
Diese Funktion ist zum horizontalen Verschieben von Teilen. ID ist das zu bewegende Teil und Richtung bestimmt, ob nach links oder rechts geschoben wird. Die Bewegung selbst erfolgt in 10 Stufen mit je 10 Pixeln Unterschied.
function horizontal(ID,Richtung) { if (Zaehler < 10) { if (Richtung == 'l') document.getElementById(ID).style.left = parseInt(document.getElementById(ID).style.left) - 10 + 'px'; else document.getElementById(ID).style.left = parseInt(document.getElementById(ID).style.left) + 10 + 'px'; Zaehler++;
Die Funktion ruft sich nach 40 Millisekunden selbst wieder auf, um die nächste Stufe der Bewegung zu vollziehen.
Funktion = "horizontal('" + ID + "','" + Richtung +"')"; blah = setTimeout(Funktion,40); } else fertig = 1; }
Siehe horizontal, aber diesmal für die vertikale Bewegung.
function vertikal(ID,Richtung) { if (Zaehler < 10) { if (Richtung == 'u') document.getElementById(ID).style.top = parseInt(document.getElementById(ID).style.top) - 10 + 'px'; else document.getElementById(ID).style.top = parseInt(document.getElementById(ID).style.top) + 10 + 'px'; Zaehler++; Funktion = "vertikal('" + ID + "','" + Richtung +"')"; blah = setTimeout(Funktion,40); } else fertig = 1; }
Letztendlich die Funktion, die aufgerufen wird, wenn man auf ein Teil klickt.
function move(ID) {
Dieser Abschnitt prüft, wo sich das Teil befindet, welches angeklickt wurde.
O = parseInt(document.getElementById(ID).style.top) / 100; L = parseInt(document.getElementById(ID).style.left) / 100;
Dies ist für die Schiebebewegung der Teile.
Zaehler = 0;
Der folgende Abschnitt prüft, ob die Lücke sich irgendwo neben dem gerade angeklickten Teil befindet und ruft die entsprechende Funktion auf, wenn das zutrifft. Falls dem nicht so ist, passiert nichts und es wird auf den nächsten Klick gewartet.
if ((O < 3) && (Spielfeld[O+1][L] == 'T33')) { vertikal(ID,'d'); Spielfeld[O+1][L] = Spielfeld[O][L]; } else if ((O > 0) && (Spielfeld[O-1][L] == 'T33')) { vertikal(ID,'u'); Spielfeld[O-1][L] = Spielfeld[O][L]; } else if ((L < 3) && (Spielfeld[O][L+1] == 'T33')) { horizontal(ID,'r'); Spielfeld[O][L+1] = Spielfeld[O][L]; } else if ((L > 0) && (Spielfeld[O][L-1] == 'T33')) { horizontal(ID,'l'); Spielfeld[O][L-1] = Spielfeld[O][L]; } else { fertig = 1; return true; }
Jetzt wird geprüft, ob sich alle Teile in der richtigen Reihenfolge befinden. Wenn sich ein einzelnes Teil an der richtigen Stelle befindet, wird gewonnen inkrementiert.
gewonnen = 0; for (i = 0; i < 4; i++) { for (j = 0; j < 4; j++) { if (Spielfeld[i][j] == ('T' + i + j)) gewonnen++; } }
Wenn jetzt 15 Teile in der richtigen Reihenfolge sind (also alle, die man verschieben kann), dann wird das letzte Teil in die Lücke rechts unten eingefügt und sichtbar gemacht.
if (gewonnen == 15) { document.getElementById('T33').style.top = 300; document.getElementById('T33').style.left = 300; document.getElementById('T33').style.visibility = 'visible'; } Spielfeld[O][L] = 'T33'; return true; } </SCRIPT>
Jetzt wird noch der HTML-Teil des Skripts benötigt. Jedes Teil befindet sich auf einer DIV. Wenn man auf ein Teil klickt, wird geprüft, ob der gegenwärtige Zug bereits zuende ist (fertig muss in diesem Fall 1 sein) und wenn, dann wird anschließend die move()-Funtion mit dem aktuellen Teil als Parameter aufgerufen.
<DIV id="T00" style="position:absolute" onMouseUp="if (fertig) {fertig = 0; move('T00')}"> <IMG src="" alt="" height="100" width="100"> </DIV> <DIV id="T01" style="position:absolute" onMouseUp="if (fertig) {fertig = 0; move('T01')}"> <IMG src="" alt="" height="100" width="100"> </DIV> . . . <DIV id="T32" style="position:absolute" onMouseUp="if (fertig) {fertig = 0; move('T32')}"> <IMG src="" alt="" height="100" width="100"> </DIV> <DIV id="T33" style="position:absolute; visibility:hidden"> <IMG src="" alt="" height="100" width="100"> </DIV>
Außerdem wird eine Vorschau des Gesamtbildes benötigt. Diese ist in der 17.gif oder in der 17.jpg gespeichert.
<IMG src="" alt="Preview" height="200" width="200">
Dieser Abschnitt ruft die Initialisierung auf.
<SCRIPT type="text/javascript"> ChangeTheme(4); init(); </SCRIPT>
Um die verschiedenen Bild-Sets auszuwählen, benutze ich ein Aufklappmenü. Jeder Eintrag hat eine damit verbundene Nummer, die in der ChangeTheme()-Funktion geprüft wird. Der Standard-Eintrag ist bereits ausgewählt. Die Einträge hier sind für die mitgelieferten Sets, man kann auch seine eigenen Sets hier einbauen.
<SELECT onChange="ChangeTheme(this.value)"> <OPTION value="3">Basic</OPTION> <OPTION value="2">DaVinci</OPTION> <OPTION value="0">Dopefish</OPTION> <OPTION value="4" selected>JS-Games</OPTION> <OPTION value="1">Tower</OPTION> </SELECT>