This is an old revision of the document!
Die Raster-Klasse
Download.
Die Rasterklasse beinhaltet:
- Einige HTML-Elemente, die mit bestimmten Klassen und/oder IDs versehen sind.
- Eine CSS-Datei, die das Layout definiert
- Eine JS-Datei, die das Raster initialisiert und womit dann interagiert werden kann.
Wichtigste HTML-Elemente
Folgende Elemente werden erwartet:
<body> <div class="menu topleft"></div> <div id="gridcontainer"></div> <div class="menu bottomright"></div> </body>
Wobei die div
s mit Klasse menu
je nach Fensterverhältnis darüber und darunter, oder links und rechts angegezeigt werden und für Kontroll-Elemente gedacht sind.
Das div
mit id gridcontainer
wird von der Raster
-Klasse mit den Raster-Elementen (ebenfalls div
s befüllt).
Wichtigste CSS-Einträge
Die ganze Seite sowie die Menüs werden mit display:flex
formatiert, siehe https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Das Raster selbst ist mir display:grid
formatiert, wobei die Anzahl Spalten in einer CSS-Variablen mit Namen –spalten
festgelegt wird, siehe https://css-tricks.com/snippets/css/complete-guide-grid/
JavaScript
- Der
constructor
wird beim Anlegen eines Rasters (z.B. mitmeinRaster = new Raster(3,3)
) aufgerufen und generiert alle Einträge. - Die Methoden (Funktionen)
getValue(x,y)
undsetValue(x,y,v)
um Werte (Zahlen) der einzelnen Rasterfelder zu erfahren, bzw. zu setzen. - Die Methode
isOn(x,y)
ergibttrue
oderfalse
, je nachdem, ob die Korrdinaten $(x,y)$ auf dem Spielfeld liegen oder nicht. - Die Klassen-Methode
Raster.addColorRules
, die für ein Array von Farben entsprechende CSS-Klassen anlegt. - Das Attribut
clickCallback
kann auf eine Funktion gesetzt werden, die mit den Koordinaten eines geklickten Felds aufgerufen werden soll.