Amarans
JavaScript 로 틱택토 만들기. 본문
3목 이라고 생각하면 된다. 대각선을 포함한 모든 줄에 X나 O가 만들어진 사람이 승리.
밑에 사진은 구글에 틱택토 라고 검색시 나옴.
Html 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
td{
border: 2px solid black;
height: 50px;
width: 50px;
text-align: center;
font-weight: bold;
font-size: 40px;
}
</style>
</head>
<body>
<!-- <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> -->
<script src="틱택토.js"></script>
</body>
</html>틱택토.js
var 바디 = document.body;
var 테이블 = document.createElement('table');
var 줄들 = [];
var 칸들 = [];
var 턴 = "X";
var 결과 = document.createElement("div");
var 비동기콜백 = function(이벤트){
var 몇줄 = 줄들.indexOf(이벤트.target.parentNode);
console.log("몇줄",몇줄);
var 몇칸 = 칸들[몇줄].indexOf(이벤트.target);
console.log('몇칸',몇칸);
if(칸들[몇줄][몇칸].textContent != ''){
console.log("빈칸아닙니다.");
}else{
console.log("빈칸입니다.");
칸들[몇줄][몇칸].textContent = 턴;
// 세칸 다 채워졌나.
var 다참 = false;
//가로줄 검사
if(
칸들[몇줄][0].textContent === 턴 &&
칸들[몇줄][1].textContent === 턴 &&
칸들[몇줄][2].textContent === 턴
) {
다참 = true;
}
//세로줄 검사
if(
칸들[0][몇칸].textContent === 턴 &&
칸들[1][몇칸].textContent === 턴 &&
칸들[2][몇칸].textContent === 턴
) {
다참 = true;
}
// 대각선 검사
if(몇줄 - 몇칸 === 0) { // 대각선 검사 필요한 경우
if(
칸들[0][0].textContent === 턴&&
칸들[1][1].textContent === 턴&&
칸들[2][2].textContent === 턴
) {
다참 = true;
}
}
if(Math.abs(몇줄 - 몇칸) === 2) {
if(
칸들[0][2].textContent === 턴&&
칸들[1][1].textContent === 턴&&
칸들[2][0].textContent === 턴
) {
다참 = true;
}
}
// 다 찼으면
if(다참){
결과.textContent = 턴 + "님이 승리!";
// 초기화
턴 = "X";
칸들.forEach(function (줄){
줄.forEach(function (칸){
칸.textContent = "";
});
});
}else{
if(턴==="X"){
턴 = "O";
}else{
턴 = "X";
}
}
}
//세칸 다 채워졌나?
};
for (var i=1; i<= 3; i +=1){
var 줄 = document.createElement('tr');
줄들.push(줄);
칸들.push([]);
for(var j =1; j<= 3; j+=1){
var 칸 = document.createElement('td');
칸.addEventListener('click',비동기콜백);
칸들[i-1].push(칸);
줄.appendChild(칸);
}
테이블.appendChild(줄);
}
바디.append(테이블);
바디.append(결과);
console.log('줄들',줄들,'칸들',칸들);
Comments