[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기

틱택토 게임 화면 ❘ 이미지 출처 - 본인 프로젝트

 

틱택토 소개

---

틱택토는 2명의 플레이어가 자신의 기호(X, O) 3개를 가로, 세로, 대각선으로 연속해서 놓이도록 하는 보드 게임이다. 게임은 주로 3x3 격자 보드에서 진행된다. 플레이어는 번갈아가면서 자신의 기호를 놓고, 한 칸엔 한 개의 기호만 놓을 수 있다. 모든 칸에 기호를 놓았지만 어느 한쪽도 연속적인 세 개의 기호를 배열하지 못하면 게임은 무승부로 끝난다(무승부가 많은 게임).

 

 

승리 조건 체크

---

틱택토는 행렬로 이뤄진 2차원 보드에서 진행하지만, 1차원 배열로 관리하면 각 칸을 단일 인덱스로 접근할 수 있기 때문에 데이터를 더 수월하게 관리할 수 있다. 게임 로직을 구현할 때도 인덱스 계산을 단순화시켜 코드의 복잡성을 줄이는 데 도움이 된다. 또한, 1차원 배열은 그리드 스타일을 이용해 2차원 보드로 렌더링 할 수 있다.

const board = [null, 'O', 'X', null, null, 'O', ...];

/*
  [null, 'O', 'X']
  [null, null, 'O']    
  [null, null, null]
*/

 

Basic

3x3 보드 각 격자에 인덱스를 표기한 이미지

승리 조건을 검사하는 가장 간단한 방법은 승리할 수 있는 경우의 수(인덱스)를 2차원 배열에 저장해두고, 현재 게임 보드와 비교하는 방식이다. 3x3 보드에선 가로, 세로, 대각선 총 8가지 방법($size \times 2 +2$)으로 승리할 수 있다. React 공식 문서에 있는 Tic-Tac-Toe 튜토리얼도 이 방법을 사용한다.

// React 공식 문서 코드 살짝 변형
function calculateWinner(board: number[]) {
  const lines = [
    [0, 1, 2], // row 1
    [3, 4, 5], // row 2
    [6, 7, 8], // row 3
    [0, 3, 6], // column 1
    [1, 4, 7], // column 2
    [2, 5, 8], // column 3
    [0, 4, 8], // diagonal 1
    [2, 4, 6], // diagonal 2
  ];

  for (const [a, b, c] of lines) {
    const isLineMatch = board?.[a] === board?.[b] && board?.[a] === board?.[c];
    if (isLineMatch) return board[a]; // 'X' | 'O'
  }

  return null;
}

 

하지만 이 방법은 고정된 보드 크기와 미리 정의한 승리 조건에만 최적화 되어 있기 때문에, 승리 조건이나 보드 크기를 변경할 수 있는 상황에선 적합하지 않다. 다른 보드 크기의 모든 가능한 승리 조합을 수동으로 추가하는건 비효율적이므로 좀 더 유연한 방법이 필요하다.

 

 

Advanced

---

주요 로직 (game-core.ts)

const checkWinIndexes = (
  board: TBoard,
  winCondition: number,
  linearIndex: number,
  player: BasePlayer,
) => {
  const size = getBoardSize(board);
  const { row: lastRow, col: lastCol } = getCoordinates(linearIndex, size);

  const directions = [
    { deltaRow: 0, deltaCol: 1 }, // 가로
    { deltaRow: 1, deltaCol: 0 }, // 세로
    { deltaRow: 1, deltaCol: 1 }, // 우하 대각선
    { deltaRow: 1, deltaCol: -1 }, // 좌하 대각선
  ];

  for (const { deltaRow, deltaCol } of directions) {
    const winningIndexes = checkDirection(
      board,
      winCondition,
      player,
      size,
      { lastRow, lastCol },
      { deltaRow, deltaCol },
    );

    // 승리한 위치의 인덱스 배열 반환
    if (winningIndexes)
      return winningIndexes.map(({ row, col }) =>
        getLinearIndex(row, col, size),
      );
  }

  return null;
};

const checkDirection = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
  size: number,
  { lastRow, lastCol }: RowColPair<'lastRow' | 'lastCol'>,
  { deltaRow, deltaCol }: RowColPair<'deltaRow' | 'deltaCol'>,
) => {
  const searchDirection = (deltaRow: number, deltaCol: number) => {
    const winningIndexes = [];

    // 마지막 놓았던 위치는 제외하기 위해 i = 1 부터 시작
    for (let i = 1; i < winCondition; i++) {
      const currentRow = i * deltaRow + lastRow;
      const currentCol = i * deltaCol + lastCol;

      // 보드 범위를 벗어났으면 검사 중지
      if (!isWithinBounds(size, currentRow, currentCol)) break;
      // 기호가 일치하지 않으면 검사 중지
      if (getCellIdentifier(board, currentRow, currentCol) !== player) break;

      winningIndexes.push({ row: currentRow, col: currentCol });
    }

    return winningIndexes;
  };

  // 양쪽 방향으로 연속된 마크 검사
  const forwardWinningIndexes = searchDirection(deltaRow, deltaCol);
  const backwardWinningIndexes = searchDirection(-deltaRow, -deltaCol);

  const combinedIndexes = [{ row: lastRow, col: lastCol }]; // 마지막 놓았던 위치 저장
  combinedIndexes.push(...forwardWinningIndexes, ...backwardWinningIndexes);

  return combinedIndexes.length >= winCondition ? combinedIndexes : null;
};

 

유틸리티 함수 (game-core.ts)

// row, col 좌표값이 보드 범위 안에 있는지 검사
const isWithinBounds = (size: number, row: number, col: number) => {
  return row >= 0 && row < size && col >= 0 && col < size;
};

// 1차원 보드에서 row, col 좌표값에 해당하는 기호 조회
const getCellIdentifier = (board: TBoard, row: number, col: number) => {
  const size = getBoardSize(board);
  const idx = getLinearIndex(row, col, size);
  return board[idx].identifier;
};

// 보드 사이즈 조회(row.length)
export const getBoardSize = (board: TBoard) => {
  const size = Math.sqrt(board.length);
  if (!Number.isInteger(size))
    throw new Error('Board is not a perfect square.');

  return size;
};

 

마지막 놓았던 격자 위치를 기준으로 가로, 세로, 대각선 방향으로 승리 조건 수 만큼 격자를 검사하면 보드 크기나 승리 조건이 동적인 경우에도 승리 여부를 검사할 수 있다. 예를들어 4×4 보드에서 10번 인덱스에 놓았다면 해당 인덱스를 기준으로 가로, 세로, 대각선 방향으로 승리 조건에 만족하는지 검사하면 된다.

 

 

마지막으로 놓은 10번 인덱스를 기준으로 가로/세로/대각선 방향으로 승리 여부를 검사해본다

💡 Delta(소문자 $\delta$ / 대문자 $\Delta$)는 변화, 차이를 의미한다. 주로 수학이나 과학에서 사용되며, 특정 값이나 양의 변화량을 나타낸다. 예를들어 $\delta{x}$는 $x$의 변화량을 나타낸다.

 

먼저 게임 보드에서 검사할 4가지 방향을 directions 배열에 미리 정의해둔다. 배열의 각 요소는 deltaRow, deltaCol을 포함하여, 보드의 특정 셀에서 다른 셀로 이동할 때 행과 열이 어떻게 변화하는지 나타낸다. 예를 들어 { deltaRow: 0, deltaCol: 1 }은 가로 방향을 의미하며, 행은 변하지 않고 열만 1씩 증가한다. 반대 방향에선 열이 1씩 감소한다.

const directions = [
  { deltaRow: 0, deltaCol: 1 }, // 가로 (반대 방향 -0, -1)
  { deltaRow: 1, deltaCol: 0 }, // 세로 (반대 방향 -1, -0)
  { deltaRow: 1, deltaCol: 1 }, // 우하 대각선 (반대 방향 -1, -1)
  { deltaRow: 1, deltaCol: -1 }, // 좌하 대각선 (반대 방향 -1, 1)
];

 

이 방향 값들을 사용하여 마지막 놓았던 위치부터 각 방향으로 연속된 셀을 검사한다. winCondition은 연속적으로 일치해야 하는 셀의 개수를 나타낸다. 예를 들어 winCondition이 3일 경우, X 혹은 O 기호가 가로, 세로 또는 대각선 방향으로 연속해서 3번 위치해야 승리할 수 있다.

checkWinIndexes 함수가 인자로 받은 인덱스는 마지막 수를 둔 곳으로 간주한다

 

export const checkWinIndexes = (
  board: TBoard,
  winCondition: number,
  linearIndex: number,
  player: BasePlayer,
) => {
  // ...
  for (const { deltaRow, deltaCol } of directions) {
    const winningIndexes = checkDirection(/* ... */);
    // ...
  }
  return null;
};

const checkDirection = (/* ... */) => {
  const searchDirection = (deltaRow: number, deltaCol: number) => {
    const winningIndexes = [];

    // 마지막 놓았던 위치는 제외하기 위해 i = 1 부터 시작
    for (let i = 1; i < winCondition; i++) {
      const currentRow = i * deltaRow + lastRow;
      const currentCol = i * deltaCol + lastCol;

      if (/* ... */) break; // 보드 범위를 벗어났거나 기호가 일치하지 않으면 검사 중지
      winningIndexes.push({ row: currentRow, col: currentCol });
    }

    return winningIndexes;
  };

  // 양쪽 방향으로 연속된 마크 검사
  const forwardWinningIndexes = searchDirection(deltaRow, deltaCol);
  const backwardWinningIndexes = searchDirection(-deltaRow, -deltaCol);
  // ...
};

 

만약 deltaRow 혹은 deltaCol 값이 0이라면, i를 곱해도 항상 0이 되므로 위치 변화없이 해당 좌표에 고정된다. i는 1씩 증가하므로 delta 값이 1 혹은 -1일 땐 결과적으로 1씩 증가하거나 감소하는 패턴이 된다.

 

$$\begin{align*}\delta = 1: \quad & 1 \times 1, \quad 2 \times 1, \quad 3 \times 1, \quad \ldots \\ \delta = -1: \quad & 1 \times (-1), \quad 2 \times (-1), \quad 3 \times (-1), \quad \ldots\end{align*}$$

 

4×4 보드에서 마지막 놓았던 좌표를 행 2, 열 2로 가정하고 계산해보면 다음과 같다.

[가로 방향]
------------------------------------------
i = 1
row = 1(i) * 0(deltaRow) + 2(lastRow) = 2
col = 1(i) * 1(deltaCol) + 2(lastCol) = 3
push({ row: 2, col: 3 })

i = 2
row = 2(i) * 0(deltaRow) + 2(lastRow) = 2
col = 2(i) * 1(deltaCol) + 2(lastCol) = 4
col 보드 범위 초과 -> break

[가로 방향 - 반대]
------------------------------------------
i = 1
row = 1(i) * -0(deltaRow) + 2(lastRow) = 2
col = 1(i) * -1(deltaCol) + 2(lastCol) = 1
push({ row: 2, col: 1 })

i = 2
row = 2(i) * -0(deltaRow) + 2(lastRow) = 2
col = 2(i) * -1(deltaCol) + 2(lastCol) = 0
push({ row: 2, col: 0 })

...

 

인덱스 계산

1차원 보드 인덱스 → 행렬 좌표 계산

1차원 보드의 인덱스와 보드 사이즈를 이용해 2차원 보드의 행(row), 열(col) 좌표 값을 계산할 수 있다. 예를들어 4×4 보드 인덱스 10 좌표 값은 행 row = floor(10 / 4) = 2, 열 10 mod 4 = 2 로 계산할 수 있다.

const getCoordinates = (i: number, size: number) => {
  const row = Math.floor(i / size);
  const col = i % size; // 항상 0 ~ (size - 1) 값 반환
  return { row, col };
};

 

참고로 모듈로 연산(나머지 연산)은 항상 0부터 제수 - 1 값을 반환한다

0 mod 4 = 0 (피제수 mod 제수)
1 mod 4 = 1
2 mod 4 = 2
3 mod 4 = 3
4 mod 4 = 0
5 mod 4 = 1
...

 

행렬 좌표 → 1차원 보드 인덱스 계산

행 좌표에 보드 크기를 곱한 후 열 좌표를 더하면 1차원 보드의 인덱스 값을 계산할 수 있다. 예를 들어 4×4 크기 보드에서 행 좌표가 2일 경우 4 * 2 = 8로 계산하여 해당 행의 첫 번째 열 인덱스 값을 알 수 있다. 여기에 열 좌표값을 더하면 최종적인 1차원 보드의 인덱스를 얻을 수 있다.

const getLinearIndex = (row: number, col: number, size: number) => {
  return row * size + col;
};

 

모서리 인덱스 계산

정사각형 격자에서 size(한 변의 길이)를 이용해 네 모서리의 인덱스를 계산할 수 있다.

const getCornerIndexes = (size: number) => {
  const leftTop = 0;
  const rightTop = size - 1;
  const leftBottom = size * (size - 1);
  const rightBottom = size * size - 1;

  return [leftTop, rightTop, leftBottom, rightBottom];
};

 

• 왼쪽 상단 : 격자의 시작점이므로 인덱스는 항상 0
• 오른쪽 상단 : 첫번째 행의 마지막 요소이므로 행 길이 size에서 1을 뺀다
• 왼쪽 하단 : 마지막 행의 인덱스 size - 1 에서 열 길이 size 를 곱한다
• 오른쪽 하단 : 인덱스는 0부터 시작하므로 전체 격자 크기 size * size 에서 1을 뺀다

 

중앙 인덱스 계산

 

3×3 같은 홀수 크기 보드는 정확한 중앙점이 존재한다. 반면, 짝수 크기 보드는 단일 중앙점이 없기 때문에 중심에 가까운 4개 격자를 중앙으로 간주해야 한다. 이 4개 격자는 보드 정중앙에 2×2 격자 구역을 형성한다.

const getCenterIndexes = (size: number) => {
  // 홀수 size 보드
  if (size % 2 !== 0) return [Math.floor((size * size) / 2)];

  // 짝수 size 보드
  const halfSize = size / 2;
  return [
    (halfSize - 1) * size + halfSize - 1, // 중앙 격자 왼쪽 상단
    (halfSize - 1) * size + halfSize, // 중앙 격자 오른쪽 상단
    halfSize * size + halfSize - 1, // 중앙 격자 왼쪽 하단
    halfSize * size + halfSize, // 중앙 격자 오른쪽 하단
  ];
};

 

• (halfSize - 1) * size : 중앙 격자 위쪽 행의 시작점
• halfSize * size : 중앙 격자 아래쪽 행의 시작점
• 행 시작 인덱스 + (halfSize - 1) : 중앙 열의 왼쪽 인덱스
• 행 시작 인덱스 + halfSize : 중앙 열의 오른쪽 인덱스

 

 

최적의 수 찾기

---

💡 아래 설명에선 미니맥스, 알파-베타 가지치기 개념만 소개. 더 자세한 설명/구현 내용은 포스팅 링크 참고

 

틱택토 게임에서 최적의 수는 미니맥스(Minimax), 알파-베타 가지치기(Alpha-Beta Pruning) 등의 알고리즘을 사용한다. 미니맥스는 틱택토처럼 2명이 진행하는 제로섬 게임(zero-sum game)에서 가장 널리 사용하는 알고리즘으로, 각 플레이어가 최선의 수를 둔다고 가정하고 승리는 최대화하고 패배는 최소화하는 수를 찾는다.

 

미니맥스는 일반적으로 알파-베타 가지치기 알고리즘과 함께 사용한다. 알파-베타 가지치기는 알고리즘 효율성을 높이기 위해 사용하는 기법으로, 이미 탐색한 경로보다 더 나쁜 결과를 초래할 수 있는 수를 조기에 제거하여 검색 시간을 단축시키는 방법이다. 알파-베타 가지치기를 사용하면 미니맥스 알고리즘이 모든 가능한 수를 고려할 필요가 없어지므로 계산량을 상당히 줄일 수 있다.

주요 로직 (game-core.ts)

const findBestMoveIdx = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
) => {
  const opponent = getOpponent(player);
  const size = getBoardSize(board);

  // 승리 위치 탐색
  const bestMove = getFirstBestMoveIdx(board, winCondition, player);
  if (bestMove !== null) return bestMove;

  // 방어 위치 탐색
  const minDefenseCondition = winCondition - 2;
  // 연속된 기호가 배열될 수 있는 최소 길이부터 승리 조건까지의 범위. e.g. 승리 조건 4, 최소 방어 조건 2 -> 범위는 3 (2, 3, 4)
  const defenseRange = winCondition - minDefenseCondition + 1;
  // 계산된 범위에 따라 내림차순으로 방어 조건 배열 생성. e.g. 승리 조건 4 -> [4, 3, 2]
  const defenseConditions = Array.from(
    { length: defenseRange },
    (_, i) => winCondition - i,
  );

  for (const condition of defenseConditions) {
    const defenseMove = getFirstBestMoveIdx(board, condition, opponent);
    if (defenseMove !== null) return defenseMove;
    // 보드 크기와 승리 조건이 같다면 보드 전체를 채워야만 승리할 수 있으므로 이보다 작은 승리조건은 검사할 필요가 없다
    if (condition === size) break;
  }

  // 중앙, 모서리, 빈칸 중 임의 선택. 모든 칸이 다 찼으면 null 반환
  return chooseStrategicPosition(board, size);
};

const getFirstBestMoveIdx = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
) => {
  const idx = board.findIndex((cell, i) => {
    if (cell.identifier === null) {
      const winningIndexes = checkWinIndexes(board, winCondition, i, player);
      return winningIndexes !== null;
    }
    return false;
  });

  return idx !== -1 ? idx : null;
};

const chooseStrategicPosition = (board: TBoard, size: number) => {
  const availableMoves = getAvailableMoves(board);

  if (availableMoves.size === 0) return null;

  // 3x3 보드는 중앙, 모서리를 먼저 선점하는게 게임 승리에 유리함
  if (size === 3) {
    const centerIdx = getCenterIndexes(size);
    const cornerIndexes = getCornerIndexes(size);
    const filtered = [...centerIdx, ...cornerIndexes].filter((idx) =>
      availableMoves.has(idx),
    );
    if (filtered.length > 0) return selectRandomElement(filtered);
  }

  return selectRandomElement([...availableMoves]);
};

 

유틸리티 함수

// game-core.ts
const getAvailableMoves = (board: TBoard) => {
  return board.reduce((moves, cell, i) => {
    if (cell.identifier === null) moves.add(i);
    return moves;
  }, new Set<number>());
};

const getOpponent = (player: BasePlayer) => {
  return player === BasePlayer.X ? BasePlayer.O : BasePlayer.X;
};

// helpers.ts
const randomIntBetween = (from: number, to: number) => {
  return Math.floor(Math.random() * (to - from + 1) + from);
};

const selectRandomElement = <T,>(arr: T[]) => {
  return arr[randomIntBetween(0, arr.length - 1)];
};

 

승리 위치 탐색

승리 위치를 탐색하는 가장 간단한 방법은 현재 보드의 빈 칸을 플레이어 기호로 채우고, 해당 위치를 기준으로 가로, 세로, 대각선 방향으로 승리 조건을 만족하는지 검사해보는 것이다. 이 접근법은 단순하지만 위에서 작성한 승리 조건 체크 함수를 그대로 재사용할 수 있는 장점이 있다(checkWinIndexes 함수가 인자로 받은 인덱스는 마지막 수를 둔 위치로 간주하기 때문).

const getFirstBestMoveIdx = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
) => {
  const idx = board.findIndex((cell, i) => {
    if (cell.identifier === null) {
      const winningIndexes = checkWinIndexes(board, winCondition, i, player);
      return winningIndexes !== null;
    }
    return false;
  });

  return idx !== -1 ? idx : null;
};

const findBestMoveIdx = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
) => {
  // ...
  const bestMove = getFirstBestMoveIdx(board, winCondition, player);
  if (bestMove !== null) return bestMove;
  // ...
};

 

1. 보드를 순회하면서 빈 격자인지 확인한다
2. 빈 격자라면 해당 인덱스와 플레이어 정보로 checkWinIndexes 함수를 호출한다
3. 승리 조건을 만족한다면 현재 인덱스를 반환하고 아니라면 null을 반환한다

 

방어 위치 탐색

Basic

플레이어 정보만 변경하면 getFirstBestMoveIdx 등의 기존 로직을 그대로 재사용하여 방어 위치를 찾을 수 있다. 상대방 기호를 이용해 보드를 순회하면서 승리 조건을 만족하는 곳을 탐색하고, 승리할 수 있는 곳을 찾았다면 해당 위치를 방어 위치로 설정하면 된다.

const findBestMoveIdx = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
) => {
  const opponent = getOpponent(player); // player = 'O' | 'X'
  // ...
  const defenseMove = getFirstBestMoveIdx(board, winCondition, opponent);
  if (defenseMove !== null) return defenseMove;
};

 

Advanced

승리 조건이 4라면 방어가 필요한 상황

만약 승리 조건이 보드 사이즈(보드 한 변의 길이) 보다 작은 경우, 승리 조건 - 2 만큼 격자가 연속적으로 배열된 시점에, 연속된 배열 양 끝 중 한곳을 방어해 줘야 한다. 예를 들어 보드 사이즈가 6이고 승리 조건이 4인 상황에서 위 이미지처럼 20~21번에 연속적으로 기호가 배치됐다면, 19번 혹은 22번을 방어해야 한다. 그렇지 않으면 상대방이 다음 턴에 이들 위치 중 하나에 기호를 둬서 승리 조건을 충족시킬 수 있기 때문이다.

const findBestMoveIdx = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
) => {
  // ...
  const minDefenseCondition = winCondition - 2;
  const defenseRange = winCondition - minDefenseCondition + 1;
  const defenseConditions = Array.from(
    { length: defenseRange },
    (_, i) => winCondition - i,
  );

  for (const condition of defenseConditions) {
    const defenseMove = getFirstBestMoveIdx(board, condition, opponent);
    if (defenseMove !== null) return defenseMove;
    if (condition === size) break; // 보드 크기와 승리 조건이 같다면 해당 승리 조건만 검사
  }
  // ...
};

 

위 같은 상황을 방어하기 위해 승리 조건 - 2 부터 승리 조건까지의 수로 구성된 배열을 생성해서 모두 검사해 본다. 각 요소는 방어해야 할 연속된 격자의 길이를 나타낸다. 예를 들어 승리 조건이 4라면, 빈 격자에 기호를 배치했을 때 해당 기호가 연속해서 4개가 되는지 검사한다.

 

또한, 연속된 격자의 수가 많은 곳부터 먼저 방어하려면 조건 배열을 내림차순으로 생성해야 한다. 보드 사이즈가 6, 승리 조건이 4라면 defenseConditions 배열은 [4, 3, 2]가 된다.

 

보드 크기와 승리 조건이 동일할 땐 보드 전체를 채워야만 승리할 수 있으므로 보드 크기보다 작은 승리 조건은 검사할 필요가 없다. 따라서 if (condition === size) break; 조건문을 통해 반복을 중지시킨다.

 

전략적 위치 탐색

3×3 보드에선 일반적으로 중앙이나 모서리를 선점하는 것이 전략적으로 유리하다. 중앙 칸은 보드의 모든 방향에 영향을 미칠 수 있는 중요한 위치로, 플레이어에게 다양한 전략적 선택지를 제공한다. 모서리 칸은 행과 열, 대각선을 통해 승리 기회를 높여준다.

const chooseStrategicPosition = (board: TBoard, size: number) => {
  const availableMoves = getAvailableMoves(board);

  if (availableMoves.size === 0) return null;

  if (size === 3) {
    const centerIdx = getCenterIndexes(size);
    const cornerIndexes = getCornerIndexes(size);
    const filtered = [...centerIdx, ...cornerIndexes].filter((idx) =>
      availableMoves.has(idx),
    );
    if (filtered.length > 0) return selectRandomElement(filtered);
  }

  return selectRandomElement([...availableMoves]);
};

const findBestMoveIdx = (
  board: TBoard,
  winCondition: number,
  player: BasePlayer,
) => {
  // ...
  const size = getBoardSize(board);
  return chooseStrategicPosition(board, size); // 중앙, 모서리, 빈칸 중 랜덤하게 반환. 모든 칸이 다 찼으면 null 반환
};

 

3×3 보드에선 중앙과 모서리 중 비어있는 곳을 무작위로 선택한다. 봇이 항상 중앙을 먼저 선점하면 게임의 예측 가능성이 높아져 재미가 줄어들 수도 있기 때문. 다른 크기의 보드에선 비어 있는 칸 중 하나를 임의로 선택한다.

 

 

레퍼런스

---

• Tutorial: Tic-Tac-Toe | React
• PlayTicTacToe.org
• https://github.com/ucfx/TIC-TAC-TOE-GAME

 

 

완성 레포지토리

---

GitHub - romantech/tic-tac-toe: Customizable Tic-Tac-Toe game with React

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요