wsdt/tictactoe

Tic Tac Toe with highscore (university assignment)

TicTacToe

Basic PHP and JS Tic-Tac-Toe. University assignment. No frameworks or ORMs used, coded by ourselves.

Features

• Login & Registration
• Ask both players if ready
• Multiplayer (locally) and Singleplayer (pattern-based logic with configurable difficulty)
• Highscore

Collaborators

• Philipp Gsaller
• Max Zoller
• Kevin Riedl

tictactoe's Issues

Lösungskonzept für Spiellogik Tic Tac Toe

Sehr geehrte Studierende,

nachdem mich der Hilferuf von Herrn Zoller erreicht hat, schreibe ich Ihnen wie Sie unkompliziert zu einer Lösung für Tic Tac Toe kommen sollten. Das ist allerdings nur die grundsätzliche Überlegung. Es ist an Ihnen diese Überlegungsschritte in JavaScript / jQuery umzusetzen.

Zunächst einmal müssen wir uns eine Art Datenstruktur für das Tic Tac Toe Spielfeld überlegen. Das Spielfeld besteht aus 3 Reihen und 3 Spalten. Somit haben wir 9 Felder. Diese könnten wir einfach durchnummerieren - feld1, feld2, feld3, ..., feld8, feld9 oder wir nummerieren zweidimensional yx wobei x für die Spalte steht und y für die Zeile. Also in etwa so:

00	01	02
10	11	12
20	21	22

Das übertragen wir einfach in HTML Markup und addressieren die Felder mit einer ID. Stellen sicherheitshalber ein f davor gefolgt von yx. Auf folgende Weise:

 [...]
        <div class="row">
           <div class='ttt_field' id='f00'></div>
           <div class='ttt_field' id='f01'></div>
           <div class='ttt_field' id='f02'></div>
        </div>
        <div class="row">
           <div class='ttt_field' id='f10'></div>
           <div class='ttt_field' id='f11'></div>
           <div class='ttt_field' id='f12'></div>
        </div>
        <div class="row">
           <div class='ttt_field' id='f20'></div>
           <div class='ttt_field' id='f21'></div>
           <div class='ttt_field' id='f22'></div>
        </div>
 [...]

Jetzt legen wir einfach fest, dass als erstes der (menschliche) Spieler an der Reihe ist. Der soll auf ein Feld klicken können. Wir müssen dann prüfen ob das Feld überhaupt frei ist und er da klicken darf - falls es nicht frei ist - reagieren wir nicht drauf. Nachdem der Spieler eine Wahl getroffen hat, ist der Computer an der Reihe.

Am Anfang eines Spiels steht nichts in den Feldern. Wir merken uns in JavaScript irgendwo die Anzahl der freien Felder. Das ist zu Beginn des Spiels 9. Außerdem merken wir uns ob das Spiel vorbei ist. Das ist am Anfang des Spiels false.

Hat der Spieler der am Zug ist auf ein leeres Feld geklickt dann machen wir um einen Spielzug zu setzen in einer Funktion setField(y, x, playerSymbol) vier Dinge:

1. setzen wir an die Stelle ein X (oder O) falls der Computer an der Reihe war (hier können Sie auch beliebig andere Dinge machen - zum Beispiel mit einer CSS Klasse dafür sorgen, dass Farbe ins Spiel kommt) denken Sie für beide Dinge an die jQuery Methoden .addClass für das hinzufügen einer css Klasse und an .html('X') um einen Wert zu setzen oder .html() um den Wert auszulesen
2. zweitens prüfen ob der Spieler gewonnen hat (dann wäre hier Ende und wir würden irgendwie "gewonnen" ausgeben) - wie prüfen wir ob der Spieler gewonnen hat? Der Spieler hat ein "Symbol" - X der Mensch und O der Computer. Ist in einer Reihe mit gleichem Symbol, eine Spalte mit gleichem Symbol oder eine der diagonalen mit gleichem Symbol - hat der Spieler gewonnen. gameOver = true
3. drittens erniedrigen wir die Anzahl der freien Felder um 1
4. Prüfen wir ob es noch freie Felder gibt - gibt es keine freien Felder mehr - dann wissen wir, dass es unentschieden ist gameOver = true

Jetzt prüfen wir ob gameOver == false ist - ist das der Fall, dann darf der Computer setzen:

Der klickt jetzt nicht auf ein Feld - sondern wir müssen uns irgendeine Logik überlegen welches Feld er wählt. Nennen wir die Funktion zum Beispiel makeMoveDecision(). Da könnten Sie einerseits eine abgefahrene Strategie entwickeln welches Feld er in welchem Fall wählen soll - zum Beispiel das gewinnen des Spielers verhindern. Oder aber eine Zwickmühle bauen. Da könnten Sie sich in einer eigenen kleinen künstlichen Intelligenz austoben. Oder aber wir machen es erstmal recht simpel - wir wählen solange zwei Zufallszahlen im Bereich von 0 bis 2 bis wir ein Feld treffen das leer ist. Und mit dieser Wahl machen wir dann den Spielzug - auf die gleiche Weise wie es der menschliche Spieler getan hat. Wir nehmen die zwei Zufallszahlen die auf ein leeres Feld zeigen und rufen setField(y, x, 'O'); auf.

Gut. Das zur Logik. Sollten Sie Probleme beim implementieren dieser Logik haben - oder auf Probleme stoßen, dann benötige ich von Ihnen den Code den Sie selbst versucht haben und dann helfe ich Ihnen. Wie gehabt - lassen Sie es mich einfach per Email wissen oder antworten Sie auf dieses Issue.

Viel Erfolg und herzliche Grüße
Daniel Hoover

LoginBox after Login verstecken

Box verschwindet noch nicht automatisch

Highscore Ein-/Ausgabe

TTT_Runden

In Kommentaren erwähnen, dass Runden aus f. Gründen aufgelassen:

• Spiel würde erst nach 5ter Runde in DB übertragen werden (bei schlechtem Spielverlauf einfach --> Neustart) [Nicht im Sinne der Reputation] etc.

TTT-Win/Lose/Draw

Wer hat gewonnen etc. funktioniert noch nicht