模拟鼠标移动，不起作用

Question

我正在尝试在 p5.js 中创建 150 只鼠标在 20x20 网格内移动的模拟（类似库的处理）。首先，我在随机位置生成 150 只老鼠，一切顺利。但是在我生成老鼠之后，我试图让它们移动到它们的邻居之一。它没有移动到邻居之一并使当前正方形为空它停留在它已经是一个的那个+它移动到下一个所以而不是有 150 只鼠标我突然有 300 只......我已经尝试更改代码几个小时但我找不到问题...这是我的代码：

var w = 40;
var grid = [];
var mouses = 10;
var mouseAmount = [];
var Mouse;
var current;



function setup() {
  createCanvas(800, 800);
  cols = floor(width/w)
  rows = floor(height/w)
  // frameRate(60);

  for (var j = 0; j < rows; j++) {
    for ( var i = 0; i < cols; i++) {
      var cell = new Cells(i,j);
      grid.push(cell);
    }
  }
  amount = new Amount;
}

function draw() {
  background(51);
  for ( var i = 0; i < grid.length; i++) {
    grid[i].show();
  }

  amount.run();

}

function index(i, j) {
  if (i < 0 || j < 0 ||  i > cols-1 || j > rows-1 ) {
    return -1;
  }
  return i + j * cols;
}


function Cells(i, j) {
  this.i = i;
  this.j = j;
  this.active = false;

  this.moveCell = function() {
    var neighbors = [];



    var top = grid[index(i, j -1)];
    var right = grid[index(i+1, j)];
    var bottom = grid[index(i, j+1)];
    var left = grid[index(i-1, j)];

    if (top) {
      neighbors.push(top)
    }

    if (right) {
      neighbors.push(right)
    }

    if (bottom) {
      neighbors.push(bottom)
    }

    if (left) {
      neighbors.push(left)
    }

    if(neighbors.length > 0) {
      var r = floor(random(0, neighbors.length));
      return neighbors[r];
    } else {
      return undefined;
    }

  }



  this.show = function() {
    var x = this.i*w;
    var y = this.j*w;
    stroke(255);
    noFill();
    rect(x,y,w,w);

    if(this.active == true) {
      fill(155, 0, 255, 100)
      rect(x, y, w, w)
    }

  }
}

function Amount() {
  this.run = function() {
    var r = floor(random(grid.length))
    for (var i = 0; i < mouses; i++) {
      var mouse = grid[r];
      mouseAmount.push(mouse)
    }


    if (mouseAmount.length < 1499) {
      for (var i = 0; i < mouseAmount.length; i++) {
        mouseAmount[i].active = true;
      }
    }
    if (mouseAmount.length > 1499) {
      Next();
    }
  }
}


function Next(i,j) {
  for (var i = 0; i < mouseAmount.length; i++) {
    current = mouseAmount[i];
    var nextCell = current.moveCell();
    if (nextCell) {
      nextCell.active = true;
      current.active = false;
      current = nextCell;
    }
  }
}

提前谢谢你:)

Answer 1

我不太明白你的代码到底应该做什么，但你的代码有几点让我印象深刻：

问题一： 我不明白你是如何遍历 grid 数组的。您似乎正在迭代 mouseAmount，由于某种原因，它似乎保留了网格中的随机单元格？这对我来说没有多大意义。为什么不直接遍历 grid 数组？

问题二：然后你将单元格随机移动到一个邻居，但你没有考虑邻居是否已经处于活动状态。我不确定你想要发生什么，但这似乎有点奇怪。

问题三：通常像这样的模拟，你必须将下一代复制到一个新的数据结构中，而不是在逐步执行时修改数据结构。

最大的问题是您没有真正解释您希望代码做什么，或者这段代码代替做什么，或者这两者有何不同。但如果我是你，我会做出以下改变：

第一步： 以更合理的方式遍历 grid 数组。只需遍历每个索引并对每个单元格采取适当的操作。如果我是你，我会只使用二维数组并使用嵌套 for 循环对其进行迭代。

第二步：确保你搬到邻居家的逻辑是正确的。是否要将单元格移至已激活的单元格？

第三步： 在修改之前复制 grid。以这种方式思考：当您遍历网格时，假设您将一个单元格向下移动一行。然后继续迭代，您将再次到达新激活的单元格。换句话说，你会在一代人中两次触摸同一个活动单元格，这肯定会把你弄得一团糟。

忠告：首先让这个对单个活动单元格起作用。真的很难说清楚发生了什么，因为你同时发生了很多事情。退后一步，确保它适用于一个活动单元格，然后再移动到整个网格。

模拟鼠标移动，不起作用

Simulation of mouses moving, don't work

javascript

oop

processing

p5.js