Minesweeper

In object-oriented programming (OOP), maximizing API use streamlines development, leading to simpler and more concise code. This clarity not only improves readability but also eases debugging. Leveraging an API effectively in OOP thus ensures a blend of simplicity, efficiency and maintainability in software development.

This demo (partially) implements the minesweeper video game using the Quadrille API to instantiate and handle two quadrilles: a board and a mask. The former embodies the game board, while the latter covers it. As gameplay progresses, clicking on board cells uncovers them by clearing either individual or connected cells from the mask. Internally, a binaryMask quadrille tracks covered cells and differentiates mines/mine counts from empty cells. The visible mask is derived from binaryMask by uniformly coloring covered cells.

(mouse click to play; press any key to init)

let board, binaryMask, mask;
let size = 20;
let n = size * 2;

function init() {
  // Create a new game board with n random mines
  board = createQuadrille(size, size, n, '💣');
  // Clone the board into the binaryMask
  binaryMask = board.clone();
  // Populate the binaryMask with mine counts
  visitQuadrille(board, (row, col) => {
    if (board.isEmpty(row, col)) {
      // The order variable stores the number of neighboring mines
      let order = board.ring(row, col).order;
      if (order > 0) {
        binaryMask.fill(row, col, order.toString());
      }
    }
  });
  // Clone the updated binaryMask back to the board
  board = binaryMask.clone();
  // Colorize binaryMask cells: red for mines/mine counts, green for empty cells
  binaryMask.replace(color('red')).fill(color('green'));
  // Clone binaryMask onto mask and color covered cells magenta
  mask = binaryMask.clone().replace(color('magenta'));
}

function setup() {
  Quadrille.cellLength = 400 / size;
  createCanvas(400, 400);
  init();
  // Disable right-click menu
  document.oncontextmenu = () => false;
}

function draw() {
  background('moccasin');
  // Draw the static board
  drawQuadrille(board);
  // Draw the mask layer
  drawQuadrille(mask, { outline: color('lime') });
}

function mouseClicked() {
  const row = board.mouseRow;
  const col = board.mouseCol;
  // Update the binaryMask
  if (board.isFilled(row, col)) {
    // Reveal the entire board if a mine is clicked
    if (board.read(row, col) === '💣') {
      // Clear the entire binaryMask
      binaryMask.clear();
    } else {
      // Clear a single filled cell
      binaryMask.clear(row, col);
    }
  } else {
    // Clear multiple connected cells using flood fill
    binaryMask.clear(row, col, true);
  }
  // Update the mask after binaryMask changes
  mask = binaryMask.clone().replace(color('magenta'));
}

function keyPressed() {
  // Restart the game
  init();
}

Init

The init function sets up the board and binaryMask quadrilles, assigning mine counts to empty cells with neighboring mines. The mask is then derived from binaryMask:

function init() {
  // Create a new game board filled with n random mines
  board = createQuadrille(size, size, n, '💣');
  // Clone the board into the binaryMask
  binaryMask = board.clone();
  // Populate the binaryMask with mine counts
  visitQuadrille(board, (row, col) => {
    if (board.isEmpty(row, col)) {
      // The order variable stores the number of neighboring mines
      let order = board.ring(row, col).order;
      if (order > 0) {
        binaryMask.fill(row, col, order.toString());
      }
    }
  });
  // Clone the updated binaryMask into the board
  board = binaryMask.clone();
  // Colorize binaryMask cells: red for mines/mine counts, green for empty cells
  binaryMask.replace(color('red')).fill(color('green'));
  // Clone binaryMask onto mask and color covered cells magenta
  mask = binaryMask.clone().replace(color('magenta'));
}

Toggle below to inspect the binaryMask (internal state) versus the board (game state):

(mouse click or press any key to toggle the binaryMask drawing)

Draw

The draw function renders the board and mask layers. The board is drawn first, followed by the dynamically updated mask:

function draw() {
  background('moccasin');
  // Draw the static game board
  drawQuadrille(board);
  // Draw the mask layer
  drawQuadrille(mask, { outline: color('lime') });
}

Interaction

Mouse clicks modify the binaryMask to uncover cells. The clear method employs three overloaded modes:

1. Clear all cells: clear() resets the entire mask, setting all cells to empty (null).
2. Single cell: clear(row, col) sets a specific cell to empty (null).
3. Connected cells: clear(row, col, border) clears connected cells using flood fill.

function mouseClicked() {
  const row = board.mouseRow;
  const col = board.mouseCol;
  // Update the binaryMask
  if (board.isFilled(row, col)) {
    // Reveal the entire board if a mine is clicked
    if (board.read(row, col) === '💣') {
      // Clear the entire binaryMask
      binaryMask.clear();
    } else {
      // Clear a single filled cell
      binaryMask.clear(row, col);
    }
  } else {
    // Clear multiple connected cells using flood fill
    binaryMask.clear(row, col, true);
  }
  // Update the mask after binaryMask changes
  mask = binaryMask.clone().replace(color('magenta'));
}

Further Exploration

1. Safe First Click: Recreate the board on the first click to ensure no mine is hit.
2. Add Difficulty Levels: Adjust grid size or mine density.
3. Implement Timer: Track and display completion time.
4. Flagging Mechanic: Right-click to flag mines.
5. Success Condition: Define game completion—e.g., all safe cells revealed and/or all mines correctly flagged.
6. Enhanced Graphics: Use sprites instead of text/colors.
7. Scoring System: Reward safe cell reveals and correct flags.
8. Visual Hints: Add an option to display the binaryMask or provide visual aids for gameplay learning and accessibility.

References

Quadrille API

• createQuadrille(width, height, order, value)
• drawQuadrille(quadrille, options)
• visitQuadrille(quadrille, function)
• clone()
• read(row, col)
• mouseRow
• mouseCol
• isFilled()
• ring(row, col)
• order
• replace(value)
• fill(value)
• clear()

p5 API

• createCanvas
• background
• mouseClicked
• keyPressed

Further Reading

1. Minesweeper
2. Coding train minesweeper tutorial: