[JavaScript]틱택토 게임 만들기 target/indexOf/forEach

See the Pen 틱택토 by hyesse (@hyesse) on CodePen.

 

::테이블 짜기

<table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

가로 세 줄 안에 칸 세 개가 들어있는 테이블을 짰다.

이렇게 짜면 간편하지만 자바스크립트 공부를 위해서 직접 자바스크립트에서 html을 생성해보았다.

var 바디=document.body;
var 테이블=document.createElement('table');
var 줄들=[];
var 칸들=[];


for(var i=1;i<=3;i++){                         // 줄 생성을 위한 for문
    var 줄=document.createElement('tr');        // 줄이라는 변수에 tr이 들어가게 설정, 3번 반복(3줄)
    줄들.push(줄);				// 줄들이라는 배열에 세 줄을 넣음
    칸들.push([]);				// 마찬가지로 칸들이라는 배열에 배열 생성
    for(var j=1;j<=3;j++){			// 칸 생성을 위한 for문
        var 칸=document.createElement('td');    // 칸이라는 변수에 td가 들어가게 설정, 3번 반복(3칸)
        칸.addEventListener('click', 비동기콜백);	 // 칸을 클릭했을 때 발생할 함수
        칸들[i-1].push(칸);
        줄.appendChild(칸);
    }
    테이블.appendChild(줄);
}

바디.append(테이블);

 

 

 

::target

클릭한 칸의 위치를 알기 위해 target을 배웠음. target은 클릭한 그 부분을 알게 해줌.

e.target은 칸을, e.target.parentNode는 칸의 상위요소인 줄의 위치를 알게 해준다.

이때, 좌표값으로 표현하기 위하여 indexOf를 사용하였다.

 

 

::Array.indexOf

array.indexOf(value, start)

value에는 검색할 값을, start에는 시작할 위치를 넣는다.

 

var 몇줄=줄들.indexOf(e.target.parentNode);
var 몇칸=칸들[몇줄].indexOf(e.target);
console.log(몇줄,몇칸);

클릭한 칸의 좌표값이 필요하기 때문에 우선 줄의 인덱스 값을 찾고, 그 다음 칸들의 인덱스 값을 찾는다.

콘솔 돌려보면 [1,0] [2,2] 같이 표시되는 것을 확인할 수 있다.

 

 

::addEventListener('click', 함수명)

addEventListener를 사용할 때 함수를 바깥에서 정의했다면 안에 소괄호를 적지 않는다.

함수명() 이라고 넣으니까 에러났음..