Урок 10. Оптимизируем отрисовку

Пора заняться и тормозами. Как я уже сказал, тормоза вызваны постоянной перерисовкой DOM — у нас каждый тик происходит очистка HTML и генерация новой структуры.

Изменим алгоритм. Теперь заполненные и пустые клетки будут отличаться только цветом. А метод draw будет только менять цвет нужного кирпичика.

Так как у нас кнопка «Старт» изначально находится внутри игрового поля, значит, при начале игры нам надо очистить HTML, но сделать это только один раз. Вариант только один — перенести этот процесс в метод init

var Tetris = {
  config: {
    pitchID: "tetris",
    brick: "<b></b>",
    freeBrick: {
      background: "#000",
      border: "1px solid #333"
    },
    filledBrick: {
      background: "#fff",
      border: "1px solid #999"
    },
    // ...
  },
  // ...
  init: function() {
    // ...
    Tetris.startBtn.onclick = function () {
      // Очищаем игровое поле
      Tetris.clearPitch();
      Tetris.tick();
    }
    // ...
  },
  // ...
  clearPitch: function() {
    var tetrisDom = Tetris.pitch.getDom();
    // Очищаем поле
    tetrisDom.innerHTML = '';
    // Рисуем пустые клеточки
    Tetris.each(Tetris.pitch.bricks, function(i,j){
      tetrisDom.innerHTML += Tetris.config.brick;
    });
  },
  draw: function() {
    var tetrisDom = Tetris.pitch.getDom();
    Tetris.each(Tetris.pitch.bricks, function(i,j){
      // Для удобства определяем переменные со свойствами клеток
      var fillBG = Tetris.config.filledBrick.background;
      var freeBG = Tetris.config.freeBrick.background;
      var fillBorder = Tetris.config.filledBrick.border;
      var freeBorder = Tetris.config.freeBrick.border;
      // Рассчитываем порядковый номер клеточки
      var brickIndex = i * Tetris.pitch.width + j;
      // И разукрашиваем её в соответствующий цвет
      if (Tetris.pitch.bricks[i][j] || Tetris.figure.checkCoords(i,j)) {
        tetrisDom.getElementsByTagName('b')[brickIndex].style.background = fillBG;
        tetrisDom.getElementsByTagName('b')[brickIndex].style.border = fillBorder;
      } else {
        tetrisDom.getElementsByTagName('b')[brickIndex].style.background = freeBG;
        tetrisDom.getElementsByTagName('b')[brickIndex].style.border = freeBorder;
      }
    });
  },
  // ...
};
Tetris.init();

Вот это оптимизация — так оптимизация: http://jsfiddle.net/ilyautkin/aavju3jd/22/. Если честно, я не ожидал, что результат будет настолько крутым)