1. HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>지뢰찾기 게임</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>지뢰찾기 게임</h1>
<div id="game"></div>
<script src="script.js"></script>
</body>
</html>
2. CSS(styles.css)
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
}
#game {
display: grid;
grid-template-columns: repeat(10, 30px);
grid-template-rows: repeat(10, 30px);
gap: 2px;
}
.cell {
width: 30px;
height: 30px;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
cursor: pointer;
}
.cell.revealed {
background-color: #bbb;
cursor: default;
}
.cell.mine {
background-color: red;
}
3. JavaScript (script.js)
const rows = 10;
const cols = 10;
const minesCount = 20;
const game = document.getElementById('game');
let board = [];
let revealedCount = 0;
function createBoard() {
board = Array(rows).fill().map(() => Array(cols).fill({
mine: false,
revealed: false,
adjacentMines: 0
}));
placeMines();
calculateAdjacentMines();
renderBoard();
}
function placeMines() {
let placedMines = 0;
while (placedMines < minesCount) {
const row = Math.floor(Math.random() * rows);
const col = Math.floor(Math.random() * cols);
if (!board[row][col].mine) {
board[row][col].mine = true;
placedMines++;
}
}
}
function calculateAdjacentMines() {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (board[row][col].mine) continue;
let adjacentMines = 0;
for (let r = -1; r <= 1; r++) {
for (let c = -1; c <= 1; c++) {
if (r === 0 && c === 0) continue;
const newRow = row + r;
const newCol = col + c;
if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols && board[newRow][newCol].mine) {
adjacentMines++;
}
}
}
board[row][col].adjacentMines = adjacentMines;
}
}
}
function renderBoard() {
game.innerHTML = '';
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener('click', handleCellClick);
game.appendChild(cell);
}
}
}
function handleCellClick(event) {
const row = event.target.dataset.row;
const col = event.target.dataset.col;
revealCell(parseInt(row), parseInt(col));
}
function revealCell(row, col) {
const cell = board[row][col];
if (cell.revealed) return;
cell.revealed = true;
revealedCount++;
const cellElement = game.children[row * cols + col];
cellElement.classList.add('revealed');
if (cell.mine) {
cellElement.classList.add('mine');
cellElement.innerHTML = '💣';
alert('Game Over!');
resetGame();
} else {
if (cell.adjacentMines > 0) {
cellElement.innerHTML = cell.adjacentMines;
} else {
for (let r = -1; r <= 1; r++) {
for (let c = -1; c <= 1; c++) {
const newRow = row + r;
const newCol = col + c;
if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols) {
revealCell(newRow, newCol);
}
}
}
}
}
if (revealedCount === rows * cols - minesCount) {
alert('Congratulations! You won!');
resetGame();
}
}
function resetGame() {
revealedCount = 0;
createBoard();
}
createBoard();
각각 파일 저장하고 구현하시면 됩니다.
물론 전 프로그래밍 개똥도 모릅니다. 우리들의 위대한 AI가 짜준 것이지요 ㅋㅋㅋ 그냥 공유해봅니다. 이거 어떻게 해야 만들 수 있는지 아시는분 댓글 부탁드려요.
728x90
'일상다반사 > 지식in명수' 카테고리의 다른 글
| 더캠프 PC버전 사용방법 총정리, 다양한 기능들 (0) | 2024.06.17 |
|---|---|
| 우산 버리는 방법 정리, 일반종량제 아닙니다. (0) | 2024.06.17 |
| PDF JPG로 변환 하는 방법, 설치 필요X 너무 쉽습니다. (0) | 2024.06.17 |
| PDF파일을 한글파일로 변환하는 방법 3가지 정리(설치필요X) (0) | 2024.06.17 |
| 백중사리 뜻과 한국의 문화, 이번 여름은 태풍 지옥이 (1) | 2024.06.16 |
| 클로르피리포스 부작용 살충제 효과, 러브버그에 써도 될까? (0) | 2024.06.16 |
| 린넨 세탁 방법 총 정리, 린넨 옷 이거 관리 잘못하면 ㄷㄷ (1) | 2024.06.16 |
| 인형 세탁하는 방법 총 정리, 손세탁이냐 세탁기냐!? (1) | 2024.06.16 |
