[Toy Project] 이번에는 웹 페이지 오목이다(2)🎲 [JavaScript로 오목 로직 구현하기]

- 이번에는 웹 페이지 오목이다(2)

1. 화점 찍어주기

바둑판에 화점이 없으니 너무 밋밋하여 위치 계산하여 찍어주었다.

for(var i = 0 ; i < 3 ; i++) {
    for(var j = 0 ; j < 3 ; j++) {
        let dot = document.createElement('div');
        dot.setAttribute('class', 'dot');
        let margin_top = 58 + (i * 120);
        let margin_left = 58 + (j * 120);
        dot.setAttribute('style', `margin-top: ${margin_top}px; margin-left: ${margin_left}px;`);
        board.appendChild(dot);
    }
}

---

이제는 화점도 찍힌 예쁜 바둑판

---

2. 오목 로직 구현하기

상하, 좌우, 왼쪽 대각, 오른쪽 대각. 총 네 방향을 다 고려해야 했다.
방향마다 로직을 다 짜놓고 공통 부분은 하나하나 지워나갔다.

function checkWin(row, col, turn) {
    const directions = [
        [-1,  0], [1,  0], // 상하
        [0,  -1], [0,  1], // 좌우
        [-1, -1], [1,  1], // 좌상우하 대각선
        [-1,  1], [1, -1]  // 우상좌하 대각선
    ];

    for (const [dx, dy] of directions) {
        let cnt = 1;
        // 특정 방향으로 진행하면서 연속된 돌 개수 세기
        for (let i = 1; i < 5; i++) {
            const newRow = row + dx * i;
            const newCol = col + dy * i;

            if (newRow < 0 || newRow > 16 || newCol < 0 || newCol > 16 || game[newRow][newCol] !== turn) {
                break;
            }
            cnt++;
        }
        // 반대 방향으로 진행하면서 연속된 돌 개수 세기
        for (let i = 1; i < 5; i++) {
            const newRow = row - dx * i;
            const newCol = col - dy * i;

            if (newRow < 0 || newRow > 16 || newCol < 0 || newCol > 16 || game[newRow][newCol] !== turn) {
                break;
            }
            cnt++;
        }

        // 5개 이상일 경우 승리
        if (cnt >= 5) {
            return true;
        }
    }
    return false;
}

 

checkWin 함수를 기존 돌을 놓는 이벤트에 추가하여 오목 로직 적용 완료.

let game = new Array(17);
for(let i = 0 ; i < game.length ; i++) {
    game[i] = new Array(17);
}

let turn = 'B';

let tds = document.querySelectorAll('#go td');
tds.forEach((item) => {
    item.addEventListener('click', () => {
        // 위치 체크
        let row = Number(item.id.substring(0, item.id.indexOf('-')));
        let col = Number(item.id.substring(item.id.indexOf('-') + 1));
        
        // 돌 놓기
        if(game[row][col] === undefined) {
            game[row][col] = turn;
            let myTurn = turn === 'B';
            if(myTurn) {
                item.classList.add('black');
            } else {
                item.classList.add('white');
            }

            // 승리 체크
            if (checkWin(row, col, turn)) {
                let winner = myTurn ? '흑돌' : '백돌';
                setTimeout(function() {
                    alert(winner + ' 승!');
                    location.reload();
                }, 100);
            }
            
            turn = myTurn ? 'W' : 'B';
        }
    })
})

---

다섯개의 돌이 이어진다면 오목이라네~

---

3. 파비콘 및 메타태그 넣어주기

완성은 다 하였고, 배포 시에 좀 더 예쁘게 보이기 위해 파비콘과 메타태그를 추가하였다.
(이번 배포도 역시나 github로~)

<meta property="og:image" content="./images/omok.png">
<meta property="og:description" content="나무가 다섯그루면 오목">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오목</title>
<link rel="icon" type="image/png" sizes="16x16" href="./images/omok_favicon.png">

---

오목

---

- 소스코드

GitHub - algo-gaja/toy-project: 간단하게 만들어보는 Toy Project🧩

 

---

 

테스트를 해준 현철브로의 선물..(?)

---