블로그에 넣을 수 있는 지뢰찾기 게임 코딩 (HTML, CSS, JavaScript 기반)

날짜:

블로그에 추가할 수 있는 간단한 지뢰찾기 게임을 HTML, CSS, JavaScript를 사용하여 구현하는 방법을 알려드리겠습니다. 이 코드는 웹 브라우저에서 직접 실행할 수 있으며, 게임 보드를 생성하고 클릭 이벤트를 통해 게임을 진행합니다.

HTML (지뢰찾기 게임 구조)

html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지뢰찾기 게임</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>지뢰찾기 게임</h1>
<div id="game"></div>
<script src="script.js"></script>
</body>
</html>

CSS (스타일링)

css
body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding-top: 20px;
}

#game {
  display: grid;
  grid-template-columns: repeat(10, 40px);  /* 10x10 게임 보드 설정 */
  gap: 1px;
}

.cell {
  width: 40px;
  height: 40px;
  background-color: #8acaca;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  cursor: pointer;
}

.cell.mine {
  background-color: red;
}

JavaScript (게임 로직)

javascript
document.addEventListener('DOMContentLoaded', startGame);

function startGame() {
  const grid = document.getElementById('game');
  const size = 10;  // 10x10 보드
  const mineCount = 20;  // 지뢰 20개
  let board = Array(size * size).fill('safe');

  // 지뢰 배치
  for (let i = 0; i < mineCount; i++) {
    let position = Math.floor(Math.random() * size * size);
    board[position] = 'mine';
  }

  // 셀 생성
  board.forEach((type, index) => {
    let cell = document.createElement('div');
    cell.className = 'cell';
    cell.addEventListener('click', () => revealCell(cell, type));
    grid.appendChild(cell);
  });
}

function revealCell(cell, type) {
  if (type === 'mine') {
    cell.classList.add('mine');
    cell.textContent = '💣';
    setTimeout(() => alert('게임 오버!'), 100);
  } else {
    cell.style.backgroundColor = 'gray';
    // 주변 지뢰 수 표시 추가 가능
  }
}

위 코드는 10x10 보드에 20개의 지뢰를 무작위로 배치하는 간단한 지뢰찾기 게임입니다. revealCell 함수는 셀을 클릭할 때 셀의 타입에 따라 다르게 반응하며, 지뢰를 클릭하면 게임이 종료됩니다. 게임 보드와 각 셀의 스타일은 CSS를 통해 조정할 수 있습니다.

HTML 파일을 블로그 페이지에 삽입하고, CSS와 JavaScript는 외부 파일로 링크하거나 각각 <style> 태그와 <script> 태그 내에 직접 삽입하여 사용할 수 있습니다. 이를 통해 블로그에 지뢰찾기 게임을 추가할 수 있습니다.

Location: 대한민국