Aufgabe:
Bereits in der Übung 1 (DHTML am Beipiel Nikitin-Würfel)
wurden Webseiten dynamisch verändert. Dies soll nun vertieft
werden.
Aus der Kindheit sind sicher die sogenannten Schiebe-Puzzle bekannt.
Dies sind quadratische Spielfelder mit beweglichen Zahlenfeldern
(zumeist 15 Felder und ein freies Feld). Durch geschicktes Verschieben
sind die 15 Zahlenfelder der Größe nach zu ordnen.
Dieses Schiebe-Puzzle soll nun mit JavaScript virtuell nachgebaut
werden.
- Erstellen Sie ein Dokument puzzle.htm, das im Kopf eine CSS-Datei css/puzzle.css und eine JavaScript-Datei js/puzzle.js referenziert. Im Körper soll ausschließlich der JavaScript-Aufruf init(); stehen.
- In der CSS-Datei css/puzzle.css ergänzen Sie nach und
nach die benötigten Formatierungen für alle dargestellten
Objekte. Verwenden Sie für alle Objekte jeweils die Klassenbezeichnung
puzzle (siehe Beispiele rechts).
ALLE Formatierungsbeschreibungen sollen HIER vorgenommen werden!
td.puzzle { background-color:teal;
align:center; valign:middle;
}
p.puzzle { align:center; font-size:48px; font-weight:bolder; }
- Den gesamten Aufbau des Körpers der HTML-Seite puzzle.htm
soll die Funktion init() der JavaScript-Datei js/puzzle.js übernehmen.
Beginnen Sie damit, die Header (h1 und h2), eine Tabelle (400px breit und hoch) und die Zellen darin darzustellen (in die Zellen innerhalb eines p-Tag anfangs Dummyzahlen eintragen). Deklarieren Sie auch ein globales Array puzzle, in das später die aktuellen Zellinhalte eingetragen werden.
Implementieren Sie während der
Entwicklung Testmeldungen:
- Widmen Sie sich nun dem Problem, zufällig die Zahlen
von 0 bis 15 im Array puzzle und in den p-Tags der Tabellenzellen
einzutragen.
Hier kann (wie im früheren Projekt LOTTO) ein Hilfsfeld mit bool'schen Werten nützlich sein. Statt '0' sollte das Zahlenfeld leer bleiben. Jede Tabellenzelle sollte nach Anklicken eine Funktion schieben (mit eigenem Namen als Parameter) aufgerufen werden. Testen Sie die korrekte Übergabe durch eine in schieben() platzierte AlertBox.
Denken Sie daran, NICHT die HTML-Datei puzzle.htm zu verändern!
document.writeln ('
<td class="puzzle"
name="zelle' + nr + '"
onClick="schieben(this.name)">
');
....
document.writeln ('</td>');
- Als nächstes soll das Problem bearbeitet werden, wie
nach Anklicken einer Tabellenzelle festgestellt wird, ob und
wohin das Zahlenfeld ziehen kann. Dies soll eine in schieben()
aufgerufene Funktion wohin() leisten, die die aktuelle Position
(im Array puzzle) erhält und die neue Position oder (falls
nicht bewegbar) den Wert -1 zurückgibt.
Zur Vorbereitung notieren Sie ein Flussdiagramm oder Struktogramm, das die vier unterschiedlichen Klassen zur aktuellen Position behandelt und die Prüfung, ob das erreichbare Nachbarfeld derzeit frei ist.
Ausschnitt / Denkhilfe:
Weise neuPos den Wert -1 zu.
Falls aktPos nicht in der oberen Reihe liegt: Ist Pos darüber
frei?
Dann gibt diese neuPos zurück.
Falls aktPos ...
Falls aktPos ...
Falls aktPos ...
Setzen Sie für die Implementierung
von wohin() weitere Testmeldungen ein.
Implementieren Sie eine Funktion pruefen(), die nach jedem Zug
das Erreichen der Zielpositionen prüft und ggf. eine Erfolgsmeldung
ausgibt.
Eine Funktion modulo (x,y) wird benötigt und muss selbst geschrieben werden. modulo (5,4) berechnet 5/4 und gibt den Rest 1 zurück.
Testmeldung nach Aufruf von wohin() in schieben():
- Implementieren Sie abschließend in einem Formularbereich die Anzeige benötigter Züge, ein aufrufbare Information und einen Button zum Zurücksetzen des Spiels. puzzle.htm wird NICHT verändert!
- Mögliche Ergänzungen:
- Realisieren Sie mittels Cookie die Möglichkeit, die besten zehn Ergebnisse lokal als TopTen abzuspeichern.
- Überlegen Sie, wie ein Protokoll aller durchgeführten Züge synchron dargestellt werden könnte.
- Erweitern Sie die Funktionen so, dass vor Spielbeginn die Spielfeldgröße (zwischen 3x3 und 6x6) wählbar wird.
Hilfreiche JavaScript-Schnipsel:
(vgl. auch Einführung
in DHTML bei SelfHTML)
hilf.push (new Boolean (false));
Fügt dem Array hilf ein weiteres Element mit Wert false zu.
document.writeln ( ... );
Schreibt eine HTML-Zeile in das aktuelle Dokument.
x = Math.floor (7/4);
liefert 1
y = modulo (7,4); // Funktion modulo() ist selbsterstellt!
sollte (Rest) 3 liefern
var zMax = Math.sqrt(puzzle.length); // Anzahl Elemente pro Puzzlezeile als Konstante
const erst ab JavaSript 1.5 möglich
function tauschen (altPos, neuPos)
{
puzzle[neuPos] = puzzle[altPos];
puzzle[altPos] = '';
document.getElementsByTagName("p")[neuPos].innerText =
String(puzzle[neuPos]);
document.getElementsByTagName("p")[altPos].innerText
= '';
document.ergebnis.schritte.value = String (eval(document.ergebnis.schritte.value)
+ 1); }
Kommentieren Sie jede
der Anweisungen der Funktion tauschen().
Was bewirkt die Funktion?
Wieso wird kein Hilfselement für den Tausch benötigt?