알고리즘 테스트 ⏲/JavaScript
[JavaScript] 틱택토 프로그램 풀이
- -
틱택토 프로그램
컴퓨터와 대결하여 가장 먼저 3칸을 연달아 차지하는 플레이어가 승리하는 프로그램을 작성하시오.
개인 풀이
다이어그램
알고리즘
const $log = document.querySelector(".log");
// 빈 테이블 생성
const spaceArray = [];
for (let _ = 0; _ < 3; _++) {
spaceArray.push(Array(3));
}
const $items = document.querySelectorAll(".item");
let itemIndex = 0;
// DOM 데이터 매칭
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
spaceArray[i][j] = $items[itemIndex];
itemIndex += 1;
}
}
let com = "X";
let my = "O";
const $container = document.querySelector(".container");
const inspectItems = (who) => {
let cnt = 0;
// 행 검사
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (spaceArray[i][j].textContent === who) cnt++;
}
if (cnt === 3) return true;
else cnt = 0;
}
// 열 검사
cnt = 0;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (spaceArray[j][i].textContent === who) cnt++;
}
if (cnt === 3) return true;
else cnt = 0;
}
// 대각 검사
cnt = 0;
for (let i = 0; i < 3; i++) {
if (spaceArray[i][i].textContent === who) cnt++;
}
if (cnt === 3) return true;
if (
spaceArray[0][2].textContent === who &&
spaceArray[1][1].textContent === who &&
spaceArray[2][0].textContent === who
)
return true;
return false;
};
// 승/패가 나지 않은 상태에서 테이블이 꽉 찼는지 검사
const inspectAllItems = () => {
let cnt = 0;
for (let i = 0; i < 9; i++) {
if ($items[i].textContent) cnt++;
}
if (cnt === 9) return true;
else return false;
};
let flag = true;
const handleItemClick = (e) => {
if (e.target.textContent !== "" || flag === false) return;
e.target.textContent = my;
flag = false;
if (inspectItems(my)) {
$log.textContent = "나의 승리!";
return;
} else if (!inspectItems(my) && inspectAllItems()) {
$log.textContent = "무승부!";
return;
}
// 턴 변경
handleComputerTurn();
};
// 컴퓨터 동작 함수
const handleComputerTurn = () => {
const random = Math.floor(Math.random() * 9);
if ($items[random].textContent === "") {
setTimeout(() => {
$items[random].textContent = "X";
if (inspectItems(com)) {
$log.textContent = "컴퓨터의 승리!";
return;
}
flag = true;
}, Math.floor(Math.random() * 3 + 1.3) * 1000); // 최대 1.3~3.3초까지 생각
} else handleComputerTurn();
};
$items.forEach((item) => item.addEventListener("click", handleItemClick));<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-weight: 700;
font-size: 130px;
color: white;
}
.log {
font-size: 40px;
color: rgb(61, 61, 61);
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
}
.container div {
margin: 3px 3px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(61, 61, 61);
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<span class="log"></span>
<script src="index.js"></script>
</body>
</html>'알고리즘 테스트 ⏲ > JavaScript' 카테고리의 다른 글
| [JavaScript] 카드 맞추기 프로그램 구현 (0) | 2022.02.10 |
|---|---|
| [JavaScript] 미니 전투 게임 제작 (0) | 2022.02.08 |
| [JavaScript] 클릭속도 테스트 풀이 (0) | 2022.02.07 |
| [JavaScript] 가위바위보 대결 프로그램 풀이 (0) | 2022.02.05 |
| [JavaScript] 로또 추첨기 풀이 (0) | 2022.02.05 |
Contents
소중한 공감 감사합니다