Tic Tac Toe — Projekte

Im Rahmen meiner Umschulung zum Fachinformatiker für Anwendungsentwicklung habe ich eine browserbasierte Tic-Tac-Toe-Anwendung entwickelt. Dabei werden Spielzüge serverseitig verarbeitet und der aktuelle Spielstatus nach jeder Aktion dynamisch aktualisiert.

Die Anwendung ermöglicht es zwei Spielern, abwechselnd ihre Spielzüge auszuführen. Nach jedem Zug wird automatisch geprüft, ob eine Gewinnkombination erreicht wurde oder das Spiel unentschieden endet. Bereits belegte Spielfelder können nicht erneut ausgewählt werden. Nach Spielende wird das Spielfeld gesperrt und das Ergebnis ausgegeben. Über eine Reset-Funktion kann jederzeit eine neue Partie gestartet werden.

Umgesetzte Funktionen

Dynamisches 3×3-Spielfeld mit serverseitiger Verarbeitung der Spielzüge
Abwechselnde Spielzüge für die Spieler „X“ und „O“
Validierung bereits belegter Spielfelder
Automatische Erkennung aller Gewinnkombinationen
Erkennung eines Unentschiedens
Sperrung des Spielfeldes nach Spielende
Zurücksetzen und Neustarten der Partie per Reset-Funktion
Dynamische Ausgabe des aktuellen Spielstatus und des Gewinners

Der Source-Code

Natürlich ist dieser Code kein Meisterwerk und man kann vieles daran deutlich verbessern. Um den vollen Umfang dieses Mini Projekt jedoch vorzustellen, werde ich ihn hier zur Verfügung stellen

tictactoe

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Tik-Tac-Toe</title>
    <style>
        table {
            width: 300px;
            height: 300px;
            table-layout: fixed;
            border-collapse: collapse;
        }

        td {
            width: 100px;
            height: 100px;
            padding: 0;
            text-align: center;
            vertical-align: middle;
            font-size: 48px;
        }
        td button {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
            border: 1px solid #555;
            font-size: 48px;
            cursor: pointer;
        }
        td button:hover {
            background-color: #eeeeee;
        }
        p {
            font-size: 45px;
        }
    </style>
</head>
<%
    String positionParameter = request.getParameter("position");
    String resetParameter = request.getParameter("reset");

    if (resetParameter != null) {
        board = new String[9];
        currentPlayer = "X";
    } else if (positionParameter != null) {
        int position = Integer.parseInt(positionParameter);

        boolean gameOver = isWinnerReady("X") || isWinnerReady("O") || isTie();

        if (!gameOver && position >= 0 && position < board.length
                && (board[position] == null || board[position].isEmpty())) {
            board[position] = currentPlayer;

            if (currentPlayer.equals("X")) {
                currentPlayer = "O";
            } else {
                currentPlayer = "X";
            }
        }
    }
%>
<body>
<%!
    public String[] board = new String[9];

    public String currentPlayer = "X";

    public boolean isTie() {
        for(String s : board) {
            if(s == null || s.isEmpty()) {
                return false;
            }
        }
        return true;
    }

    public boolean isWinnerReady(String player) {
        return player.equals(board[0]) && player.equals(board[1]) && player.equals(board[2]) ||
                player.equals(board[3]) && player.equals(board[4]) && player.equals(board[5]) ||
                player.equals(board[6]) && player.equals(board[7]) && player.equals(board[8]) ||
                player.equals(board[0]) && player.equals(board[3]) && player.equals(board[6]) ||
                player.equals(board[1]) && player.equals(board[4]) && player.equals(board[7]) ||
                player.equals(board[2]) && player.equals(board[5]) && player.equals(board[8]) ||
                player.equals(board[0]) && player.equals(board[4]) && player.equals(board[8]) ||
                player.equals(board[2]) && player.equals(board[4]) && player.equals(board[6]);
    }
%>
<h1>Tik Tak Toe</h1>
<h4>Klicke auf einen der freien Buttons um dein Zeichen zu setzen, </h4><br>
<h4>Aktueller Spieler: <%=currentPlayer%></h4>

<%
    boolean winnerX = isWinnerReady("X");
    boolean winnerO = isWinnerReady("O");
    boolean gameOver = winnerX || winnerO || isTie();

    if (winnerX || winnerO) {
%>
<h5 style="color:green">Der Spieler mit <%= winnerX ? "X" : "O" %> hat gewonnen!</h5>
<% } else if (isTie()) { %>
<h5 style="color:red">Unentschieden! Versuche es erneut</h5>
<% } %>

<form method="post" action="index.jsp">
    <table>
        <tr>
            <td>
                <button type="submit" name="position" value="0" <%= gameOver || board[0] != null ? "disabled" : "" %>>
                    <%= board[0] == null ? "" : board[0] %>
                </button>
            </td>
            <td>
                <button type="submit" name="position" value="1" <%= gameOver || board[1] != null ? "disabled" : "" %>>
                    <%= board[1] == null ? "" : board[1] %>
                </button>
            </td>
            <td>
                <button type="submit" name="position" value="2" <%= gameOver || board[2] != null ? "disabled" : "" %>>
                    <%= board[2] == null ? "" : board[2] %>
                </button>
            </td>
        </tr>
        <tr>
            <td>
                <button type="submit" name="position" value="3" <%= gameOver || board[3] != null ? "disabled" : "" %>>
                    <%= board[3] == null ? "" : board[3] %>
                </button>
            </td>
            <td>
                <button type="submit" name="position" value="4" <%= gameOver || board[4] != null ? "disabled" : "" %>>
                    <%= board[4] == null ? "" : board[4] %>
                </button>
            </td>
            <td>
                <button type="submit" name="position" value="5" <%= gameOver || board[5] != null ? "disabled" : "" %>>
                    <%= board[5] == null ? "" : board[5] %>
                </button>
            </td>
        </tr>
        <tr>
            <td>
                <button type="submit" name="position" value="6" <%= gameOver || board[6] != null ? "disabled" : "" %>>
                    <%= board[6] == null ? "" : board[6] %>
                </button>
            </td>
            <td>
                <button type="submit" name="position" value="7" <%= gameOver || board[7] != null ? "disabled" : "" %>>
                    <%= board[7] == null ? "" : board[7] %>
                </button>
            </td>
            <td>
                <button type="submit" name="position" value="8" <%= gameOver || board[8] != null ? "disabled" : "" %>>
                    <%= board[8] == null ? "" : board[8] %>
                </button>
            </td>
        </tr>
    </table><br>
    <button type="submit" name="reset" value="true">Zurücksetzen</button>
</form>
</body>
</html>