라라리라
2023.09.19 / Step 6 [DOM_틱택토2단계] - 코딩 55 일차 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>틱택토 연습 2</title>
</head>
<body onload="init()">
<style>
table, td, tr{
border-collapse: collapse;
margin: 0 auto;
}
td {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid black;
cursor: pointer;
}
</style>
<h4 align="center">틱택토 게임
<script>
let $body = document.body;
let $table = document.createElement(`table`);
let $tr = document.createElement(`tr`);
let $td = document.createElement(`td`);
let $List = [];
let dataList = [];
let win = 0;
let turn = false;
function init(){
for(let i = 0; i < 3; i++){
let temp = [0, 0, 0];
dataList.push(temp);
}
$table = document.createElement(`table`);
for(let i = 0; i < 3; i++){
let $temp = [];
$tr = document.createElement(`tr`);
for(let j = 0; j < 3; j++){
$td = document.createElement(`td`);
$td.addEventListener(`click`, c_event)
$tr.append($td);
$temp.push($td);
}
$table.append($tr);
$List.push($temp);
}
$body.append($table);
}
function c_event(){
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
if($List[i][j] == this){
if(this.innerText == ``){
if(turn == false){
this.innerText = `O`
dataList[i][j] = 1;
turn = !turn;
} else {
this.innerText = `X`
dataList[i][j] = 2;
turn = !turn;
}
}
}
}
}
console.log(dataList)
winCheck();
}
function winCheck(){
//가로
for(let i = 0; i < 3; i++){
if(dataList[i][0] == 1
&& dataList[i][1] == 1
&& dataList[i][2] == 1) win = 1;
}
for(let i = 0; i < 3; i++){
if(dataList[i][0] == 2
&& dataList[i][1] == 2
&& dataList[i][2] == 2) win = 2;
}
//세로
for(let i = 0; i < 3; i++){
if(dataList[0][i] == 1
&& dataList[1][i] == 1
&& dataList[2][i] == 1) win = 1;
}
for(let i = 0; i < 3; i++){
if(dataList[0][i] == 2
&& dataList[1][i] == 2
&& dataList[2][i] == 2) win = 2;
}
//대각선
if(dataList[0][0] == 1
&& dataList[1][1] == 1
&& dataList[2][2] == 1) win = 1;
if(dataList[0][0] == 2
&& dataList[1][1] == 2
&& dataList[2][2] == 2) win = 2;
if(dataList[2][0] == 1
&& dataList[1][1] == 1
&& dataList[0][2] == 1) win = 1;
if(dataList[2][0] == 2
&& dataList[1][1] == 2
&& dataList[0][2] == 2) win = 2;
let result = false;
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
if(dataList[i][j] == 0){
result = true;
break;
}
}
}
if(result == false){
if(win == 0) win = 3;
}
if(win != 0){
fn_remove();
}
}
function fn_remove(){
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
$List[i][j].removeEventListener(`click`, c_event);
$List[i][j].style.cursor = `auto`
}
}
let $h6 = document.createElement(`h6`);
$h6.innerText = `Player`
$h6.style.textAlign = `center`
if(win == 1){
let $span = document.createElement(`span`);
$span.innerText = ` O `
$span.style.color = `red`;
let $span2 = document.createElement(`span`);
$span2.innerText = `승리`
$h6.append($span, $span2)
} else if(win == 2){
let $span = document.createElement(`span`);
$span.innerText = ` X `
$span.style.color = `red`;
let $span2 = document.createElement(`span`);
$span2.innerText = `승리`
$h6.append($span, $span2)
} else if(win == 3){
let $span2 = document.createElement(`span`);
$span2.innerText = `무승부`
$span2.style.color = `red`;
$h6.append($span2)
}
$body.append($h6);
let $div = document.createElement(`div`)
$div.style.textAlign = `center`
let $btn = document.createElement(`button`)
$btn.innerText = `재시작`
$btn.style.textAlign = `center`
$btn.addEventListener(`click`, (a)=>{
document.querySelector(`table`).remove();
document.querySelector(`h6`).remove();
document.querySelector(`button`).remove();
let del_div = document.querySelectorAll(`div`);
for(let i = 0; i < del_div.length; i++){
del_div[i].remove();
}
$List = [];
dataList = [];
win = 0;
turn = false;
init();
});
$div.append($btn);
$body.append($div);
}
</script>
</body>
</html>
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.21 / Step 6 [DOM_스피드게임2단계] - 코딩 57 일차 (0) | 2023.09.21 |
|---|---|
| 2023.09.20 / Step 6 [DOM_스피드게임1단계] - 코딩 56 일차 (0) | 2023.09.20 |
| 2023.09.18 / Step 6 [DOM_틱택토] - 코딩 54 일차 (0) | 2023.09.18 |
| 2023.09.15 / Step 6 [DOM_이벤트응용] - 코딩 53 일차 (0) | 2023.09.15 |
| 2023.09.14 / Step 6 [DOM_이벤트응용] - 코딩 52 일차 (0) | 2023.09.14 |