Web Tic-Tac-Toe

For CS506 final presentation.

Wenzhi Xu

Outline

1. Outcomes

2. Technology I used

3. OOD

4. Algorithm Analysis

5. Drawbacks

6. Q&A

7. Reference

Outcomes

  1. 5*5 Tac Tic Toe
  2. Support AI (low intelligence)
  3. Support reset play board
  4. Web UI can be played online
  5. Support multiple users to play at the same time

Code Structure

http://book.xuwenzhi.com

Try It!

Please don't care the subdomain name.

Technolegy I used

1. Python with OOP

2. Javascript(ES6), HTML and CSS

3. Appier Framework

4. Minimax algorithm for AI

5. Nginx Server with reverse proxy

6. Design Pattern with Combination Mode

7. Using simple unit testing to verify some cases

OOD

  1. Tictactoe class is the core engine
  2. Index class depend on Tictactoe class

How to support multiple users？

Minimax Algorithm

    """
    core AI minimax algorithm for 5 * 5 chess board
    """
    def minimax(self, play_board, depth, player):
        if player == 'X':
            best = [-1, -1, -infinity]
        else:
            best = [-1, -1, +infinity]
        if depth == 0 or self.check(play_board) != "":
            score = self.evaluate(play_board)
            return [-1, -1, score]

        empty_cells = self.empty_cells(play_board)
        for cell in empty_cells:
            x, y = cell[0], cell[1]
            play_board[x * self.diameter + y] = player
            # using DFS to track all steps
            score = self.minimax(play_board, depth - 1, 'X' if player == 'O' else 'O')
            play_board[x * self.diameter + y] = ""
            score[0], score[1] = x, y

            if player == 'X':
                if score[2] > best[2]:
                    best = score  # max value
            else:
                if score[2] < best[2]:
                    best = score  # min value

        return best

Minimax Algorithm

  1. Using DFS to traverse all steps
  2. Try all possible results of player and AI
  3. Calculate the scores of these results
  4. Determine AI's next step
play_board[x * self.diameter + y] = player
score = self.minimax(play_board, depth - 1, 'X' if player == 'O' else 'O')
play_board[x * self.diameter + y] = ""

Shortage

1. Some magic numbers.

 

 

2. Minimax algorithm execution time is too long.

 

3. Board attribute in Tictactoe should be private.

Q&A

References

https://towardsdatascience.com/tic-tac-toe-creating-unbeatable-ai-with-minimax-algorithm-8af9e52c1e7d

https://appier.hive.pt/

 

 

Thanks!

Made with Slides.com