Projektdokumentation

Größe: px

Ab Seite anzeigen:

Download "Projektdokumentation"

Arthur Waldfogel
vor 9 Jahren
Abrufe

1 Projektdokumentation Schachspiel mit JavaScript Daniel Mockenhaupt Klasse 10b Projektdokumentation: Schachspiel mit JavaScript Seite 1

2 Einführung Ziel dieser Projektarbeit soll die Erstellung eines Schachspiels sein, bei dem der Benutzer gegen den Computer spielt. Es wird mit Hilfe von HTML, CSS und JavaScript realisiert und in einem Internet-Browser ausgeführt. Die besten Resultate werden mit dem Firefox-Browser von Mozilla erzielt. Dieses Dokument beinhaltet einen Überblick über die Funktionsweise des Programms. Da es allerdings sehr kompliziert ist und aus insgesamt mehreren tausend Zeilen Code besteht, kann hier nicht allzu detailliert auf die einzelnen Aspekte eingegangen werden. Bedienungsanleitung Die Datei JSChess_Main.html muss mit einem Browser geöffnet werden. Die Bedienung des Programms ist selbsterklärend. Der Nutzer spielt mit der Farbe Weiß und führt deshalb den ersten Zug aus, indem er auf die Figur, die er bewegen möchte, klickt und danach auf das Feld, auf das die Figur gesetzt werden soll. Ist der Zug ungültig, geschieht nichts und der Nutzer muss erneut zuerst auf die Figur, dann auf das Feld klicken, auf das sie gerückt werden soll. In der Ecke rechts oben wird die Farbe angezeigt, die gerade am Zug ist. Nach dem eigenen Zug erfolgt automatisch der Zug des Computers. Dies kann kurze Zeit in Anspruch nehmen. Alle Figuren sind durch Buchstaben die Anfangsbuchstaben der Figuren dargestellt. Gültig sind alle Züge wie beim normalen Schach. Wenn eine Figur geschmissen wurde, erscheint ihr Buchstabe im Feld unter dem Schachbrett. Anmerkung Da das Programm sehr kompliziert ist, kann es manchmal passieren, dass ein Fehler auftritt. In solch einem Fall kann man keinen Zug mehr tätigen. Das Starten eines neuen Spiels stellt die einzige Möglichkeit dar, das Problem zu beheben. Auch aufgrund der Auflösungs- und Browser-Kompatibilität kann es zu kleineren Beeinträchtigungen beim Spielen kommen, die sich meist jedoch auf Verschiebungen im Layout beschränken. Da die Programmierung einer Künstlichen Intelligenz als Gegner zu aufwändig wäre, werden die Computer-Züge zufällig generiert. Projektdokumentation: Schachspiel mit JavaScript Seite 2

3 Klassendiagramm Da JavaScript keine objektorientierte Programmiersprache sondern eine Skriptsprache ist, ist die Verwendung von Objekten nicht zwingend erforderlich. Da sie jedoch bei größeren Projekten die Übersichtlichkeit des Programmcodes deutlich erhöhen, habe ich mich dafür entschieden, das Schachspiel mit Objekten zu realisieren. Das Hauptobjekt stellt dabei das Schachbrett-Objekt dar. Dies kann man sich gut wie ein Schachbrett in der Realität vorstellen. Es enthält als Eigenschaften die 64 Felder des Schachbrettes und speichert die Position einer jeden Figur. Daher werden für die Schachfiguren keine eigenen Objekte erstellt. Ein weiteres Objekt stellt das Objekt der Klasse Checker dar. Dies lässt sich nicht auf die Realität projizieren, ist allerdings das wichtigste Objekt des Programms. Es überprüft für jeden getätigten Zug dessen Gültigkeit. Das Checker-Objekt enthält sozusagen die Spielregeln und wendet diese an. Schachbrett possb1, possb2, possb3, possb4, possb5, possb6, possb7, possb8, posst1, posst2, posss1, posss1, possl1, possl2, possd, possk WorB counter name pos aktfigure Checker poswb1, poswb2, poswb3, poswb4, poswb5, poswb6, poswb7, poswb8, poswt1, poswt2, posws1, posws1, poswl1, poswl2, poswd, poswk Projektdokumentation: Schachspiel mit JavaScript Seite 3

4 Erklärung der Eigenschaften Das Schachbrett-Objekt speichert wie bereits erwähnt die Positionen der einzelnen Spielfiguren. Es enthält daher 32 Eigenschaften. Deren Namen sind alle nach dem gleichen Prinzip aufgebaut, wie im Folgenden verdeutlicht. Figur (hier Bauer) possb1 Nummer (hier 1. Bauer) Farbe (hier Schwarz) Die 32 Variablen speichern jeweils, auf welchem Feld die entsprechende Figur steht. Dafür wird ein numerischer Wert verwendet. Die Felder des Schachbrettes haben folgende Nummern erhalten: Beispiel: Hat die Eigenschaft poswd den Wert 88, bedeutet dies, dass die weiße Dame sich auf dem Feld in der rechten unteren Ecke befindet. Projektdokumentation: Schachspiel mit JavaScript Seite 4

5 Erklärung des Programmcodes JSChess_Main.html stellt die Main -Datei dar. Hierin werden alle anderen JavaScript-Dateien eingebunden und verwendet. Im Folgenden soll ein grober Überblick über den Aufbau dieser Haupt-Datei vermittelt werden. Zu Beginn des Quellcodes steht die Deklaration des Styles, in dem das Layout für die einzelnen Elemente definiert wird. Die folgende Zeile legt beispielsweise fest, dass Überschriften dritter Ordnung zentriert und unterstrichen dargestellt werden. h3 {text-align: center; text-decoration: underline} Auf die Style-Definition folgt die Einbindung der externen JavaScript-Dateien, wie hier die JavaScript-Ressource, die die Funktionen für Züge nach rechts beinhaltet: <script type="text/javascript" src="mychess_moveright.js"></script> Danach steht das eigentliche JavaScript-Programm, aus dem nun wichtige Stellen näher betrachtet werden sollen. Zu Beginn wird das Schachbrett-Objekt aus der Klasse Schachbrett erstellt. Als Parameter, die später die Eigenschaften des Objektes darstellen, werden die Positionen der einzelnen Figuren übergeben. Schachbrett = new Schachbrett(21,22,23,24,25,26,27,28,11,18,12,17,13,16,15,14, 71,72,73,74,75,76,77,78,81,88,82,87,83,86,85,84); Nun ist das Schachbrett virtuell gefüllt, allerdings sieht der Benutzer noch keine Figuren auf dem Brett (Das Schachbrett besteht aus HTML-Div-Elementen). Deshalb wird durch die Funktion fillboard für alle Figuren ihr Anfangsbuchstabe in das Feld geschrieben, auf dem sie sich befinden. Dies geschieht durch Anweisungen wie die Folgende. document.getelementbyid(schachbrett.possb1).innerhtml = '<span class= "black">b</span>'; Schachbrett.posSB1 hat die Position des ersten schwarzen Bauers gespeichert. Das Element mit der entsprechenden ID, auf das zugegriffen wird, repräsentiert das Feld auf dem der Bauer erscheinen soll. Durch das Ändern der Eigenschaft innerhtml wird der Buchstabe B in das Feld geschrieben, der für Bauer steht. Jetzt haben wir das Schachbrett mit allen Figuren befüllt. Bei einem Klick auf ein Feld sollen nun diverse Anweisungen ausgeführt werden. Um den Klick zu detektieren wird folgende Anweisung benutzt. <div onclick="test(11)"></div> Projektdokumentation: Schachspiel mit JavaScript Seite 5

6 Erfolgt ein Klick auf das Feld, wird die Funktion test mit der Feld-ID aufgerufen. Diese Funktion wartet nach dem ersten Klick auf einen weiteren Klick auf ein anderes Feld. Hat sie das Zahlenpaar der beiden Felder erhalten, ruft sie die ausgelagerten Funktionen auf, die jeweils die Gültigkeit des Zuges überprüfen. So ist z.b. in der Datei MyChess_moveRight.js die Funktion moveright enthalten, die zuerst überprüft, ob die gewählte Figur nach rechts gehen kann, und wenn dies der Fall ist, den Zug ausführt. Interessant ist noch, wie die Züge des Computers zustande kommen. Die Funktion randommove erzeugt zwei zufällige Zahlen. Dies geschieht durch folgende Codezeile. randnr1 = Math.round((Math.random() * 100)); Die Zufallszahlen werden nun als die zwei Felder interpretiert, auf die der Computer klickt. Ist der Zug ungültig, werden zwei neue Zufallszahlen generiert. Dies wird so lange wiederholt, bis ein gültiger Zug stattfindet. Abschließende Bemerkung In obiger Beschreibung konnte aufgrund der Komplexität des Programms nur ein kleiner Überblick über dessen Funktionsweise und Aufbau gegeben werden. Quellen Deckblatt: Projektdokumentation: Schachspiel mit JavaScript Seite 6

Ähnliche Dokumente

Funktionen in JavaScript

Funktionen in JavaScript Eine Funktion enthält gebündelten Code, der sich in dieser Form wiederverwenden lässt. Mithilfe von Funktionen kann man denselben Code von mehreren Stellen des Programms aus aufrufen.