lehrkraefte:blc:informatik:ffprg1-2024:raster-basics

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/09 13:14] – [Die Raster-Klasse] Ivo Blöchligerlehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/26 11:44] (current) – [Bilder speichern und laden] Ivo Blöchliger
Line 1: Line 1:
 +====== Die Raster-Klasse ======
 +
 +Download: {{lehrkraefte:blc:informatik:ffprg1-2024: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:
 +<code html>
 +<body>
 +    <div class="menu topleft"></div>
 +    <div id="gridcontainer"></div>
 +    <div class="menu bottomright"></div>
 +</body>
 +</code>
 +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. 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.
 +
 +
 +===== Einbinden von Knöpfen =====
 +In HTML, den Knopf mit einer ID versehen:
 +<code html>
 +  <button id="startknopf">Start</button>
 +</code>
 +In JavaScript, den Knopf via ID auslesen und mit einem eventListener versehen:
 +<code javascript>
 +    let startKnopf = this.document.getElementById('startknopf');
 +    startKnopf.addEventListener('click', function() {
 +        console.log("Hat Start gedrückt");
 +    });
 +</code>
 +
 +
 +===== Bilder speichern und laden =====
 +
 +HTML-Knopf
 +<code html>
 +  <button id="speichernknopf">Speichern</button>
 +  <input type="text" id="bildtext">
 +  <button id="ladenknopf">Laden</button>
 +</code>
 +
 +JavaScript:
 +<code 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)
 +        }
 +    }
 +</code>
 +
 +
 +Schachbrettmuster:
 +<code javascript>
 +    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);
 +            }
 +        }
 +    }
 +</code>