Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision Next revision Both sides next revision | ||
lehrkraefte:blc:informatik:ffprg1-2024:raster-tictactoe [2024/04/09 15:11] Ivo Blöchliger created |
lehrkraefte:blc:informatik:ffprg1-2024:raster-tictactoe [2024/04/09 17:57] Ivo Blöchliger [Tic Tac Toe] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Tic Tac Toe ====== | ====== Tic Tac Toe ====== | ||
+ | <WRAP todo> | ||
+ | * Legen Sie einen neuen Ordner ' | ||
+ | * Speichern Sie im gleichen Ordner auch folgende beiden Bilder (gemacht mit dem sehr zu empfehlenden OpenSource-Programm [[https:// | ||
+ | * {{lehrkraefte: | ||
+ | * Fügen Sie in der Datei '' | ||
+ | <code css> | ||
+ | .wert1 { | ||
+ | background-image: | ||
+ | background-size: | ||
+ | } | ||
+ | .wert2 { | ||
+ | background-image: | ||
+ | background-size: | ||
+ | } | ||
+ | </ | ||
+ | * In der Datei '' | ||
+ | * entfernen Sie den Aufruf von '' | ||
+ | * passen Sie die Grösse auf 3 mal 3 an, | ||
+ | * fügen Sie eine Variable '' | ||
+ | * 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> | ||
+ | <code javascript> | ||
+ | window.addEventListener(' | ||
+ | |||
+ | let meinRaster = new Raster(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, | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Callback für einen Klick definieren | ||
+ | meinRaster.clickCallback = function(x, y) { | ||
+ | if (cellsPlayed==9) { | ||
+ | reset(); | ||
+ | return; | ||
+ | } | ||
+ | let v = meinRaster.getValue(x, | ||
+ | if (v!=0) { | ||
+ | return; | ||
+ | } | ||
+ | meinRaster.setValue(x, | ||
+ | currentPlayer = 3-currentPlayer; | ||
+ | cellsPlayed++; | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Gewinn überprüfen ===== | ||
+ | <WRAP todo> | ||
+ | In der Datei '' | ||
+ | * 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 '' | ||
+ | * 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; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== 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, | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||