[바닐라코딩]Prep Course 11일차

11일차에는 3X3 미니 오목게임을 만들면서 HTML, CSS, DOM를 공부했습니다.

MARKUP(마크업) 작업 -HTML,CSS

1. 3X3 게임판을 어떻게 만들 것인가?

1. 먼저 <div class="row"></div> 를 세 개 만들고 그 안에 각각 <div class="col"></div> 를 세 개씩 만들어 총 9개의 div 태그를 작성합니다.

2. <style> 태그 안에 .col{ border: 1px solid #2574D0;} 과 width:100px;,height: 100px; 를 넣어서 칸마다 공간과 경계를 만들어 줍니다.

3. 다음에는 .row{display:flex;} 작성해서 3X3 게임판을 만듭니다.

4. .h1{text-align: center;} 로 ‘바목’ 글자를 가운데로 배치합니다.

5. .game-board{width:306px; margin: 0 auto;} 를 작성해서 가운데 배치합니다.

2. 게임판 안에 글자을 넣어봅니다.

1. <div class="col"></div> 태그 안에 테스트를 위해서 <span>0</span>를 입력해 봅니다.
2. 그리고 중앙 정렬을 위해서 스타일 태그에 .col{ text-align: center; line-height: 85px; font-size: 100px;} 를 추가합니다.

3. 모달(게임종료 후에 나타나는)을 만들어 봅니다.

1. <div class="modal"><p>Game Over!</p></div>를 body 태그 안에 마크업 작성을 해줍니다.
2. 스타일 태그에 .modal{width:306px; heigth:306px; background-color:tomato; position: absolute; top:50%; left:50%; margin; -153px 0 0 -153px; border-radius: 50%;} 를 넣어 줍니다.
3. 높이와 너비 값은 바목 게임판 크기와 동일하게 해주었습니다. 배경색은 토마토 색으로 지정했습니다. position: absolute; 로 띄워서 게임판 위에 보이도록 했고 top:50%; left:50%; 로 중앙정렬을 했습니다. 하지만 시작점이 정중앙이기 때문에 모달 크기의 반(306/2 = 153)만큼 margin 을 이용해서 조정했습니다. border-radius:50%; 를 이용해서 네모가 아니라 원 형태의 모달을 완성했습니다.

4. 게임판을 클릭했을 때 O, X가 나오도록 해봅니다.

1. $col= document.querySelectorAll('.col'); 로 클래스 이름이 “.col”인 태그를 모두 담습니다.
2. forEach을 통해서 클릭 이벤트를 생성해서 클릭했을 때 O와 X가 입력되도록 합니다.
3. playerTurn 변수를 만들어 O와 X가 번갈아 가면서 입력되도록 합니다. (true와 false 값을 변경해주면 true 일때는 O를 false 일때는 X를 입력하도록 했습니다.)

*textContent vs textContent 를 비교해서 공부해보기

5. 승리했을 때 alert 창 띄우기

1. 승리 조건을 정리합니다. [0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6] 이렇게 세 칸을 차지했을 때 승리조건이 됩니다.
2. 승리조건을 2차 배열로 만들어 WinningCombinations변수를 만들어 할당합니다.
3. status 변수를 만들어 forEach 문 안에서 O나 X가 들어가 있는 index를 할당합니다. (O의 게임 턴이라면 O가 입력되어 있는 칸의 인덱스를 넣어줍니다. 인덱스는 왼쪽 위부터 오른쪽 아래 순서로 1,2,3….9 순으로 할당합니다.)
4. calculateWinner 함수를 만들어서 status 안에 있는 인덱스와 승리조건의 인덱스를 비교합니다. 만약에 비교해서 같은 것이 있다면 O나 X를 return 하고 없다면 null를 리턴합니다.
5. forEach 문안에 if문을 만들어 리턴값이 null이 아닐 때 alert 창을 띄웁니다.

alert 창은 캡쳐가 안 되었습니다. ㅠㅠ

6. 승리했을 때 모달 애니메이션 실행합니다.

1. $modal 변수를 만들어서 클래스 이름이 .modal 태그 요소를 할당합니다.
2. 승리조건이 충족되었을 때 실행되는 forEach 문 안에 있는 if문 안에 $modal.classList.add('show'); 를 작성합니다. (스타일 태그 안에 .show{display:block;} 또한 작성합니다.)
3. opacity 와 top 변수를 만들어 각각 0과 80으로 초기화합니다.
4. setInterval 안에 animate 함수를 만들어 1초마다 변화를 주도록 합니다. (불투명도는 0.01씩 올려주고 위치는 0.03씩 위로 올라갑니다.)
5. 종료 조건으로 opacity >= 1 && top <= 50 를 설정해서 setInterval 를 clear 시킵니다.

정리

html 마크업 작업부터 css를 스타일 적용 그리고 DOM를 활용해서 동적인 작업까지 짧은 시간 동안 해보았습니다. 오늘 수업에서 강조하신 것은 “css를 못하면 아무것도 할 수 없다. 동적인 애니메이션이나 구현하고자 하는 기능을 하기 위해서는 알고리즘 작업이 필요하다.” 였습니다. + 15X15 오목 게임을 만들기를 시도해보고 싶은 마음이 생겼습니다. 승리조건은 완전탐색을 통해서 시도해보면 좋을 것 같습니다.