Наверх

Урок 5. Просчитываем столкновения и строим башню

Теперь мы можем приступить к самому интересному.

В конце этого урока мы должны получить следующий функционал. После того, как фигура коснулась нижнего края поля, должна появиться следующая фигура. Она так же должна начать своё движение вниз. Но теперь нам надо будет проверять не только достигла ли фигура края поля, но и соприкоснулась ли она с кирпичиками, которые уже находятся на поле.

Для этого мы будем фигуру, которая завершила своё движение объединять с массивом кирпичиков на поле.

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

Сперва вынесем механизм создания фигуры в объект figure. Назовём новый метод go, потому что он будет отвечать за начало работы фигуры.
figure: {
  // ...
  go: function() {
    if (this.coords.length == 0) {
      this.create();
    } else {
      this.process();
    }
  },
  // ...
}
Здесь мы проверяем, есть ли фигура на поле в данный момент. Если нет — создаём, а если есть — приказываем начать движение. В методе process будет логика движения фигуры:
figure: {
  // ...
  process: function() {
    // Если фигура соприкоснулась со стенкой или кирпичиком
    if (this.touched()) {
      // Объединяем её с массивом кирпичиков
      this.joinToBricks();
      // Проверяем, не закончилась ли игра
      if (!Tetris.checkGameOver()) {
        // Если нет - освобождаем место для новой фигуры
        this.destroy();
      }
    } else {
      // Если прикосновения не было, фигура делает один шаг вниз
      this.makeStep();
    }
  },
  // ...
}
Над названиями методов (например, go и process), конечно, надо еще подумать. Возможно, как переименовать эти методы мы подумаем в дальнейшем…

Итак, приказы фигуре мы раздали, теперь надо объяснить, как их выполнять.
figure: {
  // ...
  touched: function() {
    // Если следующей после фигуры строки в массиве кирпичиков не существует,
    // значит мы достигли нижнего края поля. Поэтому возвращаем true - соприкосновение есть
    if (Tetris.pitch.bricks[this.coords[0] + 1] == undefined) {
      return true;
    }
    // Если на следующей строчке кирпичик есть
    // значит, мы с ним соприкоснулись
    if (Tetris.pitch.bricks[this.coords[0] + 1][this.coords[1]]) {
      return true;
    }
    // Если ни одно из условий не выполнено - значит, соприкосновения нет
    return false;
  },
  joinToBricks: function() {
    // Берем координаты фигуры и на её месте ставим кирпичик
    // (1 - значит, клеточка занята кирпичиком, 0 - клеточка пустая,
    // поэтому ставим единичку)
    Tetris.pitch.bricks[this.coords[0]][this.coords[1]] = 1;
  },
  destroy: function() {
    // Чтобы освободить место для следующей фигуры, просто чистим координаты
    this.coords = [];
  },
  makeStep: function() {
    // Следующий шаг - значит, увеличиваем координату фигуры
    this.coords[0]++;
  }
  // ...
}
Функция checkGameOver не относится к фигуре, поэтому она будет методом корневого объекта — объекта Tetris
var Tetris = {
  // ...
  checkGameOver: function() {
    // Если на момент проверки фигура находится на верхней строчке - Game over
    if (Tetris.figure.coords[0] == 0) {
      alert('Game over');
      clearInterval(Tetris.tickHandler);
    } else {
      return false;
    }
  },
  // ...
};

У себя я расположил методы объектов в условном порядке их вызова, но должен сказать, что порядок следования методов значения не имеет — все на ваш вкус =)

Вот, что получилось у меня: http://jsfiddle.net/ilyautkin/aavju3jd/7/

0 комментариев

    Авторизация

    через сервис Loginza:

    Подписка или RSS

    Буду присылать новые статьи — никакого спама



    Шаблоны MODX

    1 2 Дальше »

    Объектная
    модель
    MODX