Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
lehrkraefte:blc:informatik:ffprg1-2024:raster-tictactoe [2024/04/09 17:36] 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 '' | * fügen Sie eine Variable '' | ||
* Beginnen Sie das Spiel im '' | * Beginnen Sie das Spiel im '' | ||
+ | * Fügen Sie eine weitere Variable '' | ||
+ | * Programmieren Sie eine Unterfunktion '' | ||
+ | * Wenn geklickt wird und alle Zellen schon voll sind, soll das Spiel neu starten. | ||
<hidden Lösungsvorschlag> | <hidden Lösungsvorschlag> | ||
Line 66: | Line 69: | ||
Hinweise: | Hinweise: | ||
- | * Schreiben Sie zusätzlich eine Funktion '' | + | * Schreiben Sie zusätzlich eine Funktion '' |
- | * Rufen Sie die Funktion '' | + | * Rufen Sie die Funktion '' |
+ | |||
+ | <hidden Teillösungsvorschlag> | ||
+ | <code javascript> | ||
+ | function sindsDrei(x, | ||
+ | let w = meinRaster.getValue(x, | ||
+ | if (w==0) return false; | ||
+ | for (let i=0; i<3; i++) { | ||
+ | if (meinRaster.getValue(x, | ||
+ | x+=vx; | ||
+ | y+=vy; | ||
+ | } | ||
+ | return true; | ||
+ | } | ||
+ | |||
+ | function winner() { | ||
+ | for (let i=0; i<3; i++) { | ||
+ | if (sindsDrei(i, | ||
+ | if (sindsDrei(0, | ||
+ | } | ||
+ | if (sindsDrei(0, | ||
+ | if (sindsDrei(2, | ||
+ | return 0; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | <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(' | ||
+ | |||
+ | |||
+ | // Raster anlegen | ||
+ | // Diese Variable ist ab hier auch in Unterfunktionen | ||
+ | // definiert und verwendbar | ||
+ | let meinRaster = new Raster(13, | ||
+ | let currentPlayer = 1; | ||
+ | |||
+ | function reset() { | ||
+ | meinRaster.fill(0); | ||
+ | currentPlayer = 1; | ||
+ | } | ||
+ | function zaehlen(x, | ||
+ | let count = function(x, | ||
+ | let anzahl = 1; | ||
+ | let wert = meinRaster.getValue(x, | ||
+ | let [a,b] = [x+vx, | ||
+ | while (meinRaster.isOn(a, | ||
+ | if (markieren) { | ||
+ | meinRaster.setValue(a, | ||
+ | } | ||
+ | anzahl++; | ||
+ | [a,b] = [a+vx, b+vy]; | ||
+ | } | ||
+ | return anzahl; | ||
+ | } | ||
+ | let anzahl = count(x, | ||
+ | if (markieren) { | ||
+ | meinRaster.setValue(x, | ||
+ | } | ||
+ | |||
+ | return anzahl; | ||
+ | } | ||
+ | | ||
+ | function hasWon(x,y) { | ||
+ | for (let v of [[1, | ||
+ | if (zaehlen(x, | ||
+ | zaehlen(x, | ||
+ | return true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | // Callback für einen Klick definieren | ||
+ | meinRaster.clickCallback = function(x, y) { | ||
+ | let v = meinRaster.getValue(x, | ||
+ | if (v==0) { | ||
+ | meinRaster.setValue(x, | ||
+ | if (hasWon(x, | ||
+ | console.log(`Player ${currentPlayer} hat gewonnen!`); | ||
+ | } | ||
+ | currentPlayer = 3-currentPlayer; | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | this.document.getElementById(' | ||
+ | |||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | ===== Zellen markieren ===== | ||
+ | <WRAP todo> | ||
+ | Ziel ist es, die gewinnende Dreierreihe zu markieren. | ||
+ | * Fügen Sie dazu in der Datei '' | ||
+ | * In der Funktion '' | ||
+ | |||
+ | <hidden Lösungsvorschlag> | ||
+ | <code css> | ||
+ | .wert3 { | ||
+ | background-image: | ||
+ | background-color: | ||
+ | background-size: | ||
+ | } | ||
+ | .wert4 { | ||
+ | background-image: | ||
+ | background-color: | ||
+ | background-size: | ||
+ | } | ||
+ | </ | ||
+ | <code javascript> | ||
+ | for (let i=0; i<3; i++) { | ||
+ | x-=vx; | ||
+ | y-=vy; | ||
+ | meinRaster.setValue(x, | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ |