raster.css
folgenden CSS-Code hinzu:.wert1 { background-image: url("cross.svg"); background-size: cover; } .wert2 { background-image: url("dot.svg"); background-size: cover; }
mygame.js
Raster.addColorRules
,currentPlayer
hinzu, die angibt, welcher Spieler (1 oder 2) gerade am Zug ist.clickCallback
zu programmieren (mit den Variablen meinRaster
und currentPlayer
). Dabei soll einfach abwechselnd auf leeren Feldern gezogen werden können.cellsPlayed
hinzu, die zählt, wie viele Zellen schon belegt sind.reset
, die das Spiel und alle nötigen Variablen zurücksetzt.
In der Datei mygame.js
, fügen Sie eine weitere Unterfunktion winner
hinzu, die folgende Werte zurückgibt:
Hinweise:
sindsDrei(x,y,vx,vy)
, die true
ergibt, wenn drei gleiche Werte >=1 vom Startpunkt x,y, in Richtung des Vektors (vx,vy) anzutreffen sind. Sonst false
.sindsDrei
in der Funktion winner
unter anderem in einer for-schlaufe auf.Ziel ist es, die gewinnende Dreierreihe zu markieren.
raster.css
zwei weitere Klassen wert3
und wert4
hinzu, um das Aussehen der gewinnenden Zellen für Spieler 1 und 2 festzulegen.sindsDrei
, fügen Sie unmittelbar vor dem return true
noch eine Schlaufe hinzu, die den Wert der gewinndenden Zellen um 2 erhöht.