this.groups[this.matrix[y][x]].push(x, y); вынес в цикл, который в calc.Я не могу понять. Почему если я в my_data закину объект, то все работает как надо.
Меня устроит любой даже блокирующий вариант.
this.ctx.fillStyle = this.memory[y][x] === 0 ? '#0d2a37': '#CCC';
memory[y][x] === 0 ? бла-бла-бла (и почему memory, а не matrix? - отрисовывать надо новое состояние, а не прошлое)? Неужели количество доступных состояний у вас ограничено всего лишь двумя? А как же картинка из вопроса, где есть клетки в шести различных состояниях? Лучше сделайте объект, где ключ - состояние, а значение - цвет:var colors = {
0: какой-то цвет,
1: ещё какой-то цвет,
2: и ещё,
3: да сколько угодно,
...
};this.ctx.fillStyle = colors[this.matrix[y][x]];var groups = [...Array(numCellStates)].map(() => []);groups[this.matrix[y][x]].push(x, y);for (var state = 0; state < groups.length; state++) {
this.ctx.fillStyle = colors[state];
var cells = groups[state];
for (var i = 0; i < cells.length; i += 2) {
this.ctx.fillRect(cells[i] * this.coefX, cells[i + 1] * this.coefY, this.coefX, this.coefY);
}
}Рисовать только "живые" клетки на "мертвом" фоне.
Рисовать только изменившиеся клетки.
Есть еще идеи?
Попробую канвас, но пока-что replace быстрее всего
<button @click="$emit('show-next', 0)">1</button>
<button @click="$emit('show-next', 1)">2</button>
...