JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 329

Die Einzelteile zusammenfügen

Das Spiel entwickeln

Nachdem HTML und CSS vom Tisch sind, können wir uns jetzt dem Spieldesign zuwenden. In Kapi-

tel 2 gab es noch keine Funktionen, Objekte, Verkapselung oder gar objektorientierte Programmierung.

Deshalb war die erste Version von »Schiffe versenken« einfach prozedural programmiert. Das Spiel

bestand aus einer Abfolge von Arbeitsschritten mit ein paar eingestreuten Bedingungsanweisungen und

Iterationen. Das DOM war ebenfalls noch nicht bekannt. Das Spiel war auch noch nicht sehr interak-

tiv. Dieses Mal wollen wir das Spiel in Form von Objekten mit jeweils einem bestimmten Aufgabenbe-

reich entwickeln. Außerdem benutzen wir das DOM für die Interaktion mit dem Benutzer. Sie werden

sehen, dass dieses Design die Problembehandlung stark vereinfacht.

Wir wollen Ihnen zuerst die drei Objekte für das Design und die Implementierung des Spiels vorstel-

len: das Model, das den Zustand des Spiels enthält, z. B. die Positionen der Schiffe und der möglichen

Treffer, den View, der für die Aktualisierung der Darstellung sorgt, und den Controller, der alles zusam-

menhält, Benutzereingaben verarbeitet, die Spiellogik umsetzt und feststellt, wann das Spiel vorbei ist.

Model

View

Controller

Ich aktualisiere die

Darstellung mit Treffern,

Fehlversuchen und

Meldungen an den

Benutzer.

Ich muss die Schiffe im

Auge behalten: wo sie sind

und ob sie getroffen oder

versenkt wurden.

Ich halte alles

zusammen, inklusive der

Benutzereingaben und der

Spiellogik.

330 Kapitel 8

Übung zum Erstellen des Views

Hier ist eine Nachricht.

Nachrichten können Dinge

sein wie »TREFFER!«,

»DANEBEN!« und

»Schiff versenkt!«.

Hier wurde die

Grafik »miss.png«

auf dem Raster

platziert.

Und hier wird ein Schiff auf

dem Raster angezeigt.

Zeit für etwas Objektdesign. Wir beginnen mit dem View-Objekt für die Aktualisie-

rung der Darstellung. Schreiben Sie anhand des unten stehenden Bilds auf, welche

Methoden das View-Objekt benötigt (aber nur die Deklarationen, die Körper der

Methoden programmieren wir etwas später). Erklären Sie außerdem mit einem

oder zwei Kommentaren, was die jeweilige Methode tut. Eine haben wir schon für

Sie erstellt. Überprüfen Sie vor dem Weiterlesen Ihre Antworten:

var view = {

// Diese Methode übernimmt einen Nachrichten-String und

// zeigt ihn im Nachrichtenbereich an.

displayMessage: function(msg) {

// Den Code liefern wir gleich !

}

};

Hier kommen Ihre Methoden

hin!

Wir definieren ein Objekt und weisen es der

Variablen view zu.

Übung