Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2024:raster-tictactoe [2024/04/09 17:48]
Ivo Blöchliger [Gewinn überprüfen]
+++ lehrkraefte:blc:informatik:ffprg1-2024:raster-tictactoe [2024/04/09 17:54]
Ivo Blöchliger [Gewinn überprüfen]
@@ Line 70: / Line 70: @@
 <hidden Teillösungsvorschlag>
-<code>
+<code javascript>
-  function sindsDrei(x,y,vx,vy) {
+    function sindsDrei(x,y,vx,vy) {
         let w = meinRaster.getValue(x,y);
         if (w==0) return false;
@@ Line 78: / Line 78: @@
             x+=vx;
             y+=vy;
-        }
-        for (let i=0; i<3; i++) {
-            x-=vx;
-            y-=vy;
-            meinRaster.setValue(x,y,w+2);
         }
         return true;
@@ Line 100: / Line 95: @@
 </hidden>
 </WRAP>
+===== Zellen markieren =====
+<WRAP todo>
+Ziel ist es, die gewinnende Dreierreihe zu markieren.
+  * Fügen Sie dazu in der Datei ''raster.css'' zwei weitere Klassen ''wert3'' und ''wert4'' hinzu, um das Aussehen der gewinnenden Zellen für Spieler 1 und 2 festzulegen.
+  * In der Funktion ''sindsDrei'', fügen Sie unmittelbar vor dem ''return true'' noch eine Schlaufe hinzu, die den Wert der gewinndenden Zellen um 2 erhöht.
+<hidden Lösungsvorschlag>
+<code css>
+.wert3 {
+    background-image: url("cross.svg");
+    background-color: lightcoral;
+    background-size: cover;
+}
+.wert4 {
+    background-image: url("dot.svg");
+    background-color: skyblue;
+    background-size: cover;
+}
+</code>
+<code javascript>
+        for (let i=0; i<3; i++) {
+            x-=vx;
+            y-=vy;
+            meinRaster.setValue(x,y,w+2);
+        }
+</code>
+</hidden>
+</WRAP>