Tic Tac Toe using minmax algorithm (AI)

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Play tic tac toe against computer or with other human player

Screenshot

Links

• Live Site URL: https://gabrielfmpinheiro.github.io/Tic-Tac-Toe-With-Minmax-Algorithm/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• React
• Testing Library

What I learned

/* minmax algorithm */
  minmax(board, isMaximizing, player) {
    let result = this.winner(board);

    if (result !== null) {
      return scores[result];
    }

    if (isMaximizing) {
      let bestScore = -Infinity;
      board.forEach((cell, i) => {
        if (cell === '') {
          board[i] = 1;
          let score = this.minmax(board, false, player);
          board[i] = '';
          bestScore = Math.max(score, bestScore);
        }
      });
      return bestScore;
    } else {
      let bestScore = Infinity;
      board.forEach((cell, i) => {
        if (cell === '') {
          board[i] = this.changePlayers();
          let score = this.minmax(board, true, this.changePlayers());
          board[i] = '';
          bestScore = Math.min(score, bestScore);
        }
      });
      return bestScore;
    }
  }

Useful resources

• React Testing Library - This helped me for test all my code.
• Explanation of minmax algorithm - This helped me for understand how the minmax algorithm works.
• React Class Binder - This helped me for improve my code. I used the class method and the contructor, so this library makes the bind automatically.

Author

• Linkedin- Gabriel Pinheiro
• Frontend Mentor - @GabrielFMPinheiro
• Codewars - @GabrielFMPinheiro