Наверх

Урок 1. Что такое «Объекты» в JavaScript и как с ними работать

Говорят, что любой программист должен хоть раз написать свою CMS или хотя бы игру. С CMS у меня возиться желания нет, так как, на мой взгляд, MODX идеальная CMS и свою мне писать теперь не хочется =)

Поэтому я решил написать Тетрис. Не уверен, что получится реализовать все нюансы и всю функциональность, но для тренировки будет достаточно. Кроме того параллельно буду описывать в блоге каждый шаг. Должен получиться неплохой курс JavaScript продвинутого уровня.

Если вы только-только решили заняться программированием, советую пройти начальный курс, например, этот: Основы программирования. Видеокурс

Если же вы уже готовы двигаться дальше, добро пожаловать под кат.

Как вы уже поняли, писать будем на JS. Подготовим каркас для нашей игры.

<html>
<head>
  <title>Tetris</title>
  <style>
  #tetris {
    display: inline-block;
    width: 264px;
    height: 440px;
    border: 2px solid #000;
    line-height: 0px;
    background: #000;
  }
  #tetris b, #tetris i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #000;
    border: 1px solid #333;
  }
  #tetris i {
    background: #fff;
    border-color: #999;
  }
  </style>
</head>
<body>
  <div id="tetris"></div>
</body>
</html>
Тег b у нас будет отвечать за свободную клетку, а тег i — за занятую.

Теперь пора познакомиться с понятием «Объект». Объект — это массив, каждый элемент которого обозначен не порядковым номером, а собственным именем. Элементы объекта называются свойствами.

Давайте создадим объект Tetris со свойствами «ширина» и «высота»
var Tetris = {
    width: 12,
    height: 20
};
Получить свойство объекта можно, указав название свойства через точку
console.log(Tetris.width);
А теперь сравните с этим кодом:
print($resource->pagetitle);
Тут тоже выводится свойство объекта $resource с названием pagetitle. Различие только в синтаксисе — в PHP свойства доступны через стрелочку, а в JS — через точку. На самом деле, объекты есть практически во всех языках программирования и понимание объектов везде одинаковое.

Свойством объекта может быть не только какое-то значение, но и другой объект. Добавим нашему объекту свойство pitch — это будет игровое поле.
var Tetris = {
    width: 12,
    height: 20,
    pitch: {}
};
Теперь пора задуматься. Ширина и высота — это свойства чего? Ширина и высота может быть не у самого тетриса, а у игрового поля. А у тетриса могут быть разве что настройки. Давайте перенесем ширину и высоту внутрь объекта pitch, а тетрису добавим настройки.
var Tetris = {
  config: {
    pitchID: "tetris",
    freeBrick: "<b></b>",
    filledBrick: "<i></i>"
  },
  pitch: {
    width: 12,
    height: 20
  }
};
Кроме игрового поля в тетрисе есть «кирпичики». Так как кирпичики складываются на игровом поле, сделаем их свойством поля
var Tetris = {
  config: {
    pitchID: "tetris",
    freeBrick: "<b></b>",
    filledBrick: "<i></i>"
  },
  pitch: {
    width: 12,
    height: 20,
    bricks: []
  }
};
В самом начале игры на поле нет ни одного кирпичика. Значит, все клетки пустые. Заполним массив bricks нулями.
for (var i = 0; i < Tetris.pitch.height; i++) {
  Tetris.pitch.bricks[i] = [];
  for (var j = 0; j < Tetris.pitch.width; j++) {
    Tetris.pitch.bricks[i][j] = 0;
  }
}
Ну, а теперь, пора что-то и нарисовать уже.
// Найдем на странице элемент, в котором будем рисовать тетрис
var tetrisDom = document.getElementById(Tetris.config.pitchID);

// Очистим на всякий случай его
tetrisDom.innerHTML = '';
// И пробежимся по массиву кирпичиков
for (var i = 0; i < Tetris.pitch.bricks.length; i++) {
  for (var j = 0; j < Tetris.pitch.bricks[i].length; j++) {
    // Добавляя на игровое поле пустой или заполненный кирпичик
    // (если в массиве кирпичиков 1, ставим заполненный кирпичик, если 0 - пустой)
    tetrisDom.innerHTML += Tetris.pitch.bricks[i][j]
                         ? Tetris.config.filledBrick
                         : Tetris.config.freeBrick;
  }
}
У меня получилось что-то типа этого (http://jsfiddle.net/ilyautkin/aavju3jd/):


Хм… Негоже начинать игру как только пользователь открыл страницу. Добавим кнопку «Старт».
<style>
#start-btn {
  display: block;
  width: 30%;
  margin: 70% auto 0;
  padding: 20px;
  background: #eee;
  text-align: center;
  cursor: pointer;
}
#start-btn:hover {
  background: #fff;
}
</style>
<div id="tetris">
  <span id="start-btn">START</span>
</div>
Кнопка не будет относиться к игровому полю — она как бы над ним. Поэтому добавим кнопку к объекту Tetris
var Tetris = {
  // ...
  startBtn: document.getElementById('start-btn')
};
И начнем рисовать только после нажатия кнопки
Tetris.startBtn.onclick = function () {
  var tetrisDom = document.getElementById(Tetris.config.pitchID);
  tetrisDom.innerHTML = '';
  for (var i = 0; i < Tetris.pitch.bricks.length; i++) {
    for (var j = 0; j < Tetris.pitch.bricks[i].length; j++) {
      tetrisDom.innerHTML += Tetris.pitch.bricks[i][j]
                           ? Tetris.config.filledBrick
                           : Tetris.config.freeBrick;
    }
  }
}
Думаю, теперь можно считать каркас нашего тетриса готовым. Вот, что получилось у меня: http://jsfiddle.net/ilyautkin/aavju3jd/2/

При открытии страницы показывается игровое поле и кнопка «Старт». После нажатия на кнопку отрисовывается первый кадр игры — с игровым полем, заполненным пустыми кирпичиками.

На следующем уроке познакомимся с методами объектов.

3 комментария

  1. Михаил 15 декабря 2015, 14:27 # 0
    Илья, приветствую!

    А для чего строка
    Tetris.pitch.bricks[i] = [];
    в первом цикле и далее в коде?
    У нас же при создании объекта Tetris
    Tetris.pitch.bricks
    есть пустой массив.

    Спасибо за материал!

    1. Илья Уткин 15 декабря 2015, 14:46 # 0
      У нас Tetris.pitch.bricks одноуровневый пустой массив, а нам надо, чтобы он был заполнен пустыми клеточками. Получается
      Tetris.pitch.bricks = [
        [ [], [], [], [], [], [], [], [], [], [], [], [] ],
        [ [], [], [], [], [], [], [], [], [], [], [], [] ],
      // ...
        [ [], [], [], [], [], [], [], [], [], [], [], [] ],
      ];
    2. Михаил 15 декабря 2015, 18:24 # 0
      Да, теперь ясно и понятно.

      Спасибо!

      Авторизация

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

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

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



      Шаблоны MODX

      1 2 Дальше »

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