Alignmentpuzzle

Entwicklung des Spiels

1. Woche (03.05. - 09.05.17):

  1. Treffen am 03.05.17:
    Lea und Harald bilden das Team Puzzle
Vorlagespiel „Phylo“:
  • Nähere Analyse von „Phylo“, um erste Ideen für das eigene Spiel zu sammeln.
  • Fragestellungen: Welche Aspekte des Spiels sind gut, welche sollten überarbeitet oder verbessert werden?
    • Negativ kritisiert: Kein ansprechendes Design, fehlende Erklärungen zur Funktionsweise des Spiels, unverständliche Scoring-Parameter, kein Bezug zur Bioinformatik.
    • Positiv aufgefallen: Das Spiel ist einwandfrei spielbar, wenn dem Spieler die Funktion und das Ziel des Spiels klar sind.
Ideen für eigenes Puzzle:
  • Die Positionen der verschiedenen Scoringwerte sollten klar festgelegt und mit Namen gekennzeichnet werden, sodass der Spieler den aktuellen Score, den bislang besten Score und den bestmöglichen Score klar erkennen und auseinanderhalten kann.
  • Das Spiel soll zunächst nur den Vergleich von DNA-Sequenzen betrachten, wobei die einzelnen Basen durch Farbe, unterschiedliche Symbole und das DNA-Basen Alphabet (C, G, A, T) klar voneinander unterscheidbar sein sollen.
  • Es soll erkennbar sein aus welchem Organismus oder Gen die zu bearbeitenden Sequenzen stammen.
  • Scoring-Parameter sollen zum besseren Verständnis angezeigt und beschrieben werden.

2. Woche (10.05. - 16.05.17):

Besprechung am 2.Treffen (10.05.17):
  • Auflisten der Pros und Kontras bezüglich des Spiels „Phylo“
  • Vorstellen der Ideen für das eigene Puzzle
  • Besprechen dieser Ideen im gesamten Team und Sortieren nach Umsetzbarkeit und Wichtigkeit
Erste Implementationen / Ziele:
  • Erstellen von Elementen, die die DNA-Basen der alignierten Sequenzen repräsentieren, für das Spiel
  • Die DNA-Basen werden in Form von einfachen, farbigen Rechtecken dargestellt. Sie liegen in einem aus Linien aufgebauten Raster.
  • Erlernen von Event-Listenern in JavaScript und deren Anwendung. Dazu gehören Befehle wie onmousedown, onmousemouve und onmouseup, die benötigt werden, um ein Element mithilfe der Maus zu packen, zu bewegen und wieder loszulassen.

3. Woche (17.05. - 23.05.17):

Neue Zielsetzungen:
  • Ein Prototyp der Webseite muss mit einer funktionierenden Spielversion für zwei Sequenzen bis zum 31.05.17 vorzeigbar sein.
  • Lösung des Nachbar- und Randproblems finden.
    • Problem: Die Basen lassen sich übereinander verschieben und können aus dem Spielfeld bewegt werden.
Implementationen:
  • Es wird ein Mindestabstand zwischen den Basen festgelegt, der auch während des Bewegungsvorganges eingehalten werden soll, sodass das Übereinanderschieben nicht mehr möglich ist.
  • Sobald eines der äußersten Kästchen das Rasterende erreicht hat wird die Bewegung in diese Richtung abgebrochen, sodass alle Basen im Spielfeld verbleiben. Funktioniert jedoch noch nicht optimal.

4. Woche (24.05. - 30.05.17):

Das Treffen am 24.05.17 wird aufgrund einer Klausur verschoben

Neue Zielsetzungen:
  • Felder erstellen, in denen die Basen mit bestimmten Abstand zueinander einrasten können.
Implementationen:
  • Koordinaten der erstellten Felder werden den Basen übergeben, sodass diese nach dem Bewegungsvorgang in entsprechendes Feld einrasten und platziert werden können.
  • Verbesserung der Lösung des Randproblems: Der Bewegungsvorgang wird abgebrochen, wenn die Koordinaten des letzten Kästchens größer als die des letzten Feldes werden.

5. und 6. Woche (31.05. - 13.06.17):

Wichtige Meilensteine:
  • Die drei Teilbereiche Webseite, Puzzle und Score-Berechnung wurden zum Prototyp zusammengefügt und erstmals zusammen auf der Webseite angezeigt.
  • Der Prototyp lässt sich mit zwei festgelegten Sequenzen spielen.
Neue Ideen:
  • Das Spielfeld soll nicht mehr statisch, sondern dynamisch programmiert werden, wodurch das Spiel flexibler gehalten werden kann.
Neue Zielsetzungen:
  • Das Spiel soll auf mehrere Sequenzen erweitert und das Design stark optimiert werden.
  • Veränderungen der Lösungen des Rand- und Nachbarproblems, sodass diese auch dynamisch funktionieren.
  • Das Spielfeld soll sich abhängig von der Bildschirmgröße des Spielers verändern und sich relativ zu der Größenveränderung des Browserfensters mitverschieben.
Implementationen:
  • Die Basen werden mittels JavaScript nun dynamisch erzeugt. Dafür werden mehrere Strings als Eingabe verwendet, aus denen entprechend mehrere übereinanderligende Sequenzen aus Basen und zufällig eingefügten Gaps erstellt werden.
  • Veränderung der Basenform zu einer Murmel und Anbringen eines farbigen Hintergrunds auf dem ein rechteckiges Spielfeld liegt, das die Sequenzen optisch vom Hintergrund abgrenzen soll. Horizontale Linien aus Punkten stellen die Felder dar auf denen die Sequenzen angezeigt werden. Jeder Punkt kann mit einer Base besetzt werden, wobei das Freibleiben eines Punktes ein Gap symbolisiert.

7. Woche (14.06. - 20.06.17):

Implementationen:
  • Die Gruppe einigt sich auf ein einheitliches Hintergrundbild, das auf allen Seiten der Webseite als verbindendes Element angezeigt werden soll.
  • Die Form der Basen wird zu Rechtecken mit abgerundeten Ecken verändert.
  • Über dem Spielfeld werden nun die Felder „Aktueller Score“ und „Bester Score“ angezeigt, in die die berechneten Scores mit eingebunden sind.
  • Es wird ein Optionsfenster erstellt, das nach Erreichen des besten Scores angezeigt werden soll. In diesem kann entschieden werden, ob der/die Spielende ein nächstes Level spielt, das jetztige Spiel noch weiterspielen will, um mögliche andere Alignments zu finden, oder ob das Spiel verlassen möchte.

8. Woche (21.06. - 27.06.17)

Wichtige Meilensteine:
  • Das neue Spiel wird wieder in die Webseite mit eingebunden.
Neue Zielsetzungen:
  • Ein Zwischenvortrag vor Frau Prof. K. Nieselt soll für den 05.07.17 vorbereitet werden.
Implementationen:
  • Zur lebendigeren Gesataltung des Spiels werden die Score-Felder in Bewegung gebracht, sodass sie sich auf und ab bewegen. Die Basen vibrieren zudem leicht.

9. Woche (28.06. - 04.07.17)

Neue Ideen:
  • Es soll ein kleines Fenster erstellt werden, in dem neben dem Spielfeld angezeigt wird, welche Werte eine gleiche Basenpaarung, eine ungleiche Basenpaarung und eine Paarung mit einer Lücke tragen.
Zwischenpräsentation:
  • Die Themen der Zwischenpräsentation werden besprochen und eine Powerpoint-Präsentation vorbereitet.
  • Am 04.07.17 ergibt sich die Möglichkeit den Zwischenvortrag zur Probe vor einem der Betreuer zu präsentieren.

10. Woche (05.07. - 11.07.17)

Neue Ideen:
  • Es soll ein Tutorial entworfen werden, das die Spielidee und den Aufbau des Spiels genauer darstellt, da das Hilfefenster zur Erklärung der Funktionsweise des Spiels nicht ausreicht. Das Tutorial soll eine Abfolge von kurzen Videos enthalten, in denen die Funktionsweise erklärt und gezeigt wird.
Implementationen:
  • Es wird ein Feld erstellt, dass durch Anklicken die Tutorialseite aufruft.
Zwischenpräsentation:
  • Die Zwischenpräsentation wird am 05.07.17 vor Frau Prof. K. Nieselt gehalten.

11. Woche (12.07. - 18.07.17)

Neue Zielsetzungen:
  • Es soll ein Regler-Feld erstellt werden, in dem die Scoring-Parameter verändert und angepasst werden können.
Implementationen:
  • Das Fenster mit den Reglern für die Scoring-Parameter wird erstellt. Es ist nur aufrufbar, wenn ein Spieler sich nach Erreichen des besten Scores noch weiter mit dem gefundenen Alignment beschäftigen möchte.

12. Woche (19.07. - 25.07.17)

Neue Zielsetzungen:
  • Auf den Basen soll entsprechend ihrer Art ein Buchstabe angezeigt werden, der verdeutlichen soll, dass es sich um DNA-Sequenzen handelt.
Implementationen:
  • Die Buchstaben C, G, A und T werden entsprechend für Cytosin, Guanin, Adenin und Thymin auf die Basen gesetzt.
  • Es werden Videos erstellt, die als Tutorial dienen sollen. Diese werden in das Tutorial-Fenster eingefügt und laufen dort bis zur Schließung des Fensters in Dauerschleife.

Ab der 13. Woche (26.07. - 31.08.17)

Implementationen:
  • Es wird ein Zahnrad erstellt, das beim Anklicken ein Menüfenster aufruft. Darin lassen sich die Hintergrundmusik und die Bewegungsgeräusche der Basen aus- und einschalten, sowie die Anzeige des DNA-Buchstaben Codes ausblenden.
  • Der gesamte Code wird überarbeitet und refactored.
  • Neben den Sequenzen wird der Name des Gens angezeigt, aus dem sie stammen. Fährt man mit der Maus über einen Namen, so werden weitere Informationen zum Gen sowie der Ursprungsorganismus agezeigt.

Das Alignmentpuzzle

Definition: Alignmentpuzzle

Ein Alignmentpuzzle ist ein Spiel, in dem der Spieler versucht ein bestmögliches Alignment für mindestens zwei Sequenzen zu finden. Das Ziel des Spiels ist es, die gegebenen Sequenzen durch Verschieben ihrer Elemente auf eine Weise gegeneinander auszurichten, dass ihre Ähnlichkeit so groß wie möglich wird. Dabei können die Elemente nur innerhalb ihrer Sequenz verschoben werden, ohne die Reihenfolge zu vertauschen. Die Ähnlichkeit der zu alignierenden Sequenzen wird mithilfe eines Scores gemessen, der für jede Spalte die Elemente aller Sequenzen miteinander vergleicht und in Match, Mismatch und Gap klassifiziert. Für alle Spalten wird ein Score gemäß den Scoring-Werten der verschiedenen Klassifizierungen bestimmt. Die Addition aller Spaltenscores ergibt den Gesamtscore des Alignments. Innerhalb des Spiels werden dem Spieler der bestmögliche Score und der derzeitige Spielerscore angezeigt. Erreicht dieser durch perfektes Alignieren den bestmöglichen Score, so hat er das Spielziel erreicht und kann in weiteren Levels mit neuen Sequenzen spielen.

Aufbau des Spiels

Spielfeld

Das von uns entworfene Alignmentpuzzle lässt sich innerhalb eines Spielfelds steuern, das sich zentral auf der Spielseite befindet. Es beinhaltet DNA-Sequenzen aus Basen, die als Kästchen auf horizontalen, gepunkteten Linien angeordnet sind. Dabei steht das blaue Kästchen für die Base Cytosin, das gelbe Kästchen für die Base Guanin, das rote Kästchen für die Base Adenin und das grüne Kästchen für die Base Thymin.

Die Basen der Sequenzen sind jeweils immer auf einem Punkt angeordnet und können nur einrasten, wenn sie beim Verschieben über einem Punkt losgelassen werden. Sind in den Sequenzen Gaps vorhanden, so kann dies an freien Punkten, auf denen keine Base liegt erkannt werden. Die Basen lassen sich horizontal innerhalb des Spielfelds verschieben. Schiebt der Spieler ein Element auf ein anderes, so wird dieses in dieselbe Richtung mitverschoben, sofern es noch genügend freie Punkte in dieser Richtung gibt. Sind schon alle Punkte belegt, so können die Basen nicht weiterverschoben werden, da sonst die Länge des Alignments verändert werden würde und die Base aus dem Spielfeld verschwinden würde.

Über dem Spielfeld werden dem Spieler in den Feldern „Aktueller Score“ und „Bester Score“ der momentaner Score und der bestmögliche Score des Alignments angezeigt. Der aktuelle Score wird bei jeder Aktion, die der Spielende durchführt - also wenn mindestens ein Kästchen verschoben wird -, neu berechnet und angezeigt.

Zusätzliche Elemente

Links vom Spielfeld werden auf einem Feld die Scoring-Parameter angezeigt, sodass der Spieler weiß, welche Werte für den Match Score, den Mismatch Score und der Gap Penalty bei der Score Berechnung verwendet werden. Wird das darüberliegende Hilfefenster aufgeklappt, so erhält der Spieler Informationen zur Score Berechnung, die zum Verständnis des Spiels beitragen sollen. Es wird angezeigt, wie ein Match, ein Mismatch und ein Gap aussehen und welche Scoring Parameter sie tragen. Zudem gibt es zwei Beispiele von Alignments mit drei Sequenzen der Länge von einer Base, in denen allgemein gezeigt wird, wie sich der Score berechnet.

Darunter kann ein Tutorialfenster augeklappt werden, das sich über die ganze Seite ausbreitet. Darin wird in kurzen Videos gezeigt, wie Sequnzen miteinander aligniert werden können, dass Gaps sinvoll sein können und nicht nur identische Basen miteinander aligniert werden müssen.

Klickt der Spieler auf das Zahnrad rechts oberhalb des Spielfelds, so öffnet sich ein Menüfenster. In diesem können die Hintergrundmusik des Spiels sowie die Klickgeräusche der Basenbewegung aus- und eingeschaltet werden. Zudem kann einstellt werden, ob die zugehörigen Basen-Symbole A, C, G und T auf den Kästchen angezeigt werden oder nicht. Außerdem ist es hier möglich das gerade laufende Spiel zu verlassen und ein neues Spiel zu beginnen.

Oberhalb des Alignmentpuzzles hat der Spieler die Möglichkeit auch die anderen Seiten der Webseite zu besuchen. So kann er zur Startseite wechseln, sich Themen der Bioinformatik durchlesen oder etwas über das Team erfahren.

Ablauf des Spiels

Wählt ein Spieler auf der Startseite der Webseite das Alignmentpuzzle aus, so wird er auf die Spielseite weitergeleitet und kann sich zwischen sechs Schwierigkeitsstufen des Spiels entscheiden. So sind die Level aufgeteilt in „sehr leicht“, „leicht“, „mittel“, „schwer“, „sehr schwer“ und „legendär“. Im Level „sehr leicht“ müssen zwei Sequenzen miteinander aligniert werden. Pro Level kommt eine weitere Sequenz hinzu, sodass im letzten Level („legendär“) sieben Sequenzen miteinander alignieren werden müssen. Entscheidet sich der Spieler für das einfachste Level, so wird zunächst das Tutorialfenster geöffnet, welches ihm zeigen soll, wie das Spiel funktioniert. Danach kann er sich selbst am Spiel versuchen. Bei allen anderen Leveln kann der Spieler gleich anfangen die Sequenzen zu alignieren und sich die Tutorials nur bei Bedarf anschauen.

Während des Spiels, wird nach jeder Bewegung einer Base neben dem neuen aktuellen Score angezeigt, um welchen Wert dieser von dem vorherigen abweicht. Ist der optimale Score erreicht, so öffnet sich ein Fenster, indem der Spieler zum Erreichen des optimalen Alignments gelobt wird. Darunter wird ihm die Zeit angezeigt, die er zum Lösen benögt hat. In diesem Fenster kann er nun entschieden, ob er das Spiel weiterspielen möchte, wobei er herumprobieren kann, wie sich das Verändern der Scoring-Parameter auf das optimale Alignment auswirkt. Oder er kann das aktuelle Spiel verlassen, sich ein Level aussuchen und ein neues Spiel starten. Spielt der Spieler weiter, so erscheint das Reglerfeld, in dem er die Scoring-Parameter verändern kann und ein „nächstes Level“-Feld, das ihm ermöglicht, das Spiel zu beenden und ein neues zu beginnen.

Implementation in JavaScript

Konstanten

int MAX_ELEMENTS_PER_ROW Die maximale Anzahl an Basen pro Reihe.

int MAX_AMOUNT_OF_ROWS Die maximale Anzahl an Reihen.

String A_BASE_COLOR Die Farbe der Base A (Adenin).

String T_BASE_COLOR Die Farbe der Base T (Thymin).

String G_BASE_COLOR Die Farbe der Base G (Guanin).

String C_BASE_COLOR Die Farbe der Base C (Cytosin).

String A_BASE_BORDER_COLOR Die Randfarbe der Base A (Adenin).

String T_BASE_BORDER_COLOR Die Randfarbe der Base T (Thymin).

String G_BASE_BORDER_COLOR Die Randfarbe der Base G (Guanin).

String C_BASE_BORDER_COLOR Die Randfarbe der Base C (Cytosin).

Variablen

float baseWidth Die Basenbreite.

float baseHeight Die Basenhöhe.

float distanceToNextBase Der Mindestabstand zweier Basen zueinander.

float gameLeftEdge Der linke Rand des Spielbereichs im Spielfeld.

float gameRightEdge Der rechte Rand des Spielbereichs im Spielfeld.

float gameTopEdge Der obere Rand des Spielbereichs im Spielfeld.

float gameBottomEdge Der untere Rand des Spielbereichs im Spielfeld.

float distanceToNextRow Der Abstand einer Reihe/Sequenz zur darunter und darüber liegenden.

Array lockFields Beinhaltet die Koordinaten für die Einrastfelder.

Array alignment Beinhaltet Sequenzen, die zusammen das Alignment ergeben.

element currentBase Eine Referenz auf die aktuell anvisierte Base.

String pointerType Der Zeigertyp.

float pointerCords Die X-Koordinate des Zeigers.

float pointerCordsToBaseDistance Die Differenz der X-Koordinate des Zeigers zur X-Koordinate der anivsierten Base.

int currentScoreDifferenceMovement Die Differenz zwischen dem aktuellen Punktestand und dem vorherigen.

String menuGate Gibt den Anzeigestatus des Menüfensters an.

element currentSlider Eine Referenz auf den aktuell anvisierten Regler.

float difference Die Differenz der Y-Koordinate des Zeigers zur Y-Koordinate des anivsierten Reglers.

Boolean sliderSoundAudio Ein Status, der das Reglerklickgeräusch steuert.

Array sliderLockInFields Beinhaltet die Stellen, auf denen die Regler einrasten können.

Methoden

1. Spielfeld Erzeugung (Klasse: setter_gameField):

setGameField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Erstellt das Spielfeld mit allen nötigen Komponenten.
    • Zu den Komponenten zählen:
      1. Spielfeldfläche
      2. Einrastfelder
      3. Reihen mit Sequenzen
      4. Die dazugehörigen Basen
setGameArea()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Spielfeldfläche auf die Webseite.
setBordersForBases()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Spielbereich innerhalb der Spielfeldfläche.
setLockFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Felder, in denen die Basen einrasten können.
setBaseDimensions()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Größe einer Base.
setSequenceRows()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt Markierungen in den Spielbereich, welche die Einrastfelder repräsentieren. Setzt Sequenzen bestehend aus Basen horizontal auf eine Reihe von Markierungen.
setMarksOnLine(float distanceToTop,String idName)
  • Eingabe: float, String
  • Ausgabe: keine Ausgabe
  • Funktion: Legt Markierungen auf einer horizontalen Linie, die einen Abstand von „distanceToTop“ zur oberen Kante des Spielfelds hat und weist jeder Markierung in Abhängigkeit von „idName“ eine ID zu. Diese Markierungen repräsentieren die Stellen der Einrastfelder.
setMarkAttributes(element mark,float distanceToTop,String idName)
  • Eingabe: element, float, String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Element „mark“ die Eigenschaften einer Markierung zu.
    • Eigenschaften sind:
      1. Stelle „position“ auf der Horizontalen
      2. Abstand zur oberen Spielfeldkante „distanceToTop“
      3. Größe
      4. Farbe
      5. ID „idName“
setBasesInRow(Array sequence,float distanceToTop,String idName)
  • Eingabe: Array, float, String
  • Ausgabe: keine Ausgabe
  • Funktion: Iteriert durch die Sequenz „sequence“ und platziert die darin enthaltenen Basen in der angegebenen Reihenfolge auf Markierungen, welche ebenfalls einen Abstand „distanceToTop“ zur oberen Spielfeldkante haben. Zusätzlich wird jeder Base eine ID „idName“ zugewiesen.
setBase(float distanceToTop,int position, String idName,String className)
  • Eingabe: float, int, String, String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine Base auf eine Markierung, welche den gegebenen Abstand „distanceToTop“ zur oberen Spielfeldkante hat und auf einer gegeben Stelle „position“ auf der Horizontalen liegt. Die Base bekommt eine ID „idName“ und eine Klasse „className“ zugewiesen.
setBaseAttributes(element base,String className,float distanceToTop,int position)
  • Eingabe: element, String, float, int
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Element „base“ die Eigenschaften einer Base zu.
    • Eigenschaften hier sind:
      1. Breite und Höhe
      2. Abstand „distanceToTop“ zur oberen Spielfeldkante
      3. Stelle „position“ auf der Horizontalen
setBaseEvents(element base)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Element „base“ die Funktionen einer Base zu. Diese verwalten das Greifen, Ziehen und Loslassen einer Base.

2. Interaktion mit Benutzer:

Getter für Baseninteraktion (Klasse: getter_game):

getNumberOfBasesInCurrentRow()
  • Eingabe: keine Eingabe
  • Ausgabe: int
  • Funktion: Gibt die Anzahl an Basen aus, die in der Reihe der anvisierten Base vorliegen.
getBaseNumFromLeft()
  • Eingabe: keine Eingabe
  • Ausgabe: int
  • Funktion: Gibt die Anzahl der Basen bis zur anvisierten Base von links zählend aus.
getBaseNumFromRight()
  • Eingabe: keine Eingabe
  • Ausgabe: int
  • Funktion: Gibt die Anzahl der Basen bis zur anvisierten Base von rechts zählend aus.
getBaseXcord(String baseId)
  • Eingabe: String
  • Ausgabe: float
  • Funktion: Greift über die ID „baseId“ auf die dazugehörige Base zu und gibt deren X-Koordinate aus.
getBaseClass(String baseId)
  • Eingabe: String
  • Ausgabe: String
  • Funktion: Greift über die ID „baseId“ auf die dazugehörige Base zu und gibt deren Klasse aus.

Setter für Baseninteraktion (Klasse: setter_game):

setCurrentBase(element base)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist das Element „base“ der globalen Variable „currentBase“ zu.
setPointerType(event e)
  • Eingabe: event
  • Ausgabe: keine Ausgabe
  • Funktion: Anhand von „event“ wird der vorliegende Event-Typ der globalen Variable „pointerType“ zugewiesen
setPointerCords(event e)
  • Eingabe: event
  • Ausgabe: keine Ausgabe
  • Funktion: Anhand von „event“ wird die X-Koordinate des vorliegenden Events der globalen Variable „pointerCords“ zugewiesen.
setPointerCordsToBaseDistance()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Differenz der X-Koordinate des Events „pointerCords“ zur X-Koordinate der anvisierten Base „currentBase“ in die globale Variable „pointerCordsToBaseDistance“.
setNewAlignment()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt nach Ausführung einer Basenbewegung das Alignment in der globalen Variable „alignment“ entsprechend neu.

Basen Interaktion (Klasse: interaction_game):

startDrag(event e,element obj)
  • Eingabe: event, element
  • Ausgabe: keine Ausgabe
  • Funktion: Verwaltet den Start der Interaktion zwischen Benutzer und Base.
doBaseDrag(event e)
  • Eingabe: event
  • Ausgabe: keine Ausgabe
  • Funktion: Verwaltet die Ausführung der Interaktion zwischen Benutzer und Base. Dazu gehört das Aktualisieren der Event-Koordinaten in jedem Bewegungsschritt und das Neusetzen der Base(n).
stopBaseDrag()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Verwaltet das Ende der Interaktion zwischen Benutzer und Base. Dazu gehört die Aufnahme des neuen Spielstands und die Berechnung des aktuellen Scores.
moveBase()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Führt die Basenbewegung aus.
isBaseOutOfItsRange()
  • Eingabe: keine Eingabe
  • Ausgabe: boolean
  • Funktion: Gibt aus, ob die aktuell anvisierte Base noch in ihrem Bewegungsbereich ist.
currentBaseArea()
  • Eingabe: keine Eingabe
  • Ausgabe: String
  • Funktion: Gibt aus, in welchem Bereich sich die aktuell anvisierte Base befindet.
    • Bereiche sind:
      1. das am weitesten links liegende Feld
      2. das am weitesten rechts liegende Feld
      3. die Felder zwischen den beiden äußersten Feldern
isPointerHigher()
  • Eingabe: keine Eingabe
  • Ausgabe: boolean
  • Funktion: Gibt aus, ob der nächste Bewegungsschritt über die rechte Grenze des Bewegungsbereichs der anvisierten Base führt.
isPointerLower()
  • Eingabe: keine Eingabe
  • Ausgabe: boolean
  • Funktion: Gibt aus, ob der nächste Bewegungsschritt über die linke Grenze des Bewegungsbereichs der anvisierten Base führt.
makeMoveIfPossible(String area)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Anhand des aktuell vorliegenden Bereichs „area“, in der sich die anvisierte Base befindet, wird darüber entschieden, ob eine Basenbewegung möglich ist. Falls ja, wird diese durchgeführt.
keepDistanceToNextBases()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Es wird bei jedem Bewegungsschritt geprüft, ob ein festgelegter Distanzwert „distanceToNextBase“ von einer Base zu ihren Nachbarn vorliegt.
keepDistanceToLeftBases()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Prüft ausgehend von der aktuell anvisierten Base, ob der Mindestabstand „distanceToNextBase“ zum nächsten linken Nachbar eingehalten wird und setzt gegebenfalls den linken Nachbar passend neu, sodass der Mindestabstand wieder vorhanden ist.
keepDistanceToRightBases()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Prüft ausgehend von der aktuell anvisierten Base, ob der Mindestabstand „distanceToNextBase“ zum nächsten rechten Nachbar eingehalten wird und setzt gegebenfalls den rechten Nachbar passend neu, sodass der Mindestabstand wieder vorhanden ist.
lockInFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Sucht zu jeder Base das am nächsten liegende Einrastfeld und platziert die Base darauf.
recorretLockIn()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Prüft, ob Basen im Randbereich auf dasselbe Einrastfeld gesetzt werden und setzt daraufhin die Basen passend neu.
recorrectLockInOfRightBases(int amountOfBasesInCurrentRow,String beginId)
  • Eingabe: int, String
  • Ausgabe: keine Ausgabe
  • Funktion: Es wird von links nach rechts über die Basen in der Reihe der anvisierten Base iteriert. Besetzen mehrere Basen ein Einrastfeld, so werden diese neu gesetzt.
recorrectLockInOfLeftBases(int amountOfBasesInCurrentRow,String endId)
  • Eingabe: int, String
  • Ausgabe: keine Ausgabe
  • Funktion: Es wird von rechts nach links über die Basen in der Reihe der anvisierten Base iteriert. Besetzen mehrere Basen ein Einrastfeld, so werden diese neu gesetzt.

Setter für weitere Felder (Klasse: setter_otherFields):

setOtherFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die weiteren Felder.
    • Zu den weiteren Feldern gehören:
      1. Die Felder mit jeweiliger Punktzahl
      2. Die Informationsfelder
      3. Die Tutorialfelder
      4. Das Feld mit Genen
      5. Das Feld, welches zum nächsten Level führt
      6. Das Optionsfeld, das nach Absolvieren des Levels erscheint
setOptionField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Optionsfeld mit dazugehörigen Komponenten.
    • Zu den Komponenten gehören:
      1. Ein Feld, das die Option bietet in das nächste Level zu steigen
      2. Ein Feld, das die Option bietet im bisherigen Level zu verbleiben
      3. Das Optionsfenster, in dem die oben benannten Felder liegen.
setOptionWindowField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Optionsfenster.
setPlayNextLevelField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das nächste Level in das Optionsfenster.
setPlayAroundField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das Verbleiben in dem bisherigen Level in das Optionsfenster.
setMiniBasesForOptionField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt kleine Basen zur Dekoration in das Optionsfenster
setBaseForOptionField(left,top,id,background,borderColor)
  • Eingabe: String,String,String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Eine Base wird in das Feld an der horizontalen Stelle „left“ und an der vertikalen „top“ mit der ID „id“ gelegt und erhält die entsprechende Farbe „background“ mit Randfarbe „borderColor“
setScoreFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Felder mit jeweiliger Punktzahl.
    • Zu den Feldern gehören:
      1. Das Feld mit dem aktuellen Punktestand
      2. Das Feld mit dem bestmöglichen Punktestand
setCurrentScoreField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, das die aktuelle Punktzahl anzeigt.
setBestScoreField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, das die bestmögliche Punktzahl anzeigt.
setInfoFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Informationsfelder.
    • Zu den Informationsfeldern gehören:
      1. Das Feld mit zusammengefassten Informationen
      2. Das Feld mit ausführlichen Informationen
      3. Das Feld, das von dem Zusammengefassten zu dem Ausführlichen wechselt
      4. Das Feld, das von dem Ausführlichen zu dem Zusammengefassten wechselt
setInfoInShortField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, das die zusammengefassten Informationen beinhaltet.
setSwitcherShortToPrecisely()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, dessen Funktion von dem zusammengefassten Informationsfeld zu dem ausführlichen Informationsfeld wechselt.
setInfoPreciselyField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, das die ausführlichen Informationen beinhaltet.
setInfoPreciselyContent()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Inhalt in das Feld für die ausführlichen Informationen.
setDividingLines()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt Linien in das Feld mit ausführlichen Informationen für die Einteilung von Problemen.
setRow(distToTop)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine Linie in das Feld, welches die ausführlichen Informationen beinhaltet.
setScoreExamples()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt auftretende Vorkommnisse eines Alignments als Beispiele in das Feld mit ausführlichen Informationen.
setScoreExamples()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt auftretende Vorkommnisse eines Alignments als Beispiele in das Feld mit ausführlichen Informationen.
    • Dazu gehören:
      1. Ein Beispiel für die Gleichheit übereinander liegender Basen („match“)
      2. Ein Beispiel für die Ungleichheit übereinander liegender Basen („mismatch“)
      3. Ein Beispiel für die Alignierung einer Base mit nichts („gap“)
setMatchExample()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Beispiel für die Gleichheit übereinander liegender Basen in das Feld mit ausführlichen Informationen.
setMisMatchExample()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Beispiel für die Ungleichheit übereinander liegender Basen in das Feld mit ausführlichen Informationen.
setGapExample()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Beispiel für die Übereinanderlagerung einer Base mit nichts in das Feld mit ausführlichen Informationen.
setBiggerExamples()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt zwei größere Beispiele in das Feld mit ausführlichen Informationen.
setFirstBiggerExample()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein größeres Beispiel in das Feld mit ausführlichen Informationen.
setSecondBiggerExample()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein größeres Beispiel in das Feld mit ausführlichen Informationen.
setSmallBase(left,top,color,borderColor)
  • Eingabe: String,String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine kleine Base auf die horizontale Stelle „left“ und vertikale „top“ mit der Farbe „color“ und Randfarbe „borderColor“ in das Feld mit ausführlichen Informationen.
setBigBase(left,top,color,borderColor)
  • Eingabe: String,String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine große Base auf die horizontale Stelle „left“ und vertikale „top“ mit der Farbe „color“ und Randfarbe „borderColor“ in das Feld mit ausführlichen Informationen.
setGap(left,top)
  • Eingabe: String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine Lücke auf die horizontale Stelle „left“ und vertikale „top“ in das Feld mit ausführlichen Informationen.
setSwitcherPreciselyToShort()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, dessen Funktion von dem ausführlichen Informationsfeld zum zusammengefassten Informationsfeld wechselt.
setTutorialFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Tutorialfelder.
    • Dazu gehören:
      1. Das Tutorialfenster, das Videomaterial beinhaltet
      2. Das Feld, welches das Tutorialfenster einblendet
setTutorialWindowField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Tutorialfenster, in dem Videomaterial dargestellt wird.
setVideos()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt Videos in das Tutorialfenster.
setVideo(id,path,opacity)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Video mit der ID „id“ aus dem Verzeichnis „path“ mit einer Deckkraft „opacity“ in das Tutorialfenster.
setSignposts()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt Wegweiser in das Tutorialfenster.
    • Dazu gehören:
      1. Der Wegweiser, der zu dem nächsten Video wechselt
      2. Der Wegweiser, der zu dem vorherigen Video wechselt
      3. Der Wegweiser, der das Tutorialfenster ausblendet
setSignPostNext()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Wegweiser in das Tutorialfenster, der zum nächsten Video wechselt.
setSignPostPrev()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Wegweiser in das Tutorialfenster, der zum vorherigen Video wechselt.
setSignPostHide()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Wegweiser in das Tutorialfenster, der das Tutorialfenster ausblendet.
setTutoCallerField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, welches das Tutorialfenster einblendet.
setNextLevelField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, welches dafür zuständig ist, in das nächste Level zu wechseln.
setModeField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld, das für die Levelauswahl zuständig ist.
    • Dazu gehören:
      1. Der Levelbereich, in dem die unterschiedlichen Level angezeigt werden
      2. Ein Anzeigefeld, das die Levelauswahl kenntlich macht
      3. Das Feld für das sehr leichte Level
      4. Das Feld für das leichte Level
      5. Das Feld für das mittel schwere Level
      6. Das Feld für das schwere Level
      7. Das Feld für das sehr schwere Level
      8. Das Feld für das legendäre Level
setModeArea()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Levelbereich, in dem die unterschiedlichen Level angezeigt werden.
setRequestField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Anzeigefeld in den Levelbereich, das die Levelauswahl kenntlich macht.
setNoobField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das sehr leichte Level.
setBasicField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das leichte Level.
setModerateField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das mittel schwere Level.
setHardField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das schwere Level.
setVeryHardField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das sehr schwere Level.
setUltimateField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld für das legendäre Level.
setLevelField(left,top,id)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Levelfeld auf die horizontale Stelle „left“ und auf die vertikale „top“ mit einer ID „id“.
setGeneField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Feld mit den zu den Sequenzen gehörenden Genen.
setMenuFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt Felder für das Menü.
    • Dazu gehören:
      1. Ein Zahnrad, welches das Menüfeld aufruft
      2. Das Menüfeld, das die Einstellungen verwaltet
setMenuField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Menüfeld, das die Einstellungen verwaltet.
    • Zu den Einstellungen gehören:
      1. Musik an/aus
      2. Klickgeräusch an/aus
      3. Buchstaben (Nukleotidabkürzungen) an/aus
      4. Neues Spiel starten
setToggles()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Kippschalter in das Menüfeld.
    • Dazu gehören:
      1. Der Kippschalter für die Musikregelung
      2. Der Kippschalter für die Klickgeräuschregelung
      3. Der Kippschalter für die Buchstabenregelung der Basen
setMusicSwitchToggle()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Kippschalter für die Musikregelung.
setClickSoundSwitchToggle()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Kippschalter für die Klickgeräuschregelung.
setLetterSwitchToggle()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Kippschalter für die Buchstabenregelung der Basen.
setToggleField(top,id)
  • Eingabe: String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Feld auf der Vertikalen „top“ in das Menüfeld, das den Bewegungsbereich eines Kippschalters repräsentiert.
setCommonToggleAttributes(toggle)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Kippschalter „toggle“ die allgemeinen Kippschaltereigenschaften zu.
setNewGameField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Feld in das Menüfeld, das für einen Neustart zuständig ist.
setMenuHiderField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Feld in das Menüfeld, das für das Ausblenden des Menüfelds zuständig ist.
setMenuCallerField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Feld, das für das Einblenden des Menüfelds zuständig ist.
setMenuCallerPic()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Zahnrad in das Feld, welches das Menü einblendet.
setCurrentScoreText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, das die aktuelle Punktzahl angibt.
setBestScoreText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, das die bestmögliche Punktzahl angibt.
setNextLevelText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, das für den Wechsel in das nächste Level zuständig ist.
setInfoInShortText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld mit den zusammengefassten Informationen.
setInfoSwitcherShortToPreciselyText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, das von dem zusammengefassten Informationsfeld zu dem ausführlichen Informationsfeld wechselt.
setInfoSwitcherPreciselyToShortText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, das von dem ausführlichen Informationsfeld zu dem zusammengefassten Informationsfeld wechselt.
setOptionWindowText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Optionsfenster.
setMiniBasesOptionText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für die Basen im Optionsfenster.
setPlayNextLevelText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld im Optionsfenster, welches in das nächste Level führt.
setPlayAroundText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld im Optionsfenster, welches für das Verbleiben im aktuellen Level zuständig ist.
setTutoCallerText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, welches das Tutorialfenster einblendet.
setSignpostsText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für die Wegweiser im Tutorialfenster.
setExampleTexts()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für die Beispiele im ausführlichen Informationsfeld.
setMatchScoreText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Beispiel, das die Gleichheit übereinanderliegender Basen repräsentiert.
setMatchScoreText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Beispiel, das die Ungleichheit übereinanderliegender Basen repräsentiert.
setGapPenaltyText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Beispiel, das die Alignierung einer Base mit nichts repräsentiert.
setRequestText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, das die Levelauswahl im Levelbereich kenntlich macht.
setLevelFieldTexts()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für die Levelfelder im Levelbereich.
setMenuHiderText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld, welches das Menüfeld verbirgt.
setMenuFieldText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Menüfeld.
setToggleTexts()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für die Kippschalterbeschreibung im Menüfeld.
setNewGameText()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Textinhalt für das Feld im Menüfeld, welches ein neues Spiel startet.

Interaktion mit den weiteren Feldern (Klasse: interaction_otherFields):

setFunctionTutoCallerField(field)
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“, welches das Tutorialfenster einblenden soll, eben diese Funktion zu.
setFunctionGoPrevPic()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Wegweiser im Tutorialfenster, welches auf das vorige Video wechseln soll, eben diese Funktion zu.
setFunctionGoNextPic()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Wegweiser im Tutorialfenster, das auf das nächste Video wechseln soll, eben diese Funktion zu.
setFunctionHideTuto()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Wegweiser im Tutorialfenster, welches das Menüfeld ausblenden soll, eben diese Funktion zu.
switchVid(direction)
  • Eingabe: int
  • Ausgabe: keine Ausgabe
  • Funktion: Wechselt auf das nächste oder vorherige Video, je nachdem wie die Richtung „direction“ gegeben ist. Bei 1 wird zu dem nächsten Video gewechselt, bei -1 auf das vorherige.
signpostHoverAnimationDouble(id1,id2)
  • Eingabe: String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist zweizeiligen Wegweisern im Tutorialfenster eine Animation zu, die erscheint, wenn der Spieler mit dem Zeiger über ihnen steht.
signpostHoverAnimationSingle(id)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einzeiligen Wegweisern im Tutorialfenster eine Animation zu, die erscheint, wenn der Spieler mit dem Zeiger über ihnen steht.
displayTutoField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Tutorialfenster ein.
displayTutoCaller()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld ein, welches die Funktion trägt, das Tutorialfenster einzublenden.
hideTutoCaller()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld aus, welches die Funktion trägt, das Tutorialfenster einzublenden.
hideTutoField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Tutorialfenster aus.
moveUpTutoField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Tutorialfenster nach oben.
moveDownTutoField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Tutorialfenster nach unten.
moveLeftTutoCaller()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld, welches das Tutorialfenster einblendet, nach links.
moveRightTutoCaller()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld, welches das Tutorialfenster einblendet, nach rechts.
hideCurrentScoreField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld aus, das den aktuellen Punktestand anzeigt.
moveUpCurrentScoreField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld, das den aktuellen Punktestand anzeigt, nach oben.
hideBestScoreField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld aus, das die bestmögliche Punktzahl anzeigt.
moveUpBestScoreField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld, das die bestmögliche Punktzahl anzeigt, nach oben.
setFunctionNextLevelField(field)
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“, das den Spieler in das nächste Level befördert, eben diese Funktion zu.
displayNextLevelField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld ein, das den Spieler in das nächste Level befördert.
moveDownNextLevelField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld, das den Spieler in das nächste Level befördert, nach unten.
hideNextLevelField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld aus, das den Spieler in das nächste Level befördert.
moveUpNextLevelField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld, das den Spieler in das nächste Level befördert, nach oben.
setFunctionInfoSwitcher1Field(field)
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“, das von dem zusammengefassten Informationsfeld zu dem ausführlichen Informationsfeld wechselt, eben diese Funktion zu.
setFunctionInfoSwitcher2Field(field)
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“, das von dem ausführlichen Informationsfeld zu dem zusammengefassten Informationsfeld wechselt, eben diese Funktion zu.
hideInfoFieldHelper()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das ausführliche Informationsfeld aus und das zusammengefasste Informationsfeld ein.
moveLeftInfoFieldHelper()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das ausführliche Informationsfeld nach links.
moveRightInfoField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das zusammengefasste Informationsfeld nach rechts.
moveLeftOtherFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt die anderen Felder nach links.
    • Zu den anderen Feldern gehören:
      1. Das Spielfeld
      2. Das Feld, das den aktuellen Punktestand anzeigt
      3. Das Feld, das den bestmöglichen Punktestand anzeigt
      4. Das Feld, das den Spieler in das nächste Level befördert
      5. Das Optionsfenster
      6. Der Levelbereich
displayInfoFieldHelper()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das ausführliche Informationsfeld ein und das zusammengefasste Informationsfeld aus.
moveRightInfoFieldHelper()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das ausführliche Informationsfeld nach rechts.
moveLeftInfoField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das zusammengefasste Informationsfeld nach links.
moveRightOtherFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt die anderen Felder nach rechts.
    • Zu den anderen Felder gehören:
      1. Das Spielfeld
      2. Das Feld, das den aktuellen Punktestand anzeigt
      3. Das Feld, das den bestmöglichen Punktestand anzeigt
      4. Das Feld, das den Spieler in das nächste Level befördert
      5. Das Optionsfenster
      6. Der Levelbereich
setFunctionLevelField(field,difficulty)
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Levelfeld „field“ die Funktion zu, ein Level der Schwierigkeit „difficulty“ zu erstellen und in dieses einzusteigen. Hierbei wird eine Stoppuhr gestartet.
startTime()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Startet die Zeit und hält diese in dem globalen Array „time“ fest.
hideModeField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet den Levelbereich aus.
moveUpModeField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt den Levelbereich nach oben.
displayModeField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet den Levelbereich ein.
moveDownModeField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt den Levelbereich nach unten.
setFunctionPlayNextLevelField(field)
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“ im Optionsfenster, das den Spieler in das nächste Level führen soll, eben diese Funktion zu.
setFunctionPlayAroundField(field)
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“ im Optionsfenster, das den Spieler in dem aktuellen Level verbleiben lassen soll, eben diese Funktion zu.
hideOptionField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Optionsfenster aus.
moveUpOptionField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Optionsfenster nach oben.
displayOptionField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Optionsfenster ein.
moveDownOptionField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Optionsfenster nach unten.
setFunctionMenuHider(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“, welches das Menüfeld verbergen soll, eben diese Funktion zu.
setFunctionNewGameField(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld „field“ im Menüfeld, das ein neues Spiel starten soll, eben diese Funktion zu.
setFieldToggleFunction(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Kippschalterfeld „field“ eine Funktion zu.
setFunctionMusicToggle(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Kippschalterfeld „field“, das die Hintergrundmusik verwalten soll, eben diese Funktion zu.
muteAudio()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Schaltet die Hintergrundmusik aus.
activateAudio()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Schaltet die Hintergrundmusik ein.
setFunctionClickSoundToggle(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Kippschalterfeld „field“, welches das Klickgeräusch regeln soll, eben diese Funktion zu.
muteClickSounds()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Deaktiviert die Klickgeräusche.
activateClickSounds()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Aktiviert die Klickgeräusche.
setFunctionLetterSwitchToggle(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Kippschalterfeld „field“, das die Buchstabenanzeige in den Basen verwalten soll, eben diese Funktion zu.
clearBaseLetters()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Entfernt die Nukleotidkürzel aus den Basen.
setBaseLetters()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die passenden Nukleotidkürzel in die Basen.
setMenuCallerPicFunction(img)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Bild „img“, welches das Menüfeld einblendet, eben diese Funktion zu.
moveUpMenuField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Menüfeld nach oben.
moveDownMenuField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Menüfeld nach unten.
changeSrcHover()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Verändert den normalen Hintergrund von dem Feld, welches das Menüfeld einblendet, zu einem Animationshintergrund.
changeIdHover()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Verändert die normale ID des Hintergrunds von dem Feld, welches das Menüfeld einblendet, zur Animations ID.
changeSrcNormal()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Verändert den Animationshintergrund von dem Feld, welches das Menüfeld einblendet, zum normalen Hintergrund.
changeIdNormal()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Verändert die Animations ID des Hintergrunds von dem Feld, welches das Menüfeld einblendet, zur normalen ID.
extractGenes()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Extrahiert die Gene aus dem gegebenem Level und hält diese global fest.
setGeneNames()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Gennamen in das Feld für Gene und erstellt für jedes Gen ein Feld, das Informationen zu diesem beinhaltet.
createGeneInfoField(id,top)
  • Eingabe: String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Erstellt ein Geninformationsfeld mit der ID „id“ auf der Vertikalen „top“.
hoverGeneText(idText,idField,position)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist jedem Gen die Funktion zu das dazugehörige Geninformationsfeld einzublenden, sobald der Zeiger auf dem Gennamen steht.
driveOutGeneInfoField(idText,idField)
  • Eingabe: String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Fährt das Geninformationsfeld mit der ID „idField“ auf der Horizontalen aus.
growUpGeneInfoField(idText,idField,position)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Geninformationsfeld mit der ID „idField“ eine Höhe zu und setzt den Textinhalt, welche das Gen beschreiben soll in das entsprechende Geninformationsfeld.
growDownGeneInfoField(idText,idField)
  • Eingabe: String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Entzieht dem Geninformationsfeld mit der ID „idField“ den Textinhalt und die Höhe, wodurch es kleiner wird.
driveInGeneField(idText,idField,originalTop)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Fährt das Geninformationsfeld mit der ID „idField“ auf die ursprüngliche Position neben dem dazugehörigen Gen ein.
getOptimizedHeight(text)
  • Eingabe: String
  • Ausgabe: float
  • Funktion: Gibt eine Höhe als float aus, die in Abhängigkeit von der Textlänge aus dem gegebenem Text „text“ berechnet wird.
setNewText(idText,text,position)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Passt einen gegebenen Textabschnitt „text“ einem Format an.
displayGeneField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld mit den Genen ein.
hideGeneField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Feld mit den Genen aus.
moveDownGeneField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld mit den Genen nach unten.
moveUpGeneField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Feld mit den Genen nach oben.
hideOtherFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet weitere Felder aus.
    • Zu den weiteren Feldern gehören:
      1. Das Optionsfenster
      2. Das ausführliche Informationsfeld
      3. Das Feld, welches das Tutorialfenster einblendet
      4. Das Reglerfenster
      5. Das Feld, das den aktuellen Punktestand anzeigt
      6. Das Feld, das den bestmöglichen Punktestand anzeigt
      7. Das Feld, das in das nächste Level führt
showDifferenceCurrentScore(dif)
  • Eingabe: int
  • Ausgabe: keine Ausgabe
  • Funktion: Zeigt die Differenz „dif“ zwischen dem neuen Punktestand und dem vorherigen Punktestand nach einem Zug an.
createDifferenceCurrentScoreText(color,dif,left,top)
  • Eingabe: String,int,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Erstellt einen Text der Farbe „color“, welcher die Differenz „dif“ zwischen dem neuen Punktestand und dem alten Punktestand an der horizontalen Stelle „left“ und auf der Vertikalen „top“ darstellt.
moveDownDifferenceCurrentScore()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt den Text, welcher die Differenz zwischen dem neuen Punktestand und dem alten anzeigt, nach unten.
moveUpDifferenceCurrentScore()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt den Text, welcher die Differenz zwischen dem neuen Punktestand und dem alten anzeigt, nach oben.
clearCurrentScoreDifference()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Löscht den Text, welcher die Differenz zwischen dem neuen Punktestand und dem Alten anzeigt.
buttonAnimation(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem gegebenem Feld „field“ die Animation zu aufzuleuchten, wenn der Zeiger darüber steht.
enterButton(id)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist dem Feld mit der ID „id“ einen leuchtenden Rand zu.
leaveButton(id)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Nimmt dem Feld mit der ID „id“ den leuchtenden Rand, falls dieser vorhanden ist.
prepareNextLevel()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bereitet das nächste Level vor, in dem es alle Felder, mit Ausnahme von dem Menüfenster einblendenden Feld, ausblendet und den Levelbereich einblendet.
joinLevel(difficulty)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Baut ein neues Level in Abhängigkeit von der gegebenen Schwierigkeit „difficulty“ auf.
changeToBaseOriginalId()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Wechselt die ID der Basen zu ihrer Original ID, die über keine Animation verfügt.
changeToBaseAnimationId()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Wechselt die ID der Basen zu ihrer Animations ID, welche über eine Animation verfügt.
isGameComponentsAlreadyRemoved()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Prüft, ob die Basen im Spielfeld bereits gelöscht sind.
setParameters()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Startwerte für die Parameter Match Score, Mismatch Score und Gap Penalty.

Setter für die Regler (Klasse: setter_slider):

setPermanentSliderEvents()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Weist Mausereignisse und Touchereignisse Funktionen zu, welche die Regler verwalten.
setSliderField()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt das Reglerfeld, in welchem die Regler liegen.
setAllSlider()
  • Eingabe: keine Ausgabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt alle nötigen Regler, welche die Parameterwerte Match Score, Mismatch Score und Gap Penalty verwalten.
setSlider(left,top,sliderId)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt einen Regler auf die horizontale Stelle „left“ und auf die Vertikale „top“ und weist ihm eine ID „sliderId“ zu.
setCuttingLine(left)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine Trennline im Reglerfeld auf die horizontale Stelle „left“.
setCol(id,left,top)
  • Eingabe: String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine Spalte mit der ID „id“ auf die horizontale Stelle „left“ und Vertikale „top“ in das Reglerfeld, welche als Achse mit Skalierung repräsentiert wird.
setColText(id)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Überschrift einer Spalte bzw. Achse im Reglerfeld, welche die gegebene ID „id“ hat.
setMarksInCol(id)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Skalierung einer gegebenen Spalte/Achse mit der ID „id“.
setScaling(id,top,i)
  • Eingabe: String,int,int
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt eine Zahl in eine gegebene Achse bzw. Spalte mit der ID „id“ auf die entsprechende Höhe „top“.

Getter für die Regler (Klasse: getter_slider):

getPercentOfPx(mouseYcord)
  • Eingabe: float
  • Ausgabe: keine Ausgabe
  • Funktion: Wandelt den gegebenen Wert „mouseYcord“ in die entsprechende Prozentzahl um.

Interaktion mit den Reglern (Klasse: interaction_slider):

startSliderDrag(event,obj)
  • Eingabe: event,element
  • Ausgabe: keine Ausgabe
  • Funktion: Verwaltet den Start der Interaktion zwischen Benutzer und Regler.
doSliderDrag(event)
  • Eingabe: event
  • Ausgabe: keine Ausgabe
  • Funktion: Verwaltet die Ausführung der Interaktion zwischen Benutzer und Regler. Dazu wird dem anvisierten Regler stets eine neue Position auf der Vertikalen zugewiesen.
stopSliderDrag(event)
  • Eingabe: event
  • Ausgabe: keine Ausgabe
  • Funktion: Verwaltet das Ende der Interaktion zwischen Benutzer und Regler. Dazu werden die Parameterwerte von Match Score, Mismatch Score und Gap Penalty neu gesetzt.
lockSliderIn()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Lässt den anvisierten Regler in das nächstmögliche Feld auf der Achse einrasten.
resetScores(minDifferencePlace)
  • Eingabe: int
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den Wert von Match Score, Mismatch Score oder Gap Penalty in Abhängigkeit von der Position „minDifferencePlace“, auf der der anvisierte Regler liegt, neu.
updateScores()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt einen neuen bestmöglichen Punktestand und einen neuen aktuellen Punktestand in Abhängigkeit von den aktuellen Parameterwerten Match Score, Mismatch Score und Gap Penalty.
displaySliderField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Reglerfeld ein.
moveRightSliderField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Reglerfeld nach rechts.
hideSliderField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Blendet das Reglerfeld aus.
moveLeftSliderField()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Bewegt das Reglerfeld nach links.
makeSliderClickSound()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Lässt ein Klickgeräusch erklingen, sobald ein Regler angeklickt wird.
makeSliderDropSound()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Lässt ein Klickgeräusch erklingen, sobald ein Regler losgelassen wird.

Setter für die gemeinsame Attribute von Feldern (Klasse: setter_fieldAttributes):

setCommonFieldAttributes(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ die gemeinsamen Feldattribute zu.
    • Zu den Attributen gehören:
      1. Die Beweglichkeit eines Felds
      2. Der Hintergrund
      3. Der Rand
      4. Der Randradius
      5. Die Randart
      6. Die Randfarbe
setFieldTextShadow(field)
  • Eingabe: element
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Textschattierung zu.
setFieldId(field,id)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine ID „id“ zu.
setFieldCursor(field,cursor)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ einen Zeigertyp „cursor“ zu, der erscheint, sobald der Zeiger über dem Feld liegt.
setFieldSize(field,width,height)
  • Eingabe: element,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Breite „width“ und Höhe „height“ zu.
setFieldPosition(field,left,top)
  • Eingabe: element,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Stelle „left“ auf der Horizontalen und einen Wert „top“ auf der Vertikalen zu, wodurch die Position des Felds festgelegt wird.
setFieldTransition(field,transition)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ einen Übergang „transition“ zu.
setFieldMoveability(field,position)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Bewegungseigenschaft „position“ zu.
setFieldBackground(field,background)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ einen Hintergrund „background“ zu.
setFieldBorder(field,border)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ einen Rand „border“ zu.
setFieldBorderRadius(field,radius)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ einen Randradius „radius“ zu.
setFieldBorderStyle(field,borderStyle)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Randart „borderStyle“ zu.
setFieldBorderWidth(field,width)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Randbreite „width“ zu.
setFieldBorderColor(field,borderColor)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Randfarbe „borderColor“ zu.
setFieldColor(field,color)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Farbe „color“ für den Inhalt zu.
setFieldZindex(field,num)
  • Eingabe: element,int
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ einen Rang „num“ zu, welche das Feld in den Vordergrund oder Hintergrund verlegt.
setFieldOpacity(field,numString)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenen Feld „field“ eine Deckkraftstärke „numString“ zu.

Setter für die gemeinsamen Textattribute (Klasse: setter_textAttributes):

setText(left,top,size,id,innerText,fatherId)
  • Eingabe: String,String,String,String,String,String
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt ein Textfeld mit der ID „id“ und dem dazugehörigen Textinhalt „innerText“ in ein Feld mit der ID „fatherId“.
setTextFontSize(text,fontSize)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenem Text „text“ eine Schriftgröße „fontSize“ zu.
setTextInnerHtml(text,innerHtml)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenem Text „text“ einen Textinhalt „innerHtml“ zu.
setTextFontFamily(text,fontFamily)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenem Text „text“ eine Textfamilie „fontFamily“ zu.
setTextShadow(text,textShadow)
  • Eingabe: element,String
  • Ausgabe: keine Ausgabe
  • Funktion: Weist einem gegebenem Text „text“ eine Textschattierung „textShadow“ zu.

Interaktion für die Berechnung (Klasse: interaction_gameComputation):

getMsa()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Extrahiert das Alignment aus der Datenbank „sequences“.
getScores()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Berechnet die aktuelle Punktzahl und die bestmögliche Punktzahl zu Beginn.
setNewCurrentScore(newScore)
  • Eingabe: int
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt den aktuellen Punktestand neu.
lvlSolvedChecker()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Prüft, ob ein Level nach einem Zug bereits gelöst ist und blendet gegebenfalls das Optionsfenster ein.
stopTime()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Stoppt die Zeit.
addZero(num)
  • Eingabe: int
  • Ausgabe: int
  • Funktion: Legt eventuell eine Null vor die Eingabe „num“ und gibt das Resultat aus.
numOfFitIn(number,fitter)
  • Eingabe: int,int
  • Ausgabe: int
  • Funktion: Berechnet „fitter div number“ und gibt das Resultat aus.
displayUsedTime()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Zeigt die Zeit im Optionsfenster an, die der Spieler zum Lösen des Levels benötigt hat.

Interaktion für die Fenstergrößenanpassung (Klasse: interaction_windowResize):

adjustElements()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Leert die Seite bei Fenstergrößenveränderung und setzt alle Elemente angepasst an die neue Fenstergröße neu.
removeGameComponents()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Löscht Spielkomponenten von der Seite.
    • Zu den Spielkomponenten gehören:
      1. Der Spielfeldinhalt
      2. Das Feld, das die aktuelle Punktzahl anzeigt
      3. Das Feld, das die bestmögliche Punktzahl anzeigt
      4. Das Feld, das den Spieler in das nächste Level befördert
      5. Das Optionsfenster
      6. Das zusammengefasste Informationsfeld
      7. Das ausführliche Informationsfeld
      8. Das Feld, welches das Tutorialfenster aufruft
      9. Das Tutorialfenster
      10. Das Reglerfeld
      11. Regler für den Parameter, der für den Match Score steht
      12. Regler für den Parameter, der für den Mismatch Score steht
      13. Regler für den Parameter, der für die Gap Penalty steht
      14. Das Genfeld
      15. Die Geninformationsfelder
removeGameFieldContent()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Löscht alle Basen, die in dem Spielfeld vorliegen.
removeElement(id)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Löscht ein Element, das die gegebene ID „id“ hat.
removeOrganismInfoFields()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Löscht die Geninformationsfelder.
buildAdjustedPage()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Initialisiert das Spiel neu.

Initialisierung des Spiels (Klasse: begin_init)

startGame()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Zeigt die Levelauswahl an.
initialize(dif)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Initialisiert das Spiel und erzeugt ein Level der Schwierigkeit „dif“.
setDifficulty(dif)
  • Eingabe: String
  • Ausgabe: keine Ausgabe
  • Funktion: Speichert die Schwierigkeit „dif“ für das gewählte Level in der globale Variable „difficulty“.
setLevel()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die Levelinformationen in die globale Variable „level“.
setId()
  • Eingabe: keine Eingabe
  • Ausgabe: keine Ausgabe
  • Funktion: Setzt die ID des gewählten Levels in die globale Variable „id“.

CSS Animation

Animation der Basen (Datei: baseAnimations)

In dieser Datei wird die Animation der Basen verwaltet. Den Basen, die im Optionsfenster vorliegen, wird eine kontinuierliche Rotation zugewiesen. Die Basen, die im Spielfeld vorliegen, werden beim Übergang in das nächste Level von ihrer horizontalen Reihe losgelöst und jeweils über verschiedene Richtungsvektoren durch das Spielfeld bewegt.

Animation des Zahnrads (Datei: gearAnimation)

In dieser Datei wird die Animation des Zahnrads verwaltet. Hierbei wird dem Zahnrad eine kontinuierliche Rotation zugewiesen.

Probleme bei der Implementation

1. Problem: Das Erzeugen von Elementen

In der, für uns neuen Programmiersprache JavaScript gestaltet sich zunächst schon das Erstellen von Elementen, die die Basen darstellen sollen, als schwierig. Zudem soll nun anhand dieser Elemente und vorgegebener Sequenzen ein passendes Alignment erstellt werden, das dem Spieler dann angezeigt wird.

Für den statisch programmierten Prototyp, wurde eine feste Sequenz an aneinandergereihten Basen erstellt, die nicht veränderbar war und somit nur eine bestimmte DNA-Sequenz verkörperte. Das verbraucht sehr viel Code, wobei das Alignmentpuzzle nicht so variabel gestaltbar ist, da jede Sequenz die angezeigt werden soll, explizit im Code generiert werden muss.

Für das finale dynamische Programm, wurde eine Datensammlung zur Erzeugung der Elemente erstellt. Diese enthält, gelistet nach Level, verschiedene Alignments. Pro Alignment sind zwei Symbolsequenzen abgespeichert, sowie deren optimaler Score. Wird nun ein Spiel angefangen, so wird entsprechend dem gewählten Level aus der Liste zufällig ein Alignment bestimmt und bearbeitet. Dabei werden in die beiden Sequenzen zufällig Gaps eingebaut, wobei die Sequenzen beide auf dieselbe Länge gebracht werden, die der Spielfeldbreite entspricht. Gemäß dieser beiden Sequenzen werden dann die Basen erzeugt und auf dem Spielfeld angezeigt.

2. Problem: Das Bewegen von Basen

Zur Bewegeung einer Base, wird ihr beim Anklicken mit der Maus die Mauskoordinate zugewiesen, sodass sie sich im geklickten Mauszustand mit der Bewegung der Maus bewegt. Wird die Maus losgelassen, so behält die Base die zuletzt gespeicherten Koordinaten der Maus und verharrt an dieser Stelle, bis sie wieder von der Maus verschoben wird. Dadurch ist es möglich, dass die Basen mit der Maus überall hinbewegt werden können, ohne darauf zu Achten, dass sie eigentlich zu einer Sequenz gehören, die horizontal im Spielfeld platziert ist.

Daher wird den Basen nun nur noch die x-Koordinate der Maus übergeben, sodass der Spieler sie nur in der Horizontalen bewegen kann.

3. Problem: Das Mitverschieben der Nachbarbasen

Trifft in dem ersten Spielentwurf eine Base beim Verschieben auf ihre benachbarte Base, so ist es zunächst möglich, die beiden Basen übereinander zu schieben oder gar zu vertauschen.

Als Lösung dieses Problems wird nun, sobald eine Base bewegt wird, kontinuierlich ihr Abstand zu den Nachbarn abgefragt. Ist ein gewisser Mindestabstand zwischen benachbarten Basen erreicht, so wird die Nachbarbase in die gleiche Richtung mitverschoben, wobei der Mindestabstand zwischen allen Basen immer eingehalten wird.

4. Problem: Die Grenzenfestlegung

Bei der Lösung des 3. Problems wurde nicht bedacht, dass nicht nur die Grenzen bezüglich der Nachbarbasen sondern auch die Grenzen bezüglich des Spielfelds bei der Bewegug von Elementen beachtet werden müssen. So ist es zunächst möglich eine Base komplett aus dem Spielfeld heraus zu schieben, wodurch diese durch dortiges loslassen der Maustaste verloren geht.

Als Lösung dieses Problems wird nun während des Bewegungsvorgangs eine weitere Abfrage gestellt. Werden die Koordinaten der letzten Base größer als die des letzten Felds, beziehungsweise bei der ersten Base kleiner als das erste Feld, so wird der Bewegungsvorgang gestoppt. So können die Basen nicht über den Spielfeldrand hinausgeschoben werden. Aufgrund des geforderten Mindestabstands zwischen den einzelnen Basen, wird auch die Bewegung einer Base in der Mitte der Sequenz gestoppt, falls diese die benachbarten Basen zu weit an den Rand schiebt. Damit ist sichergestellt, dass sich alle Elemente nur im Spielfeld bewegen können.