Контекст вызова.Не видит массив

Question

class ConfigField {
  constructor() {
    this.canvas = document.querySelector('#canvas');
    this.context = this.canvas.getContext('2d');
    this.array = [];
    let timer;
    this.timer = timer;
    this.generatePlayingField();
    this.canvas.addEventListener('click', (e) => {
      this.clickCanvasEvent(e);
    });
    this.drawGrid();
    document.getElementById('start').addEventListener('click', () => this.startLife(this));
  }
  generatePlayingField() {
    const n = 50,
      m = 50;
    for (let i = 0; i < m; i++) {
      this.array[i] = [];
      for (let j = 0; j < n; j++) {
        this.array[i][j] = 0;
      }
    }
  }
  clickCanvasEvent(event) {
    let x = event.offsetX;
    let y = event.offsetY;
    console.log(x);
    console.log(y);
    x = Math.floor(x / 10);
    y = Math.floor(y / 10);
    this.array[x][y] = 1;
    console.log(this.array);
    this.drawField();
  }
  drawGrid() {
    for (let x = 0.5; x < 500; x += 10) {
      this.context.moveTo(x, 0);
      this.context.lineTo(x, 500);
    }
for (let y = 0.5; y &lt; 500; y += 10) {
  this.context.moveTo(0, y);
  this.context.lineTo(500, y);
}
this.context.strokeStyle = '#888';
this.context.stroke();

}
  drawField() {
    this.context.clearRect(0, 0, 500, 500);
    this.drawGrid();
    for (let i = 0; i < 50; i++) {
      for (let j = 0; j < 50; j++) {
        if (this.array[i][j] == 1) {
          this.context.fillStyle = 'green';
          this.context.fillRect(
            i * 10, j * 10, 10, 10,
          );
        }
      }
    }
  }
  startLife(_that) {
    // start gameOfLife
    let array2 = [];
    for (let i = 0; i < 50; i++) {
      array2[i] = [];
      for (let j = 0; j < 50; j++) {
        let neighbors = 0;
        if (_that.array[ConfigField.fpm(i) - 1][j] == 1) neighbors++; // up
        if (_that.array[i][ConfigField.fpp(j) + 1] == 1) neighbors++; // right
        if (_that.array[ConfigField.fpp(i) + 1][j] == 1) neighbors++; // bottom
        if (_that.array[i][ConfigField.fpm(j) - 1] == 1) neighbors++; // left
        if (_that.array[ConfigField.fpm(i) - 1][ConfigField.fpp(j) + 1] == 1) neighbors++;
        if (_that.array[ConfigField.fpp(i) + 1][ConfigField.fpp(j) + 1] == 1) neighbors++;
        if (_that.array[ConfigField.fpp(i) + 1][ConfigField.fpm(j) - 1] == 1) neighbors++;
        if (_that.array[ConfigField.fpm(i) - 1][ConfigField.fpm(j) - 1] == 1) neighbors++;
        /*
        if (array2[this.fpm(i)-1][j]==1) neighbors++;// up
        if (array2[i][this.fpp(j)+1]==1) neighbors++;// right
        if (array2[this.fpp(i)+1][j]==1) neighbors++;// bottom
        if (array2[i][this.fpm(j)-1]==1) neighbors++;// left
        if (array2[this.fpm(i)-1][this.fpp(j)+1]==1) neighbors++;
        if (array2[this.fpp(i)+1][this.fpp(j)+1]==1) neighbors++;
        if (array2[this.fpp(i)+1][this.fpm(j)-1]==1) neighbors++;
        if (array2[this.fpm(i)-1][this.fpm(j)-1]==1) neighbors++;*/
        (neighbors == 2 || neighbors == 3) ? array2[i][j] = 1: array2[i][j] == 0;
      }
    }
    _that.array = array2;
    this.drawField();
    let count = 0;
    count++;
    document.getElementById('count').innerHTML = count;
    this.timer = setTimeout(this.startLife, 300);
  }
  static fpm(i) {
    if (i == 0) return 50;
    else return i;
  }
  static fpp(i) {
    if (i == 49) return -1;
    else return i;
  }
}
const test = new ConfigField();
console.log(test);

#canvas {
  background-color: #fff;
  width: 500px;
  height: 500px;
  border: 3px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div class="container">
    <canvas id="canvas" width="500" height="500"></canvas>
    <div id="count"></div>
    <button id="start">Start</button>
  </div>
</body>

</html>

что не так? Не видит массив.Игра жизнь

Что у вас тут не работает? – Stranger in the Q Feb 22 '19 at 14:48 — Stranger in the Q, Feb 22 '19 at 14:48

score 0 · Accepted Answer · 2019-02-22T14:59:19.827

0

//this.timer = setTimeout(this.startLife, 300);
this.timer = setTimeout(this.startLife.bind(this), 300, _that);

Без параметра _that можно обойтись, так как startLife вызывается в контексте экземпляра ConfigField. В коде функции вместо _that используйте this.

edited Feb 22 '19 at 14:59

answered Feb 22 '19 at 14:50

Контекст вызова.Не видит массив

1 Answers1