-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 이차원 배열 이해 및 클릭이벤트 설정컴퓨터 알아가기/JavaScript 2022. 8. 15. 19:30728x90반응형
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다.
이제 본격적으로 틱택토 게임을 만들어가고자 합니다. 먼저 기본적 HTML / CSS 만들고 그에 필요한 내용들을 JS내에 만들어갑니다.
1. 기본 HTML / CSS
이번 HTML에는 필요한 최소 프레임만 만들고 CSS에서는 테이블에 들어갈 속성만 지정해 주고 나머지는 JS에서 다루도록 합니다.
<body> 태그만 있는 기본 HTML 
테이블 속성 CSS 2. 이차원 배열 이해
① 3 by 3 테이블
3 by 3 테이블 모양을 다음과 같이 나타내고자 합니다.
기본적으로 HTML에서는 다음과 같이 나타낼 수 있습니다.
이렇게 만들고 각 태그에 id나 class를 지정해 주어 JS에서 코딩을 할 수 있었지만 이번에는 전부 JS에서 만들어 사용하는 방법을 공부하도록 하겠습니다.
각 칸에 숫자나 문자 등을 지정하기 위해서 테이블을 그리는데 순서는 줄 기준(row 기준: tr태그 사용)이며 그후 열 (td 태그)을 만들어줘야 합니다.
이차원 배열 (배열안에 배열) 방식으로 진행하며 반복문으로 테이블의 갯수를 만들어 줍니다.
테이블 태그를 만들기 위하여 document 객체를 사용하여 createElement( ) 메소드로 필요한 태그를 만들어 줌으로 활성화가 되고 최종 태그를 삽입하는 append( ) 메소드를 활용합니다.
이렇게 함으로써 브라우저상 3 by 3 테이블이 완성이 되었습니다.
향후 이 코딩에서 배열을 생각해야 하는 이유가 순서를 고려하여 해당되는 순서 결과에 따라 승패를 따질수 있기때문에 각 테이블 칸마다 배열로 만들어야 인덱스와 값으로 응용할 수 있기 때문입니다.
결국 다음과 같이 배열안에 배열이 들어가는 형태이며 이를 이차원배열이라고 부릅니다.
이 구조만 잘 이해한다면 이차원 배열에 대한 문제는 어렵지 않을겁니다. 각 인덱스별로 나타내면 row가 먼저고 column이 두번째이기 때문에 다음과 같이 나타낼 수 있겠죠.
② 순서 턴 설정
순서를 정해야 합니다. 순서란 먼저 시작하는 사람이 'O'인지 'X'인지를 정하는 것이며 이에 대한 변수도 설정해 줄 필요가 있습니다. let turn = 'O';
저는 먼저 'O'로 순서를 정하고 다음 사람이 클릭하면 'X'로 바뀌는 것으로 정하겠습니다. 클릭(이벤트)가 이루어지기 전에 변수 선언이 필요하겠죠.
3. 클릭이벤트 실행
클릭이벤트는 최종적으로 <td> 태그에서 이루어지기 때문에 addEventListener를 <td>태그에 걸어줍니다.
먼저 칸이 비어있는지 확인해야 합니다. 칸이 차 있다는 것은 승부가 났다는 증거이기 때문에 먼저 확인할 필요성이 있습니다.
이러한 경우는 if문을 사용하여 클릭이벤트가 작용되어지고 있는 event.target.textContent가 있으면(true) 프로그램에서 나오는 return값을 지정하면 됩니다.
순서에 따라 마크를 쓰기위해서는 event.target.textContent를 turn으로 활성화를 시켜주고 이벤트 함수가 'O'면 'X'를 'X'면 순서를 'O'로 바꾸어줘야 합니다.
console.log('clicked')라는 메시지를 통하여 9개 칸인 <td> 태그 전부 클릭이벤트가 발생하는지 확인할 수 있습니다.
이제 브라우저상 나와있는 9개의 칸에 'O' 또는 'X'를 표시 할 수가 있습니다.
반응형'컴퓨터 알아가기 > JavaScript' 카테고리의 다른 글
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 이차원 배열을 테이블에 적용 (0) 2022.08.17 JavaScript 입문 : 틱택토(TicTacToe) 게임 - 구조분해할당 적용 (0) 2022.08.16 JavaScript 입문 : 틱택토(TicTacToe) 게임 - 순서도 (0) 2022.08.14 JavaScript 입문 : 이벤트 버블링 (Event Bubbling) 이해 (0) 2022.08.13 JavaScript 입문 : 구조분해할당 (Destructuring Assignment) - 객체 (0) 2022.08.12