Урок 4. Создаем фигуру и заставляем её двигаться. Оператор this

Теперь попробуем создать падающую фигуру. Для этого добавляем новый объект figure со свойством coords и методом create

var Tetris = {
  // ...
  figure: {
    coords: [],
    create: function() {
      this.coords = [0,6];
    }
  },
  // ...
}

Когда фигуры на поле нет, её координаты — пустой массив. Для того, чтобы фигура появилась, надо, чтобы у нее появились координаты.

В методе create мы использовали оператор this. Этот оператор возвращает контекст вызоыва. В данном случае — он указывает на текущий объект, то есть, на figure. А значит, this.coords — это свойство coords объекта figure.

В методе tick будем проверять, существует ли фигура. Если нет — будем ее создавать, а если есть — будем рисовать кадр и увеличивать координату фигуры на 1

var Tetris = {
  // ...
  tick: function() {
    // Проверяем, есть ли координаты у фигуры
    if (Tetris.figure.coords.length == 0) {
      // если нет - значит, фигуры нет, создаём её
      Tetris.figure.create();
    }
    Tetris.draw();
    // Если фигура достигла нижней строчки, останавливаем игру
    if (Tetris.figure.coords[0] >= Tetris.pitch.height - 1) {
    	clearInterval(Tetris.tickHandler);
    }
    // Если нет, увеличиваем вертикальную координату
    Tetris.figure.coords[0]++;
    if (Tetris.tickHandler === undefined) {
      Tetris.tickHandler = setInterval(function(){
        Tetris.tick();
      }, 1000);
    }
  },
  // ...
}

В методе draw надо дописать отрисовку занятого кирпичика еще и на текущих координатах фигуры:

var Tetris = {
  // ...
  draw: function() {
    var tetrisDom = Tetris.pitch.getDom();
    tetrisDom.innerHTML = '';
    for (var i = 0; i < Tetris.pitch.bricks.length; i++) {
      for (var j = 0; j < Tetris.pitch.bricks[i].length; j++) {
        // Проверяем, есть ли кирпичик
        if (Tetris.pitch.bricks[i][j] ||
           // ИЛИ есть ли по этим координатам фигура
           (Tetris.figure.coords[0] == i &&
            Tetris.figure.coords[1] == j )) {
          tetrisDom.innerHTML += Tetris.config.filledBrick;
        } else {
          tetrisDom.innerHTML += Tetris.config.freeBrick;
        }
      }
    }
  }
};

Теперь у нас есть полноценное поле для тетриса, фигурка (пока в виде одного кирпичика), и она, даже, падает: http://jsfiddle.net/ilyautkin/aavju3jd/5/