Урок 6. Создаём сложную фигуру. Callback в JavaScript

Фигуры в тетрисе состоят не из одного кирпичика, а из нескольких. Соответственно, координаты фигуры будут состоять из координат каждого отдельного кирпичика:

figure: {
  // ...
  create: function() {
    // Для начала создадим квадрат
    this.coords = [
      [[-1,5],[-1,6]],
       [[0,5], [0,6]]
    ];
  },
  // ...
}

Начальные координаты отрицательные, потому что фигура должна появляться постепенно.

Все наши методы, отвечающие за проверку соприкосновения или рисование фигуры, предполагают, что у свойства coords есть только строка и колонка. А теперь свойство coords стало вложенным массивом.

Для того, чтобы что-то сделать с каждым элементом массива в JavaScript применяется цикл for. Для вложенных массивов применяется вложенный цикл:

for (var i = 0; i < coords.length; i++) {
  for (var j = 0; j < coords[i].length; j++) {
    // Здесь что-то делаем
  }
}

Но такой код очень сложно понять, когда просто бросаешь на него взгляд. А если использовать его несколько раз, код превращается в нечитаемую портянку из циклов, открывающихся и закрывающихся скобок, индексов, точек с запятой.

Вот бы вынести этот код в отдельную функцию, которую можно было бы вызывать в любом месте. Хорошо, что JavaScript позволяет передать внутрь функции другую функцию. Обычно говорят, передать в функцию коллбек (callback).

var Tetris = {
  // ...
  // В эту функцию мы будем передавать координаты (в первом аргументе)
  // и функцию (во втором аргументе)
  each: function(coords, callback) {
    // Тогда для координат запустится цикл
    for (var i = 0; i < coords.length; i++) {
      for (var j = 0; j < coords[i].length; j++) {
        // и для каждой координаты будет выполнена переданная функция
        callback(i,j);
      }
    }
  }
};

Теперь нужно переписать все методы для работы с вложенными координатами. Например, вот так будет выглядеть метод makeStep:

figure: {
  // ...
  makeStep: function() {
    Tetris.each(this.coords, function(i,j){
      Tetris.figure.coords[i][j][0]++;
    });
  },
  // ...
}

Когда мы перепишем все методы, код будет выглядеть так: http://jsfiddle.net/ilyautkin/aavju3jd/11/. Кроме применения callback'а я ввел несколько переменных, чтобы код сильно не разбухал в ширину и его было удобнее читать.

Можно потестировать работу с разными типами фигур. Вот начальные координаты, например, для «змейки»:

[
  [[-1,4],[-1,5]],
   [[0,5], [0,6]]
]