<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>지뢰찾기</title>
<style>
table { border-collapse: collapse; }
td {
border: 1px solid #bbb;
text-align: center;
line-height: 20px;
width: 20px;
height: 20px;
background: #888;
}
td.opened { background: white; }
td.flag { background: red; }
td.question { background: orange; }
</style>
</head>
<body>
<form id="form">
<input placeholder="가로 줄" id="row" size="5" />
<input placeholder="세로 줄" id="cell" size="5" />
<input placeholder="지뢰" id="mine" size="5" />
<button>생성</button>
</form>
<div id="timer">0초</div>
<table id="table">
<tbody></tbody>
</table>
<div id="result"></div>
<script>
const $form = document.querySelector('#form');
const $timer = document.querySelector('#timer');
const $tbody = document.querySelector('#table tbody');
const $result = document.querySelector('#result');
let row; // 줄
let cell; // 칸
let mine;
const CODE = {
NORMAL: -1,
QUESTION: -2,
FLAG: -3,
QUESTION_MINE: -4,
FLAG_MINE: -5,
MINE: -6,
OPENED: 0,
};
let data;
let openCount = 0;
let startTime;
let interval;
function onSubmit(event) {
event.preventDefault();
row = parseInt(event.target.row.value);
cell = parseInt(event.target.cell.value);
mine = parseInt(event.target.mine.value);
openCount = 0;
clearInterval(interval);
$tbody.innerHTML = '';
drawTable();
startTime = new Date();
interval = setInterval(() => {
const time = Math.floor((new Date() - startTime) / 1000);
$timer.textContent = `${time}초`;
}, 1000);
}
$form.addEventListener('submit', onSubmit);
function plantMine() {
const candidate = Array(row * cell).fill().map((arr, i) => {
return i;
});
const shuffle = [];
while (candidate.length > row * cell - mine) {
const chosen = candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0];
shuffle.push(chosen);
}
const data = [];
for (let i = 0; i < row; i++) {
const rowData = [];
data.push(rowData);
for (let j = 0; j < cell; j++) {
rowData.push(CODE.NORMAL);
}
}
for (let k = 0; k < shuffle.length; k++) {
const ver = Math.floor(shuffle[k] / cell);
const hor = shuffle[k] % cell;
data[ver][hor] = CODE.MINE;
}
return data;
}
function onRightClick(event) {
event.preventDefault();
const target = event.target;
const rowIndex = target.parentNode.rowIndex;
const cellIndex = target.cellIndex;
const cellData = data[rowIndex][cellIndex];
if (cellData === CODE.MINE) { // 지뢰면
data[rowIndex][cellIndex] = CODE.QUESTION_MINE; // 물음표 지뢰로
target.className = 'question';
target.textContent = '?';
} else if (cellData === CODE.QUESTION_MINE) { // 물음표 지뢰면
data[rowIndex][cellIndex] = CODE.FLAG_MINE; // 깃발 지뢰로
target.className = 'flag';
target.textContent = '!';
} else if (cellData === CODE.FLAG_MINE) { // 깃발 지뢰면
data[rowIndex][cellIndex] = CODE.MINE; // 지뢰로
target.className = '';
target.textContent = '';
} else if (cellData === CODE.NORMAL) { // 닫힌 칸이면
data[rowIndex][cellIndex] = CODE.QUESTION; // 물음표로
target.className = 'question';
target.textContent = '?';
} else if (cellData === CODE.QUESTION) { // 물음표면
data[rowIndex][cellIndex] = CODE.FLAG; // 깃발으로
target.className = 'flag';
target.textContent = '!';
} else if (cellData === CODE.FLAG) { // 깃발이면
data[rowIndex][cellIndex] = CODE.NORMAL; // 닫힌 칸으로
target.className = '';
target.textContent = '';
}
}
// 1 2 3
// 4 5 6
// 7 8 9
function countMine(rowIndex, cellIndex) {
const mines = [CODE.MINE, CODE.QUESTION_MINE, CODE.FLAG_MINE];
let i = 0;
mines.includes(data[rowIndex - 1]?.[cellIndex - 1]) && i++;
mines.includes(data[rowIndex - 1]?.[cellIndex]) && i++;
mines.includes(data[rowIndex - 1]?.[cellIndex + 1]) && i++;
mines.includes(data[rowIndex][cellIndex - 1]) && i++;
mines.includes(data[rowIndex][cellIndex + 1]) && i++;
mines.includes(data[rowIndex + 1]?.[cellIndex - 1]) && i++;
mines.includes(data[rowIndex + 1]?.[cellIndex]) && i++;
mines.includes(data[rowIndex + 1]?.[cellIndex + 1]) && i++;
return i;
}
function open(rowIndex, cellIndex) {
if (data[rowIndex]?.[cellIndex] >= CODE.OPENED) return;
const target = $tbody.children[rowIndex]?.children[cellIndex];
if (!target) {
return;
}
const count = countMine(rowIndex, cellIndex);
target.textContent = count || '';
target.className = 'opened';
data[rowIndex][cellIndex] = count;
openCount++;
console.log(openCount);
if (openCount === row * cell - mine) {
const time = (new Date() - startTime) / 1000;
clearInterval(interval);
$tbody.removeEventListener('contextmenu', onRightClick);
$tbody.removeEventListener('click', onLeftClick);
setTimeout(() => {
alert(`승리했습니다! ${time}초가 걸렸습니다.`);
}, 500);
}
return count;
}
function openAround(rI, cI) {
setTimeout(() => {
const count = open(rI, cI);
if (count === 0) {
openAround(rI - 1, cI - 1);
openAround(rI - 1, cI);
openAround(rI - 1, cI + 1);
openAround(rI, cI - 1);
openAround(rI, cI + 1);
openAround(rI + 1, cI - 1);
openAround(rI + 1, cI);
openAround(rI + 1, cI + 1);
}
}, 0);
}
function onLeftClick(event) {
const target = event.target;
const rowIndex = target.parentNode.rowIndex;
const cellIndex = target.cellIndex;
const cellData = data[rowIndex][cellIndex];
if (cellData === CODE.NORMAL) {
openAround(rowIndex, cellIndex);
} else if (cellData === CODE.MINE) {
target.textContent = '펑';
target.className = 'opened';
clearInterval(interval);
$tbody.removeEventListener('contextmenu', onRightClick);
$tbody.removeEventListener('click', onLeftClick);
}
}
function drawTable() {
data = plantMine();
data.forEach((row) => {
const $tr = document.createElement('tr');
row.forEach((cell) => {
const $td = document.createElement('td');
if (cell === CODE.MINE) {
// $td.textContent = 'X';
}
$tr.append($td);
});
$tbody.append($tr);
$tbody.addEventListener('contextmenu', onRightClick);
$tbody.addEventListener('click', onLeftClick);
});
}
</script>
</body>
</html>지뢰찾기 게임이다.
만들면서 당연하겠지만 더 복잡하고 난이도 있는 프로젝트에서는 함수와 함수끼리 심지어 비동기가 껴있으면 요리조리 이동하기 때문에 내가 작성하고 있는 함수가 어떤 역할을 하고 있는지 어떤 데이터를 참조하고 다루는지 확실하게 알아야 할 것 같다.
추가로 html을 만들면 반드시 js데이터도 똑같이 html화면에 맞게 맞춰줘야 한다고 느꼈다. 이 프로젝트에서도 이벤트 루프 문제가 나오는데, setTimeout,0초로 해주어 해결하였다. 실무에서도 자주 사용한다는 테크닉이라니까 이벤트 루프 문제 나올시 유용하게 사용해야겠다.
@banhogu