Tic-Tac-Toe 게임의 논리

Tic-tac-toe는 기원전 1300년으로 거슬러 올라가는 지붕 타일에서 이러한 게임 보드가 발견된 고대 이집트로 거슬러 올라갈 수 있는 종이와 연필 게임입니다.

저는 최근에 온라인 멀티플레이어 Tic-tac-toe를 개발했으며 오늘은 게임의 알고리즘을 어떻게 설계했는지 설명하겠습니다.

나는 꽤 오랫동안 경쟁 프로그래밍을 해왔으며 이것이 실제 문제를 해결하기 위해 내 문제 해결 기술을 사용해야 했던 첫 번째 프로젝트라고 말할 수 있습니다.

우선 알고리즘에 대한 순서도를 다음과 같이 그릴 수 있습니다.



위의 순서도에 따르면 가상 보드의 모든 움직임을 추적해야 합니다. 이를 위해 모든 요소가 처음에는 빈 문자열인 3x3 중첩 배열을 사용하고 이동하는 플레이어에 따라 'X' 또는 'O'로 변경할 수 있습니다.

플레이어가 보드에서 움직일 때 우리는 가상의 보드에서 같은 동작을 해야 하고 먼저 움직이는 사각형이 이미 점유되어 있는지 여부를 확인해야 합니다. 이를 위해 다음과 같은 간단한 알고리즘을 구현할 수 있습니다.

let board = [
    ['', '', ''],
    ['', '', ''],
    ['', '', ''],
]
const checkAvailability = (x, y, player) => {
    if (board[x][y] !== '') return alert('Square is already occupied');
    board[x][y] = player
}

나는 Vanilla.js를 사용하여 게임을 개발했기 때문에 다음과 같은 몇 가지 추가 작업을 수행해야 했습니다.

<div class="container">
    <div class="row">
    <div class="square" id="1-1"></div>
    <div class="square" id="1-2"></div>
    <div class="square" id="1-3"></div>
    </div>
    <div class="row">
    <div class="square" id="2-1"></div>
    <div class="square" id="2-2"></div>
    <div class="square" id="2-3"></div>
    </div>
    <div class="row">
    <div class="square" id="3-1"></div>
    <div class="square" id="3-2"></div>
    <div class="square" id="3-3"></div>
    </div>
</div>

const btnIds = ['1-1', '1-2', '1-3', '2-1', '2-2', '2-3', '3-1', '3-2', '3-3'];

btnIds.forEach((btn) => {
    const button = document.getElementById(btn);

    //Listen for moves on each square
    button.addEventListener('click', (e) => {
        const coordinate = btn.split('-');
        const y = parseInt(coordinate[0]) - 1;
        const x = parseInt(coordinate[1]) - 1;

        //Check whether the selected button is empty
        if (board[y][x] === '') {
            // Eligible
        } else {
                // Not eligible
        }
    });
});

이제 우리는 이동에 대한 자격을 확인했고 다음으로 게임이 종료되었는지 여부를 확인해야 합니다. Tic-tac-toe 게임이 끝나는 두 가지 시나리오가 있습니다.

승패
플레이어는 가로 행, 세로 열 또는 대각선에 자신의 캐릭터 3개를 배치할 수 있으면 게임에서 승리합니다.

그리다
무승부 시나리오에서 보드의 모든 사각형은 'X' 또는 'O'로 채워져야 하며 세로 열, 가로 행 또는 대각선에 동일한 문자가 있는 세 개의 연속된 사각형이 있어서는 안 됩니다.

다음과 같이 알고리즘을 구현할 수 있습니다.

const checkWinner = (board) => {
    // Checking rows
    for (let i = 0; i < 3; i++) {
        const a = board[i][0];
        const b = board[i][1];
        const c = board[i][2];

        if (a != '' && a === b && b === c) {
            return 'win';
        }
    }

    // Checking columns
    for (let i = 0; i < 3; i++) {
        const a = board[0][i];
        const b = board[1][i];
        const c = board[2][i];

        if (a != '' && a === b && b === c) {
            return 'win';
        }
    }

    // Left Top to Bottom right diagonal
    const a = board[0][0];
    const b = board[1][1];
    const c = board[2][2];

    if (a != '' && a === b && b === c) {
        return 'win';
    }

    // Right Top to Left bottom diagonal
    const d = board[0][2];
    const e = board[1][1];
    const f = board[2][0];

    if (d != '' && d === e && e === f) {
        return 'win';
    }

    // Check for draw
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            const square = board[i][j];
            if (square === '') return undefined;
        }
    }

    return 'draw';
};

마지막으로 위의 모든 기능을 결합하고 다음과 같이 완전한 알고리즘을 구현할 수 있습니다.

const checkAvailability = (x, y, player) => {
    if (board[x][y] !== '') return alert('Square is already occupied');
    board[x][y] = player

    if (checkWinner(board)) return alert(checkWinner(board));
    const nextPlayer = player === 'X' ? 'O' : 'X';
    alert(`${nextPlayer}s' chance`)
}

또한, 우리는 기회가 어떤 플레이어에게 있는지 확인하고, 게임이 끝나면 플레이어가 움직이지 못하게 하는 등의 기능을 구현하기 위해 몇 가지 조건을 더 추가할 수 있습니다.

창의력을 발휘하여 위의 시나리오에 대한 솔루션을 구현하고 막힐 때마다 다른 사람에게 자유롭게 질문하십시오.

좋은 주말 보내세요. 감사합니다!