网格中的标记单元格（纯 JavaScript + p5.js 框架中的扫雷器）

Question

我一直在尝试制作一个在右键单击时标记单元格的功能。我已经有了右键单击和所有的东西。唯一的问题是所有显示的单元格在点击时都会被标记。如果您对 p5.js 有任何疑问，请访问参考资料 here。

我现在有这个：

sketch.js

var grid;
var cols;
var rows;
var w = 40;

var totalBoom = 10;

function make2DArray(cols, rows) {
  var arr = new Array(cols);
  for (var i = 0; i < arr.length; i++) {
    arr[i] = new Array(rows);
  }
  return arr;
}

function setup() {
  createCanvas(400, 400);
  cols = floor(width / w);
  rows = floor(height / w);
  grid = make2DArray(cols, rows);
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j] = new cell(i, j, w);
    }
  }

  var spots = [];
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      spots.push([i, j]);
    }
  }

  for (var n = 0; n < totalBoom; n++) {
    var index = floor(random(spots.length));
    var choice = spots[index];
    var i = choice[0];
    var j = choice[1];
    spots.splice(index, 1);
    grid[i][j].boom = true;
  }

  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j].adjacentCells();
    }
  }
}

function gameOver() {
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j].revealed = true;
    }
  }
}

function win() {
  if (boom.checked = true) {

  }
}

function mousePressed() {
  if (mouseButton == LEFT) {
    for (var i = 0; i < cols; i++) {
      for (var j = 0; j < rows; j++) {
        if (grid[i][j].hasBoom(mouseX, mouseY)) {
          grid[i][j].showBoom();

          if (grid[i][j].boom) {
            gameOver();
          }
        }
         else if (mouseButton == RIGHT) {
          console.log("RIGHTCLICK");
        }
      }
    }
  }
}

function draw() {
  background(200);
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      grid[i][j].show();
    }
  }
}

cell.js

function cell(i, j, w) {
  this.i = i;
  this.j = j;
  this.x = i * w;
  this.y = j * w;
  this.w = w;
  this.neighborCount = 0;

  this.boom = false;
  this.revealed = false;
  this.checked = false;
}

cell.prototype.show = function () {
  stroke(0);
  noFill();
  rect(this.x, this.y, this.w, this.w);
  if (this.revealed) {
    if (this.boom) {
      fill(floor(random(10, 200)), 0, 0);
      ellipse(this.x + w * 0.5, this.y + w * 0.5, this.w * 0.5);
    } else {
      fill(125);
      stroke(12);
      rect(this.x, this.y, this.w, this.w);
      if (this.neighborCount > 0) {
        textAlign(CENTER);
        textSize(this.w * 0.5);
        fill(0);
        text(this.neighborCount, this.x + this.w * 0.5, this.y + this.w * 0.75);
      }
    }
  }
}

cell.prototype.adjacentCells = function () {
  if (this.boom) {
    this.neighborCount = -1;
    return;
  }
  var total = 0;

  for (var xoff = -1; xoff <= 1; xoff++) {
    for (var yoff = -1; yoff <= 1; yoff++) {
      var i = this.i + xoff;
      var j = this.j + yoff;
      if (i > -1 && i < cols && j > -1 && j < rows) {
        var neighbor = grid[i][j];
        if (neighbor.boom) {
          total++;
        }
      }
    }
  }
  this.neighborCount = total;
}

cell.prototype.hasBoom = function (x, y) {
  return x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.w;
}

cell.prototype.showBoom = function () {
  this.revealed = true;
  if (this.neighborCount == 0) {
    this.floodFill();
  }
}

cell.prototype.floodFill = function () {
  for (var xoff = -1; xoff <= 1; xoff++) {
    for (var yoff = -1; yoff <= 1; yoff++) {
      var i = this.i + xoff;
      var j = this.j + yoff;
      if (i > -1 && i < cols && j > -1 && j < rows) {
        var neighbor = grid[i][j];
        if (!neighbor.boom && !neighbor.revealed) {
          neighbor.showBoom();
        }
      }
    }
  }
}

如果您想查看代码如何运行，请单击here

顺便说一句，不要使用 class 构造函数或任何这些恶作剧代码，它们会让我感到困惑 ;-;

Answer 1

在查看您的代码后，我发现您在 mousevent 方法中有一个嵌套循环，用于检测当前单击的单元格，并且需要正确的索引以执行基于 RIGHT | LEFT 单击的不同操作。

您正在检查 RIGHT 点击条件中的 LEFT 点击，它永远不会为真。所以，这里是修改后的代码。

function mousePressed() {
    for (var i = 0; i < cols; i++) {
      for (var j = 0; j < rows; j++) {
        /*
         * on every mouse event, we go through each cell.
         * If the click is RIGHT we will mark it check and get out of the loop.
         */ 
        if(mouseButton == RIGHT) { 
          grid[i][j].checked = true; 
          return;
        }
        if (grid[i][j].hasBoom(mouseX, mouseY)) {
          grid[i][j].showBoom(); 
 
          if (grid[i][j].boom) {
            gameOver();
          }
        }
      }
    }
}

网格中的标记单元格（纯 JavaScript + p5.js 框架中的扫雷器）

Flagging cells in grid (Minesweeper in plain JavaScript + p5.js framework)

javascript

minesweeper

p5.js