JS 틱택토 게임

틱택토 게임 구현하기.

• e.target : 클릭된 타겟
• e.target.parentNode : 클릭된 타겟 부모 노드
• e.target.children : 클릭된 타겟 자식 노드
• Math.abs : 절대값

var body = document.body;
var table = document.createElement('table');
var trs = [];
var tds = [];
var turn = 'X';
var result = document.createElement('div');

var click = function(e) {
    var trNum = trs.indexOf(e.target.parentNode); // 몇번째 줄
    var tdNum = tds[trNum].indexOf(e.target); // 몇번째 칸

    if(tds[trNum][tdNum].textContent !== "") { // 칸이 이미 채워져 있는가
    } else {
        tds[trNum][tdNum].textContent = turn;
        // 세칸 다 채워졌나? - 하단 방법은 좋은 방법은 아님
        var full = false;
        // 가로줄 검사
        if (
            tds[trNum][0].textContent === turn &&
            tds[trNum][1].textContent === turn &&
            tds[trNum][2].textContent === turn
            ) {
            full = true;
        }
        // 세로줄 검사
        if (
            tds[0][tdNum].textContent === turn &&
            tds[1][tdNum].textContent === turn &&
            tds[2][tdNum].textContent === turn
            ) {
            full = true;
        }

        // 대각선 검사
        if(
            tds[0][0].textContent === turn &&
            tds[1][1].textContent === turn &&
            tds[2][2].textContent === turn
            ) {
            full = true;
        }

        if(
            tds[0][2].textContent === turn &&
            tds[1][1].textContent === turn &&
            tds[2][0].textContent === turn
            ) {
            full = true;
        }

        if (full) {
            result.textContent = turn + '님이 승리!';
            turn = 'X';
            tds.forEach (function (tr) {
                tr.forEach(function (td) {
                    td.textContent = '';
                })
            })
        } else {
            if (turn === 'X') {
                turn = 'O';
            } else {
                turn = 'X';
            }
        }
    }
}

for(i = 1; i <=3; i++) {
    var tr = document.createElement('tr');
    trs.push(tr);
    tds.push([]);
    for (var j = 1; j <= 3; j++) {
        var td = document.createElement('td');
        td.addEventListener('click', click);
        tds[i - 1].push(td);
        tr.appendChild(td);
    }
    table.appendChild(tr);
} 

body.appendChild(table);

---

REFERENCE
https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B2%8C%EC%9E%84-%EA%B0%9C%EB%B0%9C/lecture/17180?tab=note