gistlib - create a minesweeper game in javascript

Here are the steps for creating a basic version of the Minesweeper game in JavaScript:

Create a game board with a 2D array.


index.tsx
const board = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
];
82 chars
7 lines

Randomly place mines on the game board.


index.tsx
function placeMines(board, numMines) {
  const rows = board.length;
  const cols = board[0].length;
  
  let minesPlaced = 0;
  
  while (minesPlaced < numMines) {
    const row = Math.floor(Math.random() * rows);
    const col = Math.floor(Math.random() * cols);
    
    if (board[row][col] !== 'X') {
      board[row][col] = 'X';
      minesPlaced++;
    }
  }
}
366 chars
17 lines

Calculate adjacent mines for each cell on the game board.


index.tsx
function calculateAdjacentMines(board) {
  const rows = board.length;
  const cols = board[0].length;
  
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      if (board[row][col] === 'X') {
        continue;
      }
      
      let count = 0;
      
      if (row > 0 && col > 0 && board[row - 1][col - 1] === 'X') {
        count++;
      }
      
      if (row > 0 && board[row - 1][col] === 'X') {
        count++;
      }
      
      if (row > 0 && col < cols - 1 && board[row - 1][col + 1] === 'X') {
        count++;
      }
      
      if (col < cols - 1 && board[row][col + 1] === 'X') {
        count++;
      }
      
      if (row < rows - 1 && col < cols - 1 && board[row + 1][col + 1] === 'X') {
        count++;
      }
      
      if (row < rows - 1 && board[row + 1][col] === 'X') {
        count++;
      }
      
      if (row < rows - 1 && col > 0 && board[row + 1][col - 1] === 'X') {
        count++;
      }
      
      if (col > 0 && board[row][col - 1] === 'X') {
        count++;
      }
      
      board[row][col] = count;
    }
  }
}
1104 chars
49 lines

Build the game user interface.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Minesweeper</title>
</head>
<body>
  <table id="board"></table>
  
  <script src="minesweeper.js"></script>
</body>
</html>
188 chars
13 lines


index.tsx
const boardElement = document.getElementById('board');
const rows = board.length;
const cols = board[0].length;

for (let row = 0; row < rows; row++) {
  const tr = document.createElement('tr');
  
  for (let col = 0; col < cols; col++) {
    const td = document.createElement('td');
    td.dataset.row = row;
    td.dataset.col = col;
    
    td.addEventListener('click', handleCellClick);
    
    tr.appendChild(td);
  }
  
  boardElement.appendChild(tr);
}
462 chars
20 lines

Handle user click events and reveal cells.


index.tsx
function handleCellClick(event) {
  const row = event.target.dataset.row;
  const col = event.target.dataset.col;
  
  revealCell(row, col);
}

function revealCell(row, col) {
  const cell = board[row][col];
  const td = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
  
  if (cell === 'X') {
    // Game over, reveal all cells
    td.style.backgroundColor = '#f00';
    td.textContent = 'X';
    return;
  }
  
  if (cell === 0) {
    // Recursively reveal all adjacent cells
    td.style.backgroundColor = '#ddd';
    
    if (row > 0 && col > 0) {
      revealCell(row - 1, col - 1);
    }
    
    if (row > 0) {
      revealCell(row - 1, col);
    }
    
    if (row > 0 && col < cols - 1) {
      revealCell(row - 1, col + 1);
    }
    
    if (col < cols - 1) {
      revealCell(row, col + 1);
    }
    
    if (row < rows - 1 && col < cols - 1) {
      revealCell(row + 1, col + 1);
    }
    
    if (row < rows - 1) {
      revealCell(row + 1, col);
    }
    
    if (row < rows - 1 && col > 0) {
      revealCell(row + 1, col - 1);
    }
    
    if (col > 0) {
      revealCell(row, col - 1);
    }
  } else {
    // Show the number of adjacent mines
    td.style.backgroundColor = '#ddd';
    td.textContent = cell;
  }
}
1257 chars
60 lines

This is a basic implementation of the Minesweeper game in JavaScript. There are many ways to improve this implementation, such as adding a timer, marking cells as flagged, and adding different difficulty levels.

create a minesweeper game in javascript

similar javascript code snippets

related categories