Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2024:raster-tictactoe [2024/04/09 17:54]
Ivo Blöchliger [Gewinn überprüfen]
+++ lehrkraefte:blc:informatik:ffprg1-2024:raster-tictactoe [2024/05/17 13:10] (current)
Ivo Blöchliger [Gewinn überprüfen]
@@ Line 20: / Line 20: @@
     * fügen Sie eine Variable ''currentPlayer'' hinzu, die angibt, welcher Spieler (1 oder 2) gerade am Zug ist.
     * Beginnen Sie das Spiel im ''clickCallback'' zu programmieren (mit den Variablen ''meinRaster'' und ''currentPlayer''). Dabei soll einfach abwechselnd auf leeren Feldern gezogen werden können.
+    * Fügen Sie eine weitere Variable ''cellsPlayed'' hinzu, die zählt, wie viele Zellen schon belegt sind.
+    * Programmieren Sie eine Unterfunktion ''reset'', die das Spiel und alle nötigen Variablen zurücksetzt.
+    * Wenn geklickt wird und alle Zellen schon voll sind, soll das Spiel neu starten.
 <hidden Lösungsvorschlag>
@@ Line 96: / Line 99: @@
 </WRAP>
+<hidden Lösungsvorschlag aus der Stunde>
+<code mygame.js>
+// Erst mal alles Laden, erst dann an der Webseite
+// Dinge ändern (die sonst noch gar nicht existieren würden)
+window.addEventListener('load', function() {
+    // Raster anlegen
+    // Diese Variable ist ab hier auch in Unterfunktionen
+    // definiert und verwendbar
+    let meinRaster = new Raster(13,13);
+    let currentPlayer = 1;
+    function reset() {
+        meinRaster.fill(0);
+        currentPlayer = 1;
+    }
+    function zaehlen(x,y,vx,vy, markieren=false) {
+        let count = function(x,y,vx,vy) {
+            let anzahl = 1;
+            let wert = meinRaster.getValue(x,y);
+            let [a,b] = [x+vx,y+vy];
+            while (meinRaster.isOn(a,b) && meinRaster.getValue(a,b)==wert) {
+                if (markieren) {
+                    meinRaster.setValue(a,b,wert+2);
+                }
+                anzahl++;
+                [a,b] = [a+vx, b+vy];
+            }
+            return anzahl;
+        }
+        let anzahl = count(x,y,vx,vy, markieren)+count(x,y,-vx,-vy, markieren)-1;
+        if (markieren) {
+            meinRaster.setValue(x,y,meinRaster.getValue(x,y)+2);
+        }
+        return anzahl;
+    }
+    function hasWon(x,y) {
+        for (let v of [[1,0],[1,1],[0,1],[-1,1]]) {
+            if (zaehlen(x,y,v[0],v[1])>=5) {
+                zaehlen(x,y,v[0],v[1],true);
+                return true;
+            }
+        }
+    }
+    // Callback für einen Klick definieren
+    meinRaster.clickCallback = function(x, y) {
+        let v = meinRaster.getValue(x,y);
+        if (v==0) {
+            meinRaster.setValue(x,y,currentPlayer);
+            if (hasWon(x,y)) {
+                console.log(`Player ${currentPlayer} hat gewonnen!`);
+            }
+            currentPlayer = 3-currentPlayer;
+        }
+    };
+    this.document.getElementById('resetknopf').addEventListener('click', reset);
+});
+</code>
+</hidden>
 ===== Zellen markieren =====
 <WRAP todo>