틱택토 구현
Implement Tic Tac To
틱택토 구현 Key Point
2차원 배열을 프로그래밍으로 표현하는 것.
알고리즘을 코드로 구현하는 것.
2차원 배열이므로 중첩 반복문(2중 반복문)이 쓰인다는 것. - 중첩반복문은 줄이는 것이 좋다.
var 바디 = document.body;
var 테이블 =var 바디 = document.body;
var 테이블 = document.createElement('table');//테이블 원소 생성
var 줄들 = [];//배열이나 객체 같은 데이터를 표현할 때 많이 쓴다. 2차원배열 표를 프로그래밍의 데이터로 시뮬레이션해야한다. 표현할 수 있어야 한다.
var 칸들 = [];
var 턴 = 'X';
var 결과 = document.createElement('div');
var 비동기콜백 = function(이벤트) {
//칸을 클릭했을 떄 몇 칸인지를 아는 것이 핵심이다.
var 몇줄 = 줄들.indexOf(이벤트.target.parentNode);//0,1,2 중 몇번째 줄인지.
console.log('몇줄',몇줄);
var 몇칸 = 칸들[몇줄].indexOf(이벤트.target);
console.log('몇칸',몇칸);
//input의 값은 value, 태그 안 글자는 textContent. 혼동주의!
if(칸들[몇줄][몇칸].textContent !== '') {//칸이 이미 채워져있는가? 칸들[몇줄][몇칸]=>칸들이 2차원 배열 그 자체?!!
console.log('빈칸아닙니다.');
} else {
console.log('빈칸입니다.');
칸들[몇줄][몇칸].textContent = 턴;
//빈칸 채울 때 다 채워졌는지 검사하면서 채운다.빙고할 때 처럼~!
//세칸 다 채워졌나? 알고리즘의 중요성!노가다를 하느냐 알고리즘으로 쉽게 푸느냐.
var 다참 = false;
//가로줄 검사
if(
칸들[몇줄][0] === 턴 &&
칸들[몇줄][1] === 턴 &&
칸들[몇줄][2] === 턴 )
{다참 = true;}
//세로줄 검사
if(
칸들[0][몇칸] === 턴 &&
칸들[1][몇칸] === 턴 &&
칸들[2][몇칸] === 턴 )
{다참 = true;}
//대각선 검사. Math.abs는 양수 또는 음스의 절댓값을 구한다.
if( (몇줄-몇칸 === 0) || (Math.abs(몇줄 - 몇칸) === 2)) {//대각선 검사 필요한 경우는 (1,1) (2,2) (3,3) 같은 경우!
if(
칸들[0][0] === 턴 &&
칸들[1][1] === 턴 &&
칸들[2][2] === 턴
) {다참 = true;}
}
if(Math.abs(몇줄 - 몇칸) === 2) {//대각선 검사 필요한 경우는 (1,1) (2,2) (3,3) 같은 경우!
if(
칸들[0][2] === 턴 &&
칸들[1][1] === 턴 &&
칸들[2][0] === 턴
) {다참 = true;}
}
// 다찼으면
if(다참){
결과.textContent = 턴 + '님이 승리';
//초기화
턴 = 'X';//배열의 반복문 forEach
칸들.forEach(function(줄){//각각의 줄과 그 줄의 칸.
줄.foreach(function(칸){
칸.textContent = '';
});
});
} {//다 안찼으면
//상대에게 차례를 넘겨준다.
if(턴 === 'X') {
턴 = 'O';
} else {
턴 = 'X';
}
}
}
};
for(var i = 1; i <= 3 ; i++) {
var 줄 = document.createElement('tr');//i는 1부터 3까지 html 줄 생성
줄들.push(줄);//생성한 줄을 '줄들'배열에 추가.
칸들.push([]);//배열단위로 데이터를 푸시한다.
for(var j = 1; j <= 3; j++) {
var 칸 = document.createElement('td');
칸들[i-1].push(칸);//한 줄당 3칸씩 추가.
//칸을 눌렀을 때 동작 구현
칸.addEventListener('click',비동기콜백);
줄.appendChild(칸);
}
테이블.appendChild(줄);
}
바디.appendChild(테이블);
console.group('줄들',줄들,'칸들',칸들);
document.createElement('table');//테이블 원소 생성
var 줄들 = [];
var 칸들 = [];
var 턴 = 'X';
var 비동기콜백 = function(이벤트) {
//칸을 클릭했을 떄 몇 칸인지를 아는 것이 핵심이다.
var 몇줄 = 줄들.indexOf(이벤트.target.parentNode);//0,1,2 중 몇번째 줄인지.
console.log('몇줄',몇줄);
var 몇칸 = 칸들[몇줄].indexOf(이벤트.target);
console.log('몇칸',몇칸);
//input의 값은 value, 태그 안 글자는 textContent. 혼동주의!
if(칸들[몇줄][몇칸].textContent !== '') {//칸이 이미 채워져있는가? 칸들[몇줄][몇칸]=>칸들이 2차원 배열 그 자체?!!
console.log('빈칸아닙니다.');
} else {
console.log('빈칸입니다.');
칸들[몇줄][몇칸].textContent = 턴;
//빈칸 채울 때 다 채워졌는지 검사하면서 채운다.빙고할 때 처럼~!
//세칸 다 채워졌나? 알고리즘의 중요성!노가다를 하느냐 알고리즘으로 쉽게 푸느냐.
var 다참 = false;
//가로줄 검사
if(
칸들[몇줄][0] === 턴 &&
칸들[몇줄][1] === 턴 &&
칸들[몇줄][2] === 턴 )
{다참 = true;}
//세로줄 검사
if(
칸들[0][몇칸] === 턴 &&
칸들[1][몇칸] === 턴 &&
칸들[2][몇칸] === 턴 )
{다참 = true;}
//대각선 검사. Math.abs는 양수 또는 음스의 절댓값을 구한다.
if( (몇줄-몇칸 === 0) || (Math.abs(몇줄 - 몇칸) === 2)) {//대각선 검사 필요한 경우는 (1,1) (2,2) (3,3) 같은 경우!
if(
칸들[0][몇칸] === 턴 &&
칸들[1][몇칸] === 턴 &&
칸들[2][몇칸] === 턴
) {다참 = true;}
}
// 다찼으면
if(다참){
console.log(턴+'님이 승리');
} {//다 안찼으면
//상대에게 차례를 넘겨준다.
if(턴 === 'X') {
턴 = 'O';
} else {
턴 = 'X';
}
}
}
};
for(var i = 1; i <= 3 ; i++) {
var 줄 = document.createElement('tr');//i는 1부터 3까지 html 줄 생성
줄들.push(줄);//생성한 줄을 '줄들'배열에 추가.
칸들.push([]);//배열단위로 데이터를 푸시한다.
for(var j = 1; j <= 3; j++) {
var 칸 = document.createElement('td');
칸들[i-1].push(칸);//한 줄당 3칸씩 추가.
//칸을 눌렀을 때 동작 구현
칸.addEventListener('click',비동기콜백);
줄.appendChild(칸);
}
테이블.appendChild(줄);
}
바디.appendChild(테이블);
console.group('줄들',줄들,'칸들',칸들);
Last updated