[자바스크립트] 틱택톡 만들기

이중 배열을 활용하여 틱택톡 게임을 만들어 보았다. 틱택톡 게임은 3x3칸에 'x' , 'o'를 번갈아 가면서 작성 후 먼저 가로, 세로, 대각선에 먼저 같은 문양 3개를 두는 사람이 이기는 것 이다.

1. DOM을 활용하여 html코드 만들기 & 변수 선언

DOM을 연습하기 위해 html 태그를 DOM을 활용하여 만들어 보았다.
3x3 칸을 만들기 위해 table태그를 활용 하였다.

var table = document.createElement("table");
document.body.appendChild(table);
var result = document.createElement("div");
document.body.appendChild(result);
var length = []; // 칸을 저장할 빈 배열
var line = []; // 줄을 저장할 빈 배열
var turn = 'x'; // 칸에 표시할 문자

2. DOM을 활용한 html코드 만들기2 & 새로운 칸과 2중 배열 만들기

새로운 칸과 배열을 만들기 위해 push() 함수를 활용하였다. 새로운 칸을 만들고 후에는 나중에 칸을 카운트하기 위해서 push() 함수를 한번더 활용 하였다. 그리고 addEventListener();를 만들어 클릭을 하면 함수를 실행되게 만들었다.

for(var i=1; i<=3; i++){
    var tr = document.createElement("tr");
    length.push([]); // 새로운 배열의 칸을 만들어줌
    line.push(tr); // 줄을 카운트 해주기 위한 push 함수
    for(var j=1; j<=3; j++){
        var td = document.createElement("td");
        length[i-1].push(td); // 칸을 카운트 해주기 위한 push 함수
        tr.appendChild(td);
        td.addEventListener('click', callback);
    }
    table.appendChild(tr);
}

활용 메소드

• push 를 활용하여 배열을 정렬

3. 기능 구현

처음 구현한 기능은 target을 이벤트의 기능을 위임 해준 후 indexOf를 통해 line 배열에 저장후 변수 line2에 저장하였고 length2도 마찬가지다.

다음 if문은 3x3 칸에 칸이 비워져 있는 경우 클릭을 하면 'x' 가 나올 것 이고 그 후에는 3칸이 채워지는 if문으로 작성하였다.

마지막 if문은 번갈아 가면서 x o 가 나와 야 하기 때문에 'x' 에서 'o'로 바꿔주고 'o' 에서 'x'로 바꿔주는 코드를 작성하였다.

var callback = function(e){

    var line2 = line.indexOf(e.target.parentNode); // 타켓의 부모 노드를 찾아 저장
    var length2 = length[line2].indexOf(e.target); // 타켓의 노드를 찾아서 저장

    if(length[line2][length2].textContent === ''){ // 칸이 비워져 있는 경우 
        var full = false; // 칸이 다 채워지지 않을 경우 false
        length[line2][length2].textContent = turn; // 처음 칸을 클릭하였을 때는 x 로 시작한다.

            if(length[line2][0].textContent === turn && 
            length[line2][1].textContent === turn &&
            length[line2][2].textContent === turn
            ){
                full = true;
            } // 가로칸 3개가 채워지면 종료
            if (length[0][length2].textContent === turn && 
                length[1][length2].textContent === turn &&
                length[2][length2].textContent === turn
                ){
                    full = true;
            } // 세로칸 3개가 채워지면 종료

            if(length[0][0].textContent ===turn &&
               length[1][1].textContent ===turn &&
               length[2][2].textContent ===turn 
            ){
                full = true;
            } // 대각선 3개가 채워지면 종료

            if( length[0][2].textContent ===turn &&
                length[1][1].textContent ===turn &&
                length[2][0].textContent ===turn 
             ){
                 full = true;
             } // 대각선 3개가 채워지면 종료

            if(full){
                result.textContent = turn + '님이 승리하셨습니다.' // 결과창 출력
            }

            if(turn === 'x'){
                turn ='o';
            }
            else{
                turn = 'x';
            } // 'x', 'o'가 번갈아 가면서 나와야 됨
        }
    else{
        console.log('가득차 있습니다.');
    } // 칸이 채워져 있으면 출력

}

활용 메소드

• target 이벤트 함수 기능 위임
• indexOf 배열요소 찾아서 저장

4. 전체코드

var table = document.createElement("table");
document.body.appendChild(table);
var result = document.createElement("div");
document.body.appendChild(result);
var length = []; // 칸을 저장할 빈 배열
var line = []; // 줄을 저장할 빈 배열
var turn = 'x'; // 칸에 표시할 문자


var callback = function(e){

    var line2 = line.indexOf(e.target.parentNode); // 타켓의 부모 노드를 찾아 저장
    var length2 = length[line2].indexOf(e.target); // 타켓의 노드를 찾아서 저장

    if(length[line2][length2].textContent === ''){ // 칸이 비워져 있는 경우 
        var full = false; // 칸이 다 채워지지 않을 경우 false
        length[line2][length2].textContent = turn; // 처음 칸을 클릭하였을 때는 x 로 시작한다.

            if(length[line2][0].textContent === turn && 
            length[line2][1].textContent === turn &&
            length[line2][2].textContent === turn
            ){
                full = true;
            } // 가로칸 3개가 채워지면 종료
            if (length[0][length2].textContent === turn && 
                length[1][length2].textContent === turn &&
                length[2][length2].textContent === turn
                ){
                    full = true;
            } // 세로칸 3개가 채워지면 종료

            if(length[0][0].textContent ===turn &&
               length[1][1].textContent ===turn &&
               length[2][2].textContent ===turn 
            ){
                full = true;
            } // 대각선 3개가 채워지면 종료

            if( length[0][2].textContent ===turn &&
                length[1][1].textContent ===turn &&
                length[2][0].textContent ===turn 
             ){
                 full = true;
             } // 대각선 3개가 채워지면 종료

            if(full){
                result.textContent = turn + '님이 승리하셨습니다.' // 결과창 출력
            }

            if(turn === 'x'){
                turn ='o';
            }
            else{
                turn = 'x';
            } // 'x', 'o'가 번갈아 가면서 나와야 됨
        }
    else{
        console.log('가득차 있습니다.');
    } // 칸이 채워져 있으면 출력

}

for(var i=1; i<=3; i++){
    var tr = document.createElement("tr");
    length.push([]); // 새로운 배열의 칸을 만들어줌
    line.push(tr); // 줄을 카운트 해주기 위한 push 함수
    for(var j=1; j<=3; j++){
        var td = document.createElement("td");
        length[i-1].push(td); // 칸을 카운트 해주기 위한 push 함수
        tr.appendChild(td);
        td.addEventListener('click', callback);
    }
    table.appendChild(tr);
}

5. 부족했던 부분

1. 메소드 활용 능력이 부족하여 고민을 많이 하였다.
2. 배열 저장을 어떻게하고 어떻게 불러와야 하는지 잘 몰라 시간이 오래 걸렸다.
3. 지역변수와 전역변수 활용을 잘 못하여 오류가 많았다.
4. 초기화 기능을 구현하지 못하였는데 다음 토이 프로젝트에서는 구현하는게 목표이다.