康威的人生游戏更喜欢屏幕的左下角

Question

我正在创建 Conway's Game of Life，但我运行遇到了一个问题：像素似乎更喜欢“移动”到屏幕的左下角。我不确定是什么原因造成的。我试过对此进行调试，但无济于事。

link 致编辑：https://editor.p5js.org/KoderM/sketches/T-Vr35vZy

我要结束 The Coding Train 的人生游戏：https://editor.p5js.org/codingtrain/sketches/UtSMCB1zv

Sketch.js:

let conwaysGameOfLife;

function setup() {
  createCanvas(1000, 615);
  conwaysGameOfLife = new gameOfLife(0, 0, 500, 500, 5);
}

function draw() {
  background("white");
  conwaysGameOfLife.update();
}

function create2DArray(amount, amount2, fillUp) {
  let result = [];
  let filled = fillUp;

  for (let a = 0; a < amount; a++) {
    result.push([]);

    for (let i = 0; i < amount2; i++) {
      if (fillUp == "random") {
        filled = floor(random(2));
      }

      result[a].push(filled);
    }
  }

  return result;
}

class gameOfLife {
  constructor(x, y, width, height, size) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.size = size;
    this.randomList = [];

    this.currentState = create2DArray(
      ceil(width / this.size),
      ceil(height / this.size),
      "random"
    );

    this.blank = create2DArray(
      ceil(width / this.size),
      ceil(height / this.size)
    );

    this.next = create2DArray(
      ceil(width / this.size),
      ceil(height / this.size)
    );
  }

  update() {
    let surrounding;
    let state;
    let result = 0;

    for (let i in this.currentState) {
      for (let j in this.currentState[i]) {
        surrounding = this.getSurrounding(i, j);

        if (surrounding < 2) {
          result = 0;
        }

        if (surrounding == 3) {
          result = 1;
        }

        if (surrounding == 2 && this.currentState[i][j] == 1) {
          result = 1;
        }

        if (surrounding > 3) {
          result = 0;
        }

        this.next[i][j] = result;
      }
    }

    for (let i in this.currentState) {
      for (let j in this.currentState[i]) {
        if (this.currentState[i][j] == 1) {
          fill("blue");

          noStroke();

          square(i * this.size, j * this.size, this.size);
        }
      }
    }

    this.currentState = this.next;

    this.next = this.blank;
  }

  getSurrounding(col, row) {
    let result = 0;
    if (this.getCurrentState(Number(col) - 1, Number(row) - 1)) {
      result++;
    }
    if (this.getCurrentState(Number(col) - 1, Number(row) + 1)) {
      result++;
    }
    if (this.getCurrentState(Number(col) - 1, Number(row) - 1)) {
      result++;
    }
    if (this.getCurrentState(Number(col) + 0, Number(row) - 1)) {
      result++;
    }
    if (this.getCurrentState(Number(col) + 0, Number(row) + 1)) {
      result++;
    }
    if (this.getCurrentState(Number(col) + 1, Number(row) - 1)) {
      result++;
    }
    if (this.getCurrentState(Number(col) + 1, Number(row) + 0)) {
      result++;
    }
    if (this.getCurrentState(Number(col) + 1, Number(row) + 1)) {
      result++;
    }

    return result;
  }

  getCurrentState(col, row) {
    if (col < 0 || row < 0) {
      return false;
    }

    if (
      col > ceil(this.width / this.size) - 1 ||
      row > ceil(this.height / this.size) - 1
    ) {
      return false;
    }

    const result = this.currentState[col][row];

    if (!result || result == 0) {
      return false;
    }

    if (result == 1) return true;
  }
}

function keyPressed() {
  if (keyCode == ENTER) {
    conwaysGameOfLife.currentState = create2DArray(
      ceil(conwaysGameOfLife.width / conwaysGameOfLife.size),
      ceil(conwaysGameOfLife.height / conwaysGameOfLife.size),
      "random"
    );
  }
}

Answer 1

第一次调用 update() 设置 this.next = this.blank，使两者指向同一个数组。 update() 的第二次调用设置 this.currentState = this.next，之后所有三个都指向同一个数组。

由于计数和更新发生在同一个数组上，getSurrounding() 中邻居的计数会错误地受到您在同一循环中进行的更新 this.next[i][j] = result 的影响。

康威的人生游戏更喜欢屏幕的左下角

Conway's game of life prefers bottom-left of screen

javascript

game-development

conways-game-of-life

p5.js