자바스크립트 #05 틱택토 마무리

자바스크립트 #05 틱택토 마무리(foreach 반복문을 통한 2차원배열 원소 접근)

foreach

array.forEach(callbackFunction(currnetValue, index, array), thisArg);

foreach는 반복문이다.

매개변수로 들어온 array의 요소값만큼 반복되고

currentValue는 배열 내의 현재 값,

index는 현재 값의 인덱스이다.

이를 통해 2차원배열의 값들을 초기화할 수 있다.

var initTable = function(){
    tdArr.forEach(function(tr){
        console.log(tr);
        tr.forEach(function(td){
            console.log(td);
            td.textContent = 'Push Me';
        });
    });
}

2차원배열인 tdArr의 원소인 tr은 총 3개 삽입했으므로 3번 반복할 것이고 tr의 원소는 3개씩의 td를 갖는다.

로그를 찍어보면 3번의 tr값, 9번의 td값들이 출력되는 것을 확인할 수 있다.

이를 통해 테이블의 td요소의 모든 값들을 초기화하는 메소드를 작성할 수 있다.

var initTable = function(){
    tdArr.forEach(function(tr){
        tr.forEach(function(td){
            td.textContent = '';
        });
    });
}

이전 정리글에서 데이터를 검증하는 부분만 작성해 추가한다.

가로줄을 클릭했을 때 현재의 가로줄의 다른 열 요소들이 현재 turn값과 같은지 비교한다.

    if(tdArr[rowVal][0].textContent == turn &&
        tdArr[rowVal][1].textContent == turn &&
        tdArr[rowVal][2].textContent == turn)
            isFill = true;

세로줄도 마찬가지로 작성한다.

---

대각선은 우하방향, 좌하방향이 존재한다.

우하방향은 rowVal, colVal이 같을때, 좌하방향은 1,1을 제외한 맨 끝 원소들의 row, col값을 뺐을때 절대값이 2일때 해당한다.

 if(rowVal - colVal == 0 || Math.abs(rowVal - colVal) == 2)
    

그리고 우하, 좌하방향의 원소값들이 turn값과 일치하는지 확인하면 된다.

결과

코드

var body = document.body;
var table = document.createElement('table');
document.body.appendChild(table);
var result = document.createElement('div');

var scoreBoard = document.createElement('div');
var score =[0,0];


//1차원 배열
var tdArr = new Array();
var rowArr = new Array();
var turn = 'X';
var isFill = false;

var checkAnswer = function(tdArr, rowVal, colVal){

}

//td요소의 클릭 이벤트
var tdClick = function(e){
    //행 인덱스
    //e.target은 td, td의 부모인 tr노드는 rowArr의 배열의 원소임
    //해당 tr노드를 rowArr배열의 인덱스에서 꺼내 rowVal에 저장한다.
    var rowVal = rowArr.indexOf(e.target.parentNode);
    //열 인덱스
    //tdArr의 rowVal행(현재 클릭된 행) 중에서 클릭된 td의 인덱스)
    var colVal = tdArr[rowVal].indexOf(e.target);
    
    if(tdArr[rowVal][colVal].textContent === '')
        tdArr[rowVal][colVal].textContent = turn;

    //가로줄 검증
    //현재 클릭된 rowVal에서 colVal의 값들 모두 현재 turn값과 일치하는지 검증
  
    if(tdArr[rowVal][0].textContent == turn &&
        tdArr[rowVal][1].textContent == turn &&
        tdArr[rowVal][2].textContent == turn)
            isFill = true;

    if(tdArr[0][colVal].textContent == turn &&
        tdArr[1][colVal].textContent == turn &&
        tdArr[2][colVal].textContent == turn)
            isFill = true;

    if(rowVal - colVal == 0 || Math.abs(rowVal - colVal) == 2)
    {
        if((tdArr[0][0].textContent == turn &&
             tdArr[1][1].textContent == turn &&
             tdArr[2][2].textContent == turn) ||
             (tdArr[0][2].textContent == turn &&
             tdArr[1][1].textContent == turn &&
             tdArr[2][0].textContent == turn))
              isFill = true;
    }
    console.log(isFill);


    if(isFill)
    {
        initTable();
        result.textContent = turn + "님이 승리하셨습니다!";
        if(turn == 'X')
            score[0]++;
        else
            score[1]++;
        scoreBoard.textContent = "X 점수 : "+score[0]+" O점수 : " + score[1];
        console.log(score);
        isFill = false;
    }
    //턴 넘기기
    else
    {
        //칸 채우기
        
        if(turn == 'X')
            turn = 'O';
        else
            turn = 'X';
    }   

};

//테이블 생성 메소드
var createTable = function(){
    for(var i = 0; i < 3; i++)
    {
        var tr = document.createElement('tr');
        //각 항목에 배열로 선언 = 2차원배열
        tdArr[i] = new Array();
        rowArr.push(tr);
        //행 tr요소 생성

        for(var j = 0; j < 3; j++)
        {
            var td = document.createElement('td');
            tdArr[i].push(td);
            tr.appendChild(td);
            td.addEventListener('click', tdClick);

        }
        table.appendChild(tr); 
    }
    body.appendChild(result);
    scoreBoard.textContent = "X 점수 : "+score[0]+ "  :  O 점수 : " + score[1];
    body.appendChild(scoreBoard);
    

};

var initTable = function(){
    tdArr.forEach(function(tr){
        tr.forEach(function(td){
            td.textContent = '';
        });
    });
}


//테이블 생성
createTable();

//테이블 값 초기화
initTable();