🟦

틱택토 게임[2단계][암기]

대분류

STEP06 이벤트응용

소분류

이벤트응용

영상

개념

style.css

#header {
    /* h3 가로 중앙 정렬 */
    text-align: center;
}
table, tr, td {
    border-collapse: collapse;
    /* 테이블 가로 중앙 정렬 */
    margin: auto;
}
td {
    text-align: center;
    border: 1px solid black;
    width: 50px;
    height: 50px;

    cursor: pointer;
}
.winner {
    color: red;
}
#footer {
    text-align: center;
}
JavaScript
복사

tictactoe.js

let size = 3;
let $table = document.createElement("table");
let $tdList = [];
let dataList = [];  // player1(1), player2(2)
let turn = true;    // player1(true), player2(false)
let win = 0;        // player1(1), player2(2)

function init() {

    for(let i=0; i<size; i++) {
        let temp = [0, 0, 0];
        dataList.push(temp);
        // dataList.push([0, 0, 0]);
    }

    for(let i=0; i<size; i++) {
        let $tr = document.createElement("tr");
        let $temp = [];
        for(let j=0; j<size; j++) {
            let $td = document.createElement("td");
            $td.addEventListener("click", clickEvent);
            $temp.push($td);
            $tr.append($td);
        }
        $tdList.push($temp);
        $table.append($tr);
    } 
    document.querySelector("#center").append($table);

    console.log($tdList);
}

function clickEvent() {
    for(let i=0; i<size; i++) {
        for(let j=0; j<size; j++) {
            if(this == $tdList[i][j]) {
                if(this.innerText == "") {
                    if(turn) {
                        this.innerText = "O";
                        dataList[i][j] = 1;
                    } else {
                        this.innerText = "X";
                        dataList[i][j] = 2;
                    }
                    turn = !turn;
                }
            }
        }
    }

    console.log(dataList);

    winCheck();
}

function winCheck() {
    // 가로 검사 3줄
    for(let i=0; i<size; i++) {
        if(dataList[i][0] == 1 && 
            dataList[i][1] == 1 &&
            dataList[i][2] == 1) {
                win = 1;
        } 
        if(dataList[i][0] == 2 && 
            dataList[i][1] == 2 &&
            dataList[i][2] == 2) {
            win = 2;
        } 
    }

    // 세로 검사 3줄
    for(let i=0; i<size; i++) {
        if(dataList[0][i] == 1 && 
            dataList[1][i] == 1 &&
            dataList[2][i] == 1) {
                win = 1;
        } 
        if(dataList[0][i] == 2 && 
        dataList[1][i] == 2 &&
        dataList[2][i] == 2) {
            win = 2;
        } 
    }

    // 대각선 \
    if(dataList[0][0] == 1 && dataList[1][1] == 1 && dataList[2][2] == 1) {
        win = 1;
    }
    if(dataList[0][0] == 2 && dataList[1][1] == 2 && dataList[2][2] == 2) {
        win = 2;
    }

    // 대각선 /
    if(dataList[0][2] == 1 && dataList[1][1] == 1 && dataList[2][0] == 1) {
        win = 1;
    }
    if(dataList[0][2] == 2 && dataList[1][1] == 2 && dataList[2][0] == 2) {
        win = 2;
    }

    // 무승부
    let result = false;
    for(let i=0; i<size; i++) {
        for(let j=0; j<size; j++) {
            if(dataList[i][j] == 0) {
                result = true;
                break;
            }
        }
    }
    if(result == false) {
        win = 3;
    }

    console.log("win = " + win);

    drawFooter();
}

function removeEvent() {
    for(let i=0; i<size; i++) {
        for(let j=0; j<size; j++) {
            $tdList[i][j].removeEventListener("click", clickEvent);
            $tdList[i][j].style.cursor = "auto";
        }
    }
}

function drawFooter() {
    let $footer = document.querySelector("#footer");
    let $msg = document.createElement("h6");
    if(win == 1 || win == 2 || win == 3) {
        if(win == 1) {
            $msg.innerHTML = "Player <span class='winner'>O</span> 승리!";
        }
        if(win == 2) {
            $msg.innerHTML = "Player <span class='winner'>X</span> 승리!";
        }
        if(win == 3) {
            $msg.innerHTML = "Player <span class='winner'>무승부</span>";
        }
        $footer.append($msg);

        // 클릭 막기
        removeEvent();

        // replay 버튼 그리기
        let $replayBtn = document.createElement("button");
        $replayBtn.id = "replay";
        $replayBtn.innerText = "재시작";
        $replayBtn.addEventListener("click", replay);

        $footer.append($replayBtn);
    }
}

function replay() {
    location.href = "index.html";
}


//----------------------------------------

init();
JavaScript
복사

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- css파일 import -->
    <link rel="stylesheet" href="style.css">

</head>
<body>
    
    <!-- js 파일 import -->

    <div id="header">
        <h3>Tic Tac Toe Game</h3>
    </div>

    <div id="center"></div>
    
    <div id="footer"></div>
    
    <script src="tictactoe.js"></script>
    
</body>
</html>
JavaScript
복사