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.

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).

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/

Der constructor wird beim Anlegen eines Rasters (z.B. mit meinRaster = new Raster(3,3)) aufgerufen und generiert alle Einträge.
Die Methoden (Funktionen) getValue(x,y) und setValue(x,y,v) um Werte (Zahlen) der einzelnen Rasterfelder zu erfahren, bzw. zu setzen.
Die Methode isOn(x,y) ergibt true oder false, 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.

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");
    });

HTML-Knopf

  <button id="speichernknopf">Speichern</button>
  <input type="text" id="bildtext">
  <button id="ladenknopf">Laden</button>

JavaScript:

   let speichernKnopf = this.document.getElementById('speichernknopf');
    speichernKnopf.addEventListener('click', speichern);
 
    function speichern() {
        let bild = "";
        for (let y=0; y<meinRaster.height; y++) {
            for (let x=0; x<meinRaster.width; x++) {
                let wert = meinRaster.getValue(x,y);
                bild += String(wert);
            }
        }
        console.log(bild);
        document.getElementById('bildtext').value = bild;
    }
 
 
      let ladenKnopf = this.document.getElementById('ladenknopf');
    ladenKnopf.addEventListener('click', laden);
 
    function laden() {
        let bild = document.getElementById('bildtext').value;
        console.log(bild);
        for (let i=0; i<bild.length; i++) {
            let wert = Number(bild[i]);
            let x = i % meinRaster.width;
            let y = Math.floor(i/meinRaster.width);
            meinRaster.setValue(x,y, wert)
        }
    }

Schachbrettmuster:

    function schach() {
        for (let y=0; y<meinRaster.height; y++) {
            for (let x=0; x<meinRaster.width; x++) {
                let wert = (x+y)%2+1; // Hier geheime Formel einfügen
                meinRaster.setValue(x,y,wert);
            }
        }
    }

Die Raster-Klasse

Wichtigste HTML-Elemente

Wichtigste CSS-Einträge

JavaScript

Einbinden von Knöpfen

Bilder speichern und laden

https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG