Optionnal Chaining et Démineur

function generateMap(size = 12, difficulty = 0.1) {
  let grid = [];
  let bombs = 0; // Initialize a bomb count

  for (var y = 0; y < size; y++) {
    var row = [];
    for (var x = 0; x < size; x++) {
      // Here the magic happens: bomb or no bomb
      let val = Math.random() > (difficulty * size / 8) ? 0 : "💣";
      if (val === "💣") bombs += 1;
      row.push({
        value: val,
        active: false
      });
    }
    grid.push(row);
  }
  // A bit silly, but if there aren't enough bombs, just generate the map one more time.
  if(bombs < Math.round(3 / 4 * size)) return generateMap(size, difficulty);
  return grid;
}

export default generateMap;

Un Array pour chaque ligne dans un Array contenant toutes ces lignes et nous voilà avec un tableau à 2 dimensions.

Pour simplifier ma réflexion, j’ai décidé de faire l’algorithme en 2 parties distinctes. Dans cette suite, nous allons compter le nombre de bombes adjacentes à chacune des cellules de notre grille.

La logique du jeu

Une cellule contenant une bombe aura donc pour valeur “💣”. Une cellule ayant explosé “💥” et pour les autres, le nombre de bombes adjacentes.

Nous aurons besoin de cette fonction au démarrage de la partie afin de définir l’ensemble des valeurs que nous afficherons une fois une zone découverte. Nous nous en servirons aussi par la suite, après un click du joueur pour savoir si nous devons découvrir sa cellule ainsi que les potentielles cellules adjacentes sans bombe.

Voici l’ensemble de la fonction, nous verrons ensuite ses points d’intérêts :

function processMap (grid) {
  let hasChanges = false; // Keep track if the processing toggled a cell
  grid = grid.map((line, y) => {
    return line.map((cell, x) => {

      if (cell.active || cell.value === "💣" || cell.value === "💥") return cell; // No change needed

      const suroundings = getSuroundings(map, x, y);
      // Check if some empty and active cells exist
      if (suroundings.filter(sur => sur?.active && sur?.value <= 0).length >= 1) {
        hasChanges = true;
        return { ...cell, active: true };
      }
      // Else, return the cell with its suroundings count
      return {
        ...cell,
        value: suroundings.filter(sur => sur?.value === "💣" || sur?.value === "💥").length,
      };
    })
  }, []);

  if (hasChanges) return processMap(grid); // Propagate active cells
  return grid;
}

export default processMap;

function getSuroundings(map, x, y) {
  return [
    map[y - 1]?.[x], // top
    map[y - 1]?.[x - 1], // top-left
    map[y - 1]?.[x + 1], // top-right
    map[y]?.[x - 1], // left
    map[y]?.[x + 1], // right
    map[y + 1]?.[x], // bottom
    map[y + 1]?.[x - 1], // bottom-left
    map[y + 1]?.[x + 1] // bottom-right
  ];
}

// Check if some empty and active cells exist
if (suroundings.filter(sur => sur?.active && sur?.value === 0).length >= 1) {
  hasChanges = true;
  return { ...cell, active: true };
}

// Else, return the cell with its suroundings count
return {
  ...cell,
  value: suroundings.filter(sur => sur?.value === "💣" || sur?.value === "💥").length,
};

npm install --save-dev @babel/plugin-proposal-optional-chaining

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}