This is an old revision of the document!
Die Raster-Klasse
Download: raster-minimal.zip. Achtung Das zip-Archiv muss entpackt werden, bevor damit gearbeitet wird. Wenn nicht 100% klar ist, was damit gemeint ist, unbedingt nachfragen. You have been warned!
Die Rasterklasse beinhaltet:
- Eine HTML-Datei mit einigen HTML-Elementen, die mit bestimmten Klassen und/oder IDs versehen sind.
- Eine CSS-Datei, die das Layout definiert
- Eine JS-Datei, die das Raster als Objekt 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 divs 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 divs 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
constructorwird 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)ergibttrueoderfalse, 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
clickCallbackkann auf eine Funktion gesetzt werden, die mit den Koordinaten eines geklickten Felds aufgerufen werden soll.
Einbinden von Knöpfen
In HTML, den Knopf mit einer ID versehen:
<button id="startknopf">Start</button>
In JavaScript, den Knopf via ID auslesen und mit einem eventListener versehen:
let startKnopf = this.document.getElementById('startknopf'); startKnopf.addEventListener('click', function() { console.log("Hat Start gedrückt"); });