틱택토 게임은 3X3 오목과 비슷하며 먼저 가로줄 또는 세로줄 또는 대각선을 일치시키면 승리하는 간단한 게임이다.
구글에 틱택토 게임 치면 나올것이다.
틱택토.js
var 바디 = document.body;
var 테이블 = document.createElement('table');
var 줄들 = []; //줄들 기억하기 위함 [[tr],[tr],[tr]]
var 칸들 = []; //칸들 기억하기 위함 [[td,td,td],[td,td,td],[td,td,td]]
var 턴 = 'X';
var 결과 = document.createElement('div');
//칸 클릭 이벤트
var 비동기콜백 = function(이벤트){
//해당 클릭 이벤트 위치 알려주기
console.log(이벤트.target); //칸
// 부모 위치 알려주기
console.log(이벤트.target.parentNode); //줄
// 부모의 부모
console.log(이벤트.target.parentNode.parentNode);//테이블
var 몇줄 = 줄들.indexOf(이벤트.target.parentNode);
console.log(몇줄);
var 몇칸 = 칸들[몇줄].indexOf(이벤트.target);
console.log(몇칸);
if(칸들[몇줄][몇칸].textContent !== ''){ //칸이 이미 채워져 있는가
}else{
칸들[몇줄][몇칸].textContent =턴;
//세칸 다 채워졌나??
var 다참 = false;
if(칸들[몇줄][0].textContent === 턴 &&
칸들[몇줄][1].textContent === 턴 &&
칸들[몇줄][2].textContent===턴){ //가로줄 검사
다참= true;
}
//세로줄
if(칸들[0][몇칸].textContent===턴 &&
칸들[1][몇칸].textContent===턴 &&
칸들[2][몇칸].textContent===턴 ){
다참= true;
}
//대각선 칸 줄 이 같을때 검사해야함
console.log("역 대각선: "+Math.abs(몇줄-몇칸));
if(몇줄 -몇칸 === 0 || Math.abs(몇줄-몇칸)===2){
console.log('대각선 통과');
//같은지 검사
if((칸들[0][0].textContent === 턴 &&
칸들[1][1].textContent === 턴 &&
칸들[2][2].textContent === 턴 ) || (칸들[0][2].textContent===턴 && 칸들[2][0].textContent ===턴 && 칸들[1][1].textContent ===턴)){
다참 =true;
}
}
//다 찼으면
if(다참){
결과.textContent = 턴 +'님이 승리';
바디.append(결과);
//초기화
턴 = 'X';
칸들.forEach(function(줄){
줄.forEach(function(칸){
칸.textContent='';
});
});
}else{ // 다 안찼으면
//턴을 넘김
if(턴 === 'X'){
턴 = 'O';
}else{
턴 = 'X';
}
}
}
};
//3x3 테이블 추가
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(칸);
줄.append(칸);
}
테이블.appendChild(줄);
}
바디.appendChild(테이블);
console.log(줄들,칸들);
practice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>틱택토</title>
<style>
td{
border:1px solid black;
width: 50px;
height: 50px;
text-align: center;
font-weight: bold;
font-size: 35px;
}
</style>
</head>
<body>
<script src="틱택토.js"></script>
</body>
</html>
결과 화면
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| 자바스크립트- 가위바위보 게임 (0) | 2019.07.26 |
|---|---|
| 자바스크립트- 로또 추첨기 (0) | 2019.07.23 |
| 자바스크립트- 구구단 게임 (0) | 2019.07.21 |
| D3.js 공부 9 - 막대차트 그리기(part1) (0) | 2019.04.16 |
| D3.js 공부 8 - 에니메이션 (0) | 2019.04.16 |
