Tic Tac Toe

This is an old revision of the document!

Legen Sie einen neuen Ordner 'tictactoe' and und speichern Sie darin die Dateien der Basis für ein Raster Spiel.
Speichern Sie im gleichen Ordner auch folgende beiden Bilder (gemacht mit dem sehr zu empfehlenden OpenSource-Programm Inkscape:
- cross.svg und dot.svg
Fügen Sie in der Datei raster.css folgenden CSS-Code hinzu:

.wert1 {
    background-image: url("cross.svg");
    background-size: cover;
}
.wert2 {
    background-image: url("dot.svg");
    background-size: cover;
}

In der Datei mygame.js
- entfernen Sie den Aufruf von Raster.addColorRules,
- passen Sie die Grösse auf 3 mal 3 an,
- 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.

Lösungsvorschlag

window.addEventListener('load', function() {
 
    let meinRaster = new Raster(3,3);
    let currentPlayer = 1;
    let cellsPlayed = 0;
 
    function reset() {
        currentPlayer = 1;
        cellsPlayed = 0;
        for (let x=0; x<3; x++) {
            for (let y=0; y<3; y++) {
                meinRaster.setValue(x,y,0);
            }
        }
    }
 
    // Callback für einen Klick definieren
    meinRaster.clickCallback = function(x, y) {
        if (cellsPlayed==9) {
            reset();
            return;
        }
        let v = meinRaster.getValue(x,y);
        if (v!=0) {
            return;
        }
        meinRaster.setValue(x,y,currentPlayer);
        currentPlayer = 3-currentPlayer;
        cellsPlayed++;
    }
});

In der Datei mygame.js, fügen Sie eine weitere Unterfunktion winner hinzu, die folgende Werte zurückgibt:

0, wenn niemand 3 in einer Reihe hat
1 oder 2, wenn Spieler 1 oder Spieler 2 gewonnen hat.

Hinweise:

Schreiben Sie zusätzlich eine Funktion 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.
Rufen Sie die Funktion sindsDrei in der Funktion winner unter anderem in einer for-schlaufe auf.

Teillösungsvorschlag

  function sindsDrei(x,y,vx,vy) {
        let w = meinRaster.getValue(x,y);
        if (w==0) return false;
        for (let i=0; i<3; i++) {
            if (meinRaster.getValue(x,y)!=w) return false;
            x+=vx;
            y+=vy;
        }
        for (let i=0; i<3; i++) {
            x-=vx;
            y-=vy;
            meinRaster.setValue(x,y,w+2);
        }
        return true;
    }

    function winner() {
        for (let i=0; i<3; i++) {
            if (sindsDrei(i,0,0,1)) return meinRaster.getValue(i,0);  // Vertikal
            if (sindsDrei(0,i,1,0)) return meinRaster.getValue(0,i);  // Horizontal
        }
        if (sindsDrei(0,0,1,1)) return meinRaster.getValue(0,0);  // Diagonale in Richtung (1,1)
        if (sindsDrei(2,0,-1,1)) return meinRaster.getValue(2,0);  // Diagonale in Richtung (-1,1)
        return 0;
    }

Tic Tac Toe

Gewinn überprüfen

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